I'm migrating my Bootstrap themes from v2.3.2 to v3.0.0 and one thing I noticed is that a lot of dimensions are calculated differently, due to the following styles in bootstrap.css.
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Can anyone explain why Bootstrap switches the box-sizing of all elements to border-box? I suspect it has to do with the new grid system being percent-based, but the selector above does not only apply to the grid elements obviously.
Seems a bit radical imho :-)
Anyone care to give some insight?
The release notes tell you: (http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/)
Better box model by default. Everything in Bootstrap gets box-sizing: border-box, making for easier sizing options and an enhanced grid system.
Personally I think most benefits go to the grid system. In Twitter's Bootstrap all grids are fluid. Columns are defined as percentage of the total width. But the gutter have a fixed width in pixels. By default a padding of 15px on both side of the column. The combination of width in pixels and percentage could be complex. With border-box this calculating is easy because the border-box value (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box. (http://css-tricks.com/box-sizing/)
Also read: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
Related
I'm migrating my Bootstrap themes from v2.3.2 to v3.0.0 and one thing I noticed is that a lot of dimensions are calculated differently, due to the following styles in bootstrap.css.
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Can anyone explain why Bootstrap switches the box-sizing of all elements to border-box? I suspect it has to do with the new grid system being percent-based, but the selector above does not only apply to the grid elements obviously.
Seems a bit radical imho :-)
Anyone care to give some insight?
The release notes tell you: (http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/)
Better box model by default. Everything in Bootstrap gets box-sizing: border-box, making for easier sizing options and an enhanced grid system.
Personally I think most benefits go to the grid system. In Twitter's Bootstrap all grids are fluid. Columns are defined as percentage of the total width. But the gutter have a fixed width in pixels. By default a padding of 15px on both side of the column. The combination of width in pixels and percentage could be complex. With border-box this calculating is easy because the border-box value (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box. (http://css-tricks.com/box-sizing/)
Also read: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
I want to use custom css with twitter bootstrap for features like popover and modal dialogs. But because of the bootstrap css the site has an improper alignment. I tried using a reset css but it didnt help. Is there any way to fix it other than inspecting incorrect elements for the style description which is causing the problem.
You can just add css rules to the classes after the bootstrap css rules.
Be aware that bootstrap uses box-sizing: border-box; for all elements, which might cause your improper alignment.
Under the above border-box mode, width and height includes both border and padding, which are usually don't, be aware of that, or use box-sizing: content-box; for your own elements.
So if the reset stylesheet set the box-sizing to content-box, the origin bootstrap alignment will be destroyed.
I'm mostly a C++ programmer who's getting involved in HTML5 and Javascript. I'm having some trouble with my layouts and am asking for advice and some criticism of how I'm doing it.
A reoccurring problem I'm having is unwanted scroll bars appearing when I add margin or padding. This is a mockup of a layout I'm working on for a Javascript application.
http://jsfiddle.net/Qy4Xz/
Each box uses class 'text-line' to produce a line that my controls go in. I wanted to add a margin so the costs box items would have some space around them. When I add a 5px margin to text-line, my geometry box has scroll bars in each left/right panel.
http://jsfiddle.net/LD5TS/
Here is where I'm adding the margins:
.text-line {
font-size: 1.6em;
box-sizing: border-box;
width: 100%;
margin: 0px; /* no margins */
}
This is probably a newbie mistake, but what am I doing wrong and how can I fix this? I run into this problem a lot, I've read a lot of material, but I'm missing something. If I'm making any other major layout mistakes can you point them out? Thank you!
Since the .text-line elements have width:100%; they will naturally overflow the container if they have margin too, since margin does by default not get included in the width value.
What you could do if you want both space around the content and have the element fill its parent in width, is removing the margin:5px and adding this code to .text-line:
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:5px;
What the code above does is including the padding in the width value, thus you can add padding and the element will still only get the width value you declared.
try to add padding instead of margin and it will work fine. To understand exactly what's happening, please take a look at css box model
I'm trying to accomplish something specific around platform constraints I'm under.
I created a somewhat self-explanatory jsfiddle of the problem at http://jsfiddle.net/MrV5M/4/
The specific problem:
On Chrome, the right border of the input box is cut off.
On Safari, the width of the content class cell exceeds the container so it spills over the border.
On IE9, the label doesn't float to the left of the content div
The main reason I care about Safari is because I'm working on a JQuery Mobile/PhoneGap app which is also a web app. I'm only supporting modern browsers, but this is driving me nuts. Normally I'd just use a table for the container, but the text-overflow: ellipsis styles on the content div don't work when inside a table. (Basically, I'm trying to keep the content to a single line and have ellipsis without enforcing a fixed width or calculating a width with Javascript)
Anyone have the l33t CSS skills to make this work? I sure don't... :)
Just add this CSS to your Stylesheet, and get peace of mind on your issue :D
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
You may not like this answer. I made some adjustments in the css which fixes Chrome and IE9 issues. Take a look,
http://jsfiddle.net/MrV5M/11/
There are many ways to do what you are trying to do, but if you insist on using 'flex' stuff which is largely un-supported (even in the majors see here), you'll need to add the vendor prefixes to flex.
e.g... -webkit-flex, -moz-flex
Also, I don't think you need to be setting widths on elements that have the flex property.. not positive though.
So your browser issues:
-IE doesn't support flex at all so you're label won't float unless you use a float.
-The reason your input/content is spilling over the container and getting cut off is not really anything to do with flex.. but the way css works.. setting an element to 100% width means setting it to the width of its parent. But by default, css doesn't count the padding/border-width as part of that width. So you end up getting 100% width plus the L/R padding and border. But, since you are only supporting modern browsers.. box-sizing:border-box; to the rescue. Google it for details, but putting it on your input element should do the trick.
I'm noticing discrepancies between browsers in how the width of a TH tag is interpreted, specifically whether or not padding is included in the width calculation.
I am building a reusable library for quickly generating and styling tables (for tabular data, of course). This means that I have full control over the code I generate, but that I need to actually solve the problem versus finding a hack for a particular instance.
Simplest Description of the Problem
A TH in IE9 and FF is sized based on its padding + width (as expected). Chrome and Safari include the padding in the width, leading to undesirable results.
For example, if the cell is set to 16px wide + 4px of padding, IE9 correctly displays the cell as 20px wide. Chrome displays it as 16px wide.
Here is a JS Fiddle showing the differences: http://jsfiddle.net/CZnau/
You can see how the last cell is sized differently between browsers.
Notes
I am aware of box-sizing and even though the default is to not include the padding in width calculation of a cell, setting box-sizing: content-box explicitly does not fix the problem.
The fiddle shows a fixed layout table. I wish to use table-layout: fixed to handle display correctly in other scenarios. Specifically, my actual implementation uses text-overflow, wrapping management, and variable width layouts. In my testing using a fixed layout is the only reliable way to make all my requirements play together nicely. Plus, fixed layout tables potentially render more quickly.
I have tried setting the width explicitly on each TD, but this does not fix the issue (perhaps it conflicts with the fixed layout table?)
In case you want more details around why I need a fixed layout table, try this fiddle with and without table-layout: fixed and note the differences. With a fixed layout, the table is correctly sized to 100% and truncates text elegantly, even with a variable width cell.
http://jsfiddle.net/6GPmY/
Firefox doesn't support box-sizing: content-box; yet, not even in their Aurora Version.
Until then you can use -moz-box-sizing:
th, td {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 8px;
}
jsFiddle Demo