I have some table that set width for elements so some columns will have at least some percent of a width of the container.
I want to use flexbox to center this table and set the minimum-width for it.
The goal is to have centered table with some minimum width for which some columns will have the same width (same ratio).
If some cells have longer texts then I don't care if ratio will broke (width of this column will be bigger then other). I just care that it has nice and same width of columns for common case (small amount of text data in cells)
I was able to came up with solution that works on Firefox and Chrome (link).
But for Edge and IE11 the table stretch as if it was not in flex container (try to comment display: flex; on Firefox or Chrome and the result is stretched table like on Edge.
Also it looks that sometime setting columns work (link2). But I don't see the pattern of when it break in Edge/IE11.
Here is more production example that I want to achieve (works in Chrome/Firefox, stretch in Edge/IE11): "production" table example.
Any ideas how to achieve what I want on Edge/IE11? (I put in bold what I want to achieve).
It would be good if I could keep using flexbox container (it might require more changes in my codebase) but I think I will be fine with deleting style=width:p% from <col> if that's necessary.
The min-width rule is apparently being ignored in Edge / IE11.
There's an equivalent command that seems to work.
Instead of:
.inner {
min-width: 800px
}
Use:
.inner {
flex-basis: 800px; /* 1 */
flex-shrink: 0; /* 2 */
}
revised codepen
notes:
flex-basis is a substitute for width, in this case (see: flex-basis vs width)
flex-shrink: 0 ensures flex-basis / width cannot decrease below 800px (hence, both rules together emulate min-width)
Related
I have created the following responsive page here: http://asapuat1.bigredsky.com/mjb_v2.htm?cid=290&jbid=184
For the widths 640px to 1117px i have a 2 by 2 layout with 1 spacer div on the top and bottom rows to ensure correct alignment. Margins on input fields are set to %'s and the input fields themselves have a % width also, with a max-width of 280px.
All this works fine in Firefox, and Chrome, but in IE11 as the width is re-sized by dragging the browser window the vertical alignment changes, and the input fields are no longer vertically aligned correctly.
I suspect the spacer divs may be causing the issue, display on them when required is set to inline-block and when not required set to none.
Strangely when i encounter the issue switching off default css box-sizing: inherit via developer tools fixes, but re-size the window again and the issue still occurs
Any feedback would be appreciated.
Issue was resolved by using margin values in pixels on input fields instead of percentages and having css only for IE 11:
e.g.
#media only screen and (max-width:69.75em) and (min-width:55em) and (-ms-high-contrast:none)
input[type='text'], input#mjb-ico-search,
#topSpacer1, #bottomSpacer1, #topSpacer2, #bottomSpacer2, #middleSpacer1, #middleSpacer2, select {
margin: 20px 44px;
}
}
I'm curious is it possible to use the Grid Layout CSS to create such thing:
************************
* row #1 *
************************
* *
* *
* row #2 *
* *
* *
************************
* row #3 *
************************
So the grid must fill the full body height. And there's also some restrictions for other elements:
The row #1 is aligned to the top of the grid and can change it's
height (but has a max-height value)
The row #3 is aligned to the
bottom and can change it's height (also has a max-height value)
So the row #2 must fill all remaining space in grid.
The grid container should not overflow the html body.
There's an example what I achieved: 3 row grid layout.
I also can make everything with absolute position like this but there's no use because I can automatically calculate the row #2 margins without any imperative js code.
I see that the original question is marked as answered, but as the original included an attempt to use the CSS Grid Layout module to solve the problem, I thought I'd complement the answers with some solutions using newer standards.
Using flexbox
First of all, this kind of layout is pretty easy using flexbox. The flex-grow property allows you to define elements that fill the remaining space in this very way. JSBin example using flexbox here
Note: Not using all prefixes (e.g. to target IE10 etc) in the quick demo, but if you use something like autoprefixer it's kind of trivial. Also, beware of bugs relating to things like vh units in iOS and min-height flexbox columns in IE.
Using grid layout
Note: This demo will only work in Chrome Canary at the time the answer was written!
Grid layout is picking up pace and the spec has stabilized a bit. Chrome Canary has an implementation that is pretty far along, as does the WebKit nightly builds.
Grid layout has the same type of flexible sizing as flexbox, and moves the layout mechanism to the container element instead. JSBin demo – remember, Chrome Canary only at the time of writing. (It would work in WebKit nightlies as well with the right prefixes.)
Basically, the whole thing boils down to these lines:
body {
margin: 0;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
height: 100vh;
}
The above means "Use the body element as a grid container, place items in it in source order, in a single column that is 100% wide, and size the first and third row according to content, and the middle one takes up all the space that is left". We don't need to specifically place the items inside the grid: they will auto-place themselves – we could change order etc if we wanted though. Grid Layout can do many more advanced things!
Most browser vendors are working on finishing their first grid implementations, so it's fun & worthwhile to start playing with it. :-)
Until then, the flexbox version gets you pretty good browser support.
You can do this with display:table property See Spec and Compatibility
Working Demo
CSS
#container {
display:table;
}
#head, #content, #foot {
display:table-row;
}
Edit:
Updated Fiddle
Added div inside table-row to prevent overflow
what about setting percentages heights like this:
.head{
height:10%;
max-height: /*max height allowed*/;
}
.content{
height:80%;
max-height: /*max height allowed*/;
}
.foot{
height:10%;
max-height: /*max height allowed*/;
}
I'm trying to style a table according to the following requirements and getting nowhere:
the width of some columns must shrink to fit contents.
the width on other columns must divide up remaining available width among themselves.
table width must fill, but not exceed, parent width.
I came up with one approach ... set the shrinking columns width to 1px. That seemed to do the trick until the content of the expanding columns grows and ends up increasing the width of the table to exceed the width of it's parent, which violates the last requirement listed.
Any ideas? I'm broke.
I'm using Compass/Sass hyphenation, which helps with the last requirement (table does not exceed parent width). Works in Chrome perfectly. In Firefox, the table width is just a little too far. This is what my styles look like:
td.id
td.actions {
text-align: right;
/* trick table cells into fitting their content with nowrap and zero width */
white-space: nowrap;
width: 1px;
}
td {
#include hyphenation;
}
Sounds like you are using pixel widths instead of percentages. If you are, try "60%" or another appropriate value. Can you post your code?
td.actions {
table-layout:auto;
}
I have a DIV that need a minimum width. I can't use the CSS min-width as its not cross-browser. I've created a inner div with a set width. When the browser is smaller than this inner div I get a scroll bar as expected.
The issue is that the outter div keeps shrinking smaller than the inner div.
See here for an example.
I would expect the blue to be the same width as the yellow.
Whats wrong with my CSS?
min-width is supported by all browsers except IE6. If you don't need IE6 support, you can use min-width like normal.
If you do need IE6 support, IE6 happens to treat width (and height) the same way that other browsers treat min-width (and min-height). You can use a hack to fake it:
#outer {
width: auto !important;
width: 1000px;
min-width: 1000px;
}
IE6 will apply the second width property (which it will treat as min-width) because it incorrectly ignores the !important on the first one. Other browsers will set the width to auto and the min-width to 1000px.
Hopefully I've understood your question correctly. Here's a modification of your original code with this update: http://jsfiddle.net/6e6yX/6/. Does this do what you're looking for?
If you add:
float: left;
To both of them, they'll behave as you're expecting.
http://jsfiddle.net/eVWKu/
Summary
What's the best way to ensure a table cell cannot be less than a certain minimum width.
Example
I want to ensure that all cells in a table are at least 100px wide regards of the width of the tables container. If there is more available space the table cells should fill that space.
Browser compatibility
I possible I would like to find a solution that works in
IE 6-8
FF 2-3
Safari
In order of preference.
This CSS should suffice:
td { min-width: 100px; }
However, it's not always obeyed correctly (the min-width attribute) by all browsers (for example, IE6 dislikes it a great deal).
Edit: As for an IE6 (and before) solution, there isn't one that works reliably under all circumstances, as far as I know. Using the nowrap HTML attribute doesn't really achieve the desired result, as that just prevents line-breaks in the cell, rather than specifying a minimum width.
However, if nowrap is used in conjunction with a regular cell width property (such as using width: 100px), the 100px will act like a minimum width and the cell will still expand with the text (due to the nowrap). This is a less-than-ideal solution, which cannot be fully applied using CSS and, as such, would be tedious to implement if you have many tables you wish to apply this to. (Of course, this entire alternative solution falls down if you want to have dynamic line-breaks in your cells, anyway).
Another hack is the old 1x1 transparent pixel trick. Insert an 1x1 transparent gif image and set its width in the image tag to the width you want. This will force the cell to be at least as wide as the image.
I know this is an old question but i thought I'd share something that wasn't mentioned (Although pretty simple in concept..) you can just put a <div> inside the table (in one of the <td>'s or something) and set the <div> to min-width. the table will stop at the <div>'s width. Just thought I'd throw that out there in case somebody comes across this on google. Also, I'm not so sure about how min-width is handled in I.E6. but that has already been covered in another answer.
I had some success with:
min-width: 193px;
width:auto !important;
_width: 193px; /* IE6 hack */
Based on a combination of Vatos' response and a min-height article here: http://www.dustindiaz.com/min-height-fast-hack/
what about this css property
min-width: 100px
but it doesn't really work in IE6 if not mistaken
if you don't want to do it in the css way, I suppose you can add this attribute
nowrap="nowrap"
in your table data tag
This is a cross-browser way for setting minimum width and/or mimimum height:
{
width (or height): auto !important;
width (or height): 200px;
min-width (or min-height): 200px;
}
IE 6 doesn't understand !important
IE 6 sees width/height:200px (overwriting auto)
Other browsers understand the min- and the !important
I am not 100% familiar with the behaviour of widths in TD elements, but this all works nicely on eg DIV tags
BTW:
Based on a combination of Vatos' response and a min-height article here: http://www.dustindiaz.com/min-height-fast-hack/
This is not working because of the order of the first 2 lines, they need to be in the right order (think about the above) ;)
IE6 handles width as min-width:
td {
min-width: 100px;
_width: 100px;/* IE6 hack */
}
If you want IE6 to handle width like normal browsers, give it an overflow:visible; (not the case here)