I have an element which could contain one, two or three buttons.
When i have only one button, then there is no margin to the right
When i have two buttons, then the first button gets a right margin
And when i've three buttons, the first and the second button get a right margin
What i have tried:
The :only-child covers my needs for only one button.
The sibling selector works pretty good but is limited when it comes to three buttons
Would love to read your solutions for this :)
EDIT:
Here comes a screen-capture of the page:
It shows the three possibilities. The container could either contain one, two or three buttons. I have already figured out how to edit the space around two buttons but how do i manage this for three?
You can use the :last-child selector and have css that looks like this:
button {
margin-right: 10px;
}
button:last-child {
margin-right: 0px;
}
When you only have one button, it will be the last element, and therefore won't have any margin. Then for two and three buttons, the last one won't have margin.
The :last-child selector works for IE9 and above.
Related
I have a split Bootstrap dropdown that I am wrapping in a form and adding to a table heading. The issue is that when you narrow the screen size the dropdown toggle element wraps. At first I assumed it was the form wrap but I think its the table heading.
Here is a http://www.bootply.com/zzRJxiYy80 for an example with live code.
Thanks,
Dan
MINOR UPDATE (More details on comments from answer)
In my case I am using the outline buttons. I have Ransack sort links in each button and filters in the dropdown. The second 'Major Category' one has a slightly wider line than the rest and at this point I am making way too much of a big deal of it. Minor stuff like that drives me nuts but I need to let it go :)
This one is at -0.45em
I played with this and settled on -0.37em
I would suggest overriding Bootstrap's use of float:left for keeping these .btn elements on the same line, and instead use display:inline-block for that. Then, you can use white-space:nowrap to prevent them from breaking to multiple lines when space becomes limited.
Most of the styles you need (display:inline-block and white-space:nowrap) are actually already defined in Bootstrap's CSS - you just need a couple more styles to use them to your advantage:
.btn-group.nowrap > .btn{
float:none;
}
.btn-group.nowrap > .btn:not(:first-child){
margin-left: -0.4em; /* To deal with whitespace between inline-block elements */
}
Here's an updated Bootply to demonstrate. Hope this helps! Let me know if you have any questions.
This problem is easier seen than described. See here: jsFiddle
To get a clearer understanding of what is going on, I have updated the fiddle to include a class .ui-sortable-placeholder to be visible and red. This is the class of the jQueryUI (normally) invisible element involved with the sortable. As seen here: http://jsfiddle.net/rLW9m/9/. Thanks to George for pointing that out in his answer. With this answer we can probably consider this resolved as far as the "what" but perhaps the "why" is still TBD.
Of the three scenarios shown, they all apply float:left to the LI elements but the final one behaves poorly; in the last bunch of sorted items, clicking on the first or second item "drops" the rest of the list beneath the row they were just in (and the item clicked).
The scenario is exhibited when the float:left CSS is applied directly to my <li>s using inline styling versus applying the same change via a css file. Is this a jQueryUI bug?
When I apply the CSS to my elements in the identical way to how jQueryUI's documentation shows (the first example in the jsFiddle), then the sorting occurs just fine. However, once the same CSS (as far as I understand it) is applied directly to my list items, then sorting behavior is erratic as described above.
The way to get jQueryUI to sort nicely in a grid is to apply the float only in your CSS file using classes or other mechanisms:
/* Starting from UL descriptor with LI descendants */
.ulClass li {
float:left;
}
/* or directly to LI element but still via CSS file */
.makeTheseLIsSortable {
float:left;
}
/* DOES NOT WORK properly to directly apply CSS
(items to the right are shifted below when items on left selected) */
<ul id='makeSortable'>
<li style='float:left'>test</li>
<li style='float:left'>three</li>
</ul>
Why are these two CSS applications handled so differently by jQueryUI? When it is rendered, it sure seems like the list elements themselves are float:left either way. What is your take? Why can't I apply the CSS directly to the list elements and get the same, expected behavior?
EDIT: Thanks to George, I now have a better understanding of what is going on. There are probably some really good reasons that jQueryUI doesn't copy down the element inline styles to their "placeholder element" but they do pass along class details. If a jQueryUI pro shows up later and considers this a bug then I'm glad to have reported it. Until then, be sure to apply your sortable element's float via a class! Can you explain why the inline styling is not included into the placeholder?
The problem is the place holder that jqueryUI inserts does not have a float left style on it. jQueryUI duplicates the element type and the classes on an item you are sorting for the place holder but it would appear it does not duplicate the inline styles.
I have a panel div with a title bar div. In the title bar, I may have several different icons on the right side (to be determined at runtime). I'm trying to construct the CSS so the icons will always stack as far to the right as possible, and also have it that the title text doesn't run over the icons (ie, it'll wrap around to a new line if necessary). I just haven't been able to get it right. For my icons, I have <img class="icon" ...> where
.icon {
display: block;
float: right;
padding-left: 4px;
}
The icons appear fine on their own. But when I try to add the actual title is when things get wonky. I can't seem to get the title to take up the remaining space to the left correctly. The div (or span, which I've tried) will either be completely below or above the icons. Or sometimes, it'll force the icons to stacked vertically on the right, depending on the length of the title.
So in essence, what I'm looking for is one or more small fix-sized elements stacked horizontally to the upper right, and a longer element to take up the remaining space to the left, and this last element may end up taking more space vertically depending on if there's any text wrapping.
Any help would be greatly appreciated!
Adding the following rule to the css of the element you have your text in might help:
white-space: nowrap;
I think I got it working.
Basically, I had the title text within a div (also tried span). But if I didn't put it within anything (ie, it's part of the main title div), everything seems to work.
Why would the top two rows of my site load like this and the bottom row perfect?
Bottom Row:
HTML:
https://gist.github.com/1228291
CSS:
https://gist.github.com/1228301
It really depends on how you want to achieve vertical alignment. For instance, you could try something like:
.product-grid .name { height: 40px; }
But this would give you some whitespace between the title and price when the title is only one line.
It looks to me like it's off because the "cells" in the top row have item names that span two lines (thus pushing your buttons down for those items). With the "cells" on the bottom, the images above appear to make them wide enough that the item names fit, if this wasn't the case, that row would also suffer the same problem. You could try setting the names to have a specific height (as #brianreavis suggested) or perhaps adding non-breaking spaces ( ) instead of regular spaces) to the names would force the name div to push out the side.
On a side note, you don't have to use two ID's in a CSS selector (unless you're doing it for specificity reasons). Since the IDs are unique to the whole document, simply calling #welcome instead of #header #welcome should be sufficient.
Because your product titles have different number of lines.
Maybe this structure can inspire you:
http://jsfiddle.net/JeaffreyGilbert/EW6Ax/
I'm trying to make a button span the width of a column.
e.g. here: http://davidnhutch.com. Notice how the light grey buttons are only as large as the text they contain? I'd like each button to span the width of that column, but can't for the life of me figure out how to do it. I've done quite a bit of looking around but am still kinda new to this.
Any ideas?
You will have to make them block elements to be able to set a width:
.button {
display: block;
width: 100%;
}
Generally, these buttons are so-called "inline element". The browser renderer has very complex algorithms of layouting these elements. It's like Typesetting but with objects on your screen instead.
CSS and HTML together influence how the algorithm works: determining the width and height, color, etc. of objects. Also their position and how text flows, or how long buttons are.
There is a limitation, however. You cannot use anything that's like a variable width for inline elements.
Adding width: 100%; display: block as others suggested makes some buttons perfect: but only when they start at the left or right of the containing box. If it's after a sentence, then it (should) display as:
<---width of container--->
Text
<----------button-------->
However, the button is not after "Text" anymore, but is put below it. This is because it's now a so-called "block element". It is like a full paragraph, instead of elements in a text line.
If this is what you want; fine and problem solved. If this is not what you want, and instead want:
<---width of container--->
Text <-------button------>
This is not possible. CCS4 would be cool if it adds inline-width: 100% or inline-height, and solve a lot of problems. However CSS4 does not exists yet.
Adding width:100% to .button seems to work for the center and right buttons at the bottom of the page.