I'm trying to use a label to tell when something is InProcess but the label moves another span in the panel even though it has plenty of room to move around.
How it is right now:
http://imgur.com/Q9VgJMs
How it should be:
http://imgur.com/5yXGGCs
Here's the code for it.
<div class="panel-body log-work-lot-container">
<ul class="list-unstyled">
<li class="log-work-item-lot" data-ng-click="vm.SetActiveBatch(batch);" data-ng-class="{'selected' : batch.IsActive}"
data-ng-repeat="batch in vm.Batches" data-ng-show="!batch.IsScrapped && !batch.IsCompleted">
<div style="text-align:center;">
<span class="pull-left">0000{{batch.Name}}</span>
<span class="pull-right label label-info" data-ng-show="batch.InProcess"> In Process </span>
<span style="">QTY {{batch.Quantity}}</span>
</div>
</li>
</ul>
</div>
This should do it:
.list-unstyled .pull-left { margin-right: -100%; }
.list-unstyled .pull-right { margin-left: -100%; }
Please note this is a hack-ish way of doing it and makes your left/right elements overlap the centered content if they don't fit on one row. In order not to overlap when on very small screens, I updated your fiddle based on your markup. It's not perfect, but it's better than overlapping them :).
Use bootstrap grid structure to organize data in column formats.
An example - http://www.bootply.com/5FLFCdIny1
(Above example uses only col-xs-*, which will display data in column format for all kind of devices. You can customize display based on screen size)
Related
On this project I'm working on, the user has the ability to decide which widgets (logo, search, sign in, cart button) are placed on this header up to a limit of 12 columns. They can decide how many columns each widget will take.
On this scenario, I have a widget that takes 2 bootstrap columns, but the entire content cannot fit inside.
I must have the whitespace set to 'nowrap', which is making the content overflowing to the next column.
I would like to know if it's possible in CSS and how can I force the content of this column to expand and adapt to it's width when there's no room (maintaining the white-space set to 'nowrap').
Below is a simplified version of the HTML used (that still produces the problem I'm trying to fix)
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-2 col-xs-2">
<a class="logo" href="#" style=""><img src="logo.png" alt="Logo"></a>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<input type="text" class="form-control" placeholder="Search All Categories">
</div>
<div class="col-md-2 col-sm-2 col-xs-2 text-nowrap">
<a><span>Hi, Sign In<br><strong>Your Account</strong></span></a>
<a><span>Quick Order</span> <i class="fa fa-bolt"></i></a>
</div>
<div class="col-md-2 col-sm-2 col-xs-2">
<div class="cart-btn">
</div>
</div>
</div>
</div>
The CSS for the cart button
.cart-btn {
width: 120px;
height: 40px;
display: inline-block;
background-color: #292c2e;
margin-left: 10px;
}
A sample on JSFiddle reproducing this issue
http://jsfiddle.net/scottx/mA6Za/438/
The idea is to allow the user to add these widgets to the header and make sure that all will load as supposed and prevent them from 'breaking' regardless of what widgets were added and how many columns they decide to assign for each one. So in this scenario, a user added the widget 'logo' taking 2 columns, the widget 'search' taking 6 columns, the widget 'various' which contains the sign in button, favorites, etc and is taking 2 columns, and the widget 'cart' also taking 2 columns. The problem I'm facing here is that the widget 'various' on smaller screens is too large to fit in 2 columns only.
Probably what I'm trying to achieve is not possible in a way that if we're taking more space than assigned to a column, other column will have to lose space and I guess the browser doesn't know which one will be.
I think this can be fixed with JS but I'd like to know if anyone might have a solution with CSS only.
Thank you so much!
I would go with:
div.row > div > * {
max-width: 100%;
}
This css will force all elements inside cols to take max. 100% width of parent
I don't know what exactly you want to achieve in there but we can make text to stop overflow container with
.text-nowrap {
white-space:initial;
}
Update JSFiddle
I am trying to share the navbar across all devices, but I want it to format differently on small screens than on large. I am new to Bootstrap so this might be obvious, but I am having trouble getting the menu right with a single set of code and not trying to do it with different rows and col-* settings.
Bootply Sample
I want two things actually. I would like the win and loss to be on the same line (which is close without the navbar-right) except they are not even in vertical position.
EDIT: I am able to correct this when removing navbar-right etc..., but do not get the navbar-right when the menu is condensed.
Secondly, I wanted the navbar-right, so when on a small display, all the badges align on the right hand side of the menu.
Is there a way to keep the menu smaller as well, so on a tablet it is not the whole width of the screen while on a phone it might be?
When the navbar normally draws, I want the badges beside the labels to keep the menu items smaller/closer together. Only on the pull down menu do I want them to go to the right.
Do I need to create two copies of the navigation to achieve this?
First, the badges seem aligned to me if you remove those navbar-right classes. If you are using that class just to float them right, you should be using pull-right but in this case there's no need.
Second, if you wrap your badges inside another span, then you can use media queries to float the container right on mobile devices.
<span class="badges">
<span class="badge alert-success">Win: 3</span>
<span class="badge alert-danger">Loss: 1</span>
</span>
/* Note that you can use Bootstrap's '#screen-sm-min' variable if using LESS.*/
#media (max-width: 767px) {
.badges {
float: right;
}
}
If you want your navbar to be full width on mobile but not any other device, you could try something like this:
#media (min-width: 768px) {
.navbar {
width: 80%;
margin: 0 auto;
}
}
Demo
Edit
For the changing width you can use Bootstrap's col-*-* classes like this:
<div class="wrap">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
...
</div>
</div>
</div>
That means for mobile it'll be full width, but anything from portrait tablet upwards will take up 10 of the 12 grid.
Demo
I use twitter bootstrap 2 version.
<div class="span4">
&{'main.menu.with.me'}
&{'main.menu.raise.request'}
</div>
I need to put 2 buttons to the right with space between them. But if I put pull-right to both there is no space between them, I injecting doesn't help.
not very good at html, but I'd do something like this:
bootstrap 2:
<div class="span4">
<div class='pull-right'>
&{'main.menu.with.me'}
&{'main.menu.raise.request'}
</div>
</div>
in this case you'd want a div.clearfix after the one with pull-right and there is no css involved unless you want more space between buttons then bootstrap already has.
(update 4.08.2016) bootstrap 3:
<div class='btn-toolbar'>
&{'main.menu.with.me'}
&{'main.menu.raise.request'}
</div>
simply add pull-right to both the buttons
the, to give space :
.btn{
margin-right:10px;
}
Also, keep in mind that, pulling right would change the order of the buttons...so better swap according to your layout (i have done that in my fiddle example)
fiddle demo
.span4 .btn {
margin-left: 10px;
margin-right: 10px;
}
I have created a list view in JQuery mobile with 2 grids. And I need to set background color to only 1 grid (block-a) but doing so, the padding of the list view is being displayed as white. I need to set color for the padding also. I need the first half to have one colour and second half to have different colour.
Thanks in advance.
<div data-role="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-theme="none">
<li data-role="list-didvider" >
<a href="#">
<div class="ui-grid-a" data-theme="none">
<div class="ui-block-a">Distance</div>
<div class="ui-block-b">Places</div>
</div>
</a>
</li>
</ul>
</div>
</div>
You need to customize css in jQuery.
Like for example
.ui-grid-a .ui-block-a { customization goes here }
.ui-grid-a .ui-block-b { customization goes here }
I have set up a sample jsFiddle, it will get you started.
http://jsfiddle.net/Akki619/z3BQ2/
The fiddle may not provide the exact solution you are looking for but you can always play along for desired results.
In your case: You need to customize data-theme a/c to your need.
It might be a tricky to get the desired result as you want.
Your padding is already colorized so far, but the margin isn't.
You need to remove the margin and set a padding:
ul li {
padding-left: 10px;
margin-left: 0px;
}
Then your background color will be set with the space before your items content.
<ul>
<li><img src='/profile.jpg'><span>Name</span><span>Address</span></li>
</ul>
I want to have two columns with the image in the left column spanning two rows and the text in the right column on an upper and lower row to the right of the image.
I tried using divs with blueprint css but then the anchor tag is displayed in a weird way - it doesn't appear to encompass the entire list element on hover but instead a sliver.
I also tried with a table layout but because I can't control the padding well with CSS it looks bulky.
How can I turn this into a two-column layout within the list element?
Some of your HTML is invalid, so I've taken the liberty of cleaning some of it up. Something like this should work for you:
<ul>
<li>
<div>
<span class="item-container"><img src="blah.jpg" /></span>
<div class="item-container">
<span class="item">Name</span>
<span class="item">Address</span>
</div>
</div>
</li>
</ul>
CSS:
.item {float:left; clear:left;}
.item-container {float:left;}
Add margins/padding as necessary.
Working sample: http://jsfiddle.net/andrewwhitaker/KUaCE/
use float:left on all elements, also needs float for proper height