Does anyone know I can make min-height work with the latest browsers? I am using CSS tables and it seems to ignore min-height.
<div style="background-color: red; display: table; min-height: 100px;">
abc
</div>
Fiddle
When using tables, height essentially is min-height, as tables always stretch. Just get rid of the "min-" and it will work as you expect.
Use height: 1px; on the table or any value. Basically you need to give table some height to make it work with min-height. Having only min-height won't work on tables on firefox.
Solution for Firefox
Add height to unlock setting the min-height
div {
display: table;
width: 100%;
height: 0;
min-height: 100px;
}
The number in height can be any other real value less or equal to min-height for making it work as expected.
Whenever you are using display:table; or any deeper property like display:table-cell; consider using height instead of min-height. As in tables height = min-height considering the auto-span feature in them.
Related
I have a problem with flexlayout and overflow. Here you can see my Problem:
The icons are not 100% scrollable. I have absolutely no clue how to fix this. In theory, I think everything should be correct. I use Angular, Angular FlexLayout, Custom CSS. The Icons are grouped using flexlayout="column" and flexlayoutalign="space-around center" and everything is encapsulated with a div flexlayout="row", flexlayoutalign="space-around center". This row is now not fully recognized by my overflow CSS variable using custom CSS. Here are my classes. First, I set a fixed boundary for the popup (one hierarchy-level over the mat-card), and the latter is added to the mat-content section of the mat-card.
CSS for the Popup:
.max-height:{
max-height: 500px;
}
CSS for mat-content:
:host{
overflow-y: auto;
display: flex;
flex-direction: column;
height: 100%;
}
mat-dialog-content{
max-height: unset !important;
}
.example-card{
height: inherit;
}
.mat-card-content{
max-height: 300px;
overflow-y: auto;
}
.min-width-icons{
min-width: 100%;
}
Any ideas on how to fix this error?
Edit:// here are inspection figures:
Edit:// if I set a fixed height on the icons, e.g., 50px, the icons move out the upper boundary even more:
Edit://
issue persists even if i use png/jpg:
Edit://
Maybe it has something to do that the description class is adding word-break: break-all; But, either I do not how to counter that.
Edit://
Ugh this is some nasty CSS sh... got it working! It has something to do with the overflow-wrap/word-break of the underlying description:
As far as I noticed is that everything got better after i added width/min-widt of 100%. After that, i tried to set the height value to 100% (not worked). But, as far as i add a height in px (every value from 1px to 2000px) everything works as expect, which makes absolutely no sense to me, maybe some CSS mastermind can me pin point the reason. Field height is marked in black and green is the overflow word-break.
But, for now the problem seems to be solved with this css:
.text-area{
word-break: break-all;
min-width: 100%;
width: 100%;
height: 100px;
}
I'm following this article https://css-tricks.com/almanac/properties/w/width/ to try to understand how this rules work.
I have this example:
*{margin:0; padding:0}
.box{
background: lightgreen;
margin: 0 auto;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
<div class="box">
<img src="https://tyrannyoftradition.files.wordpress.com/2012/05/cutest-kitten-hat-ever-13727-1238540322-17.jpg" alt="" />
<figure>Yes, put some text here that is wider than the image above to try some new rules</figure>
</div>
The article says that fit-content can be used to center a div of unknown width with margin: x auto;
But if you change fit-content for max-content in this example, this is working anyway and they seem to behave always in the same way.
Does anyone know what is the difference between this two rules and in which cases should I use one or the other?
fit-content uses max-content, unless available < max-content, then it uses available. Unless available < min-content, then it uses min-content.
In a few words width: fit-content; means :
"Use the space you can (available) but never less than your min-content and never more than your max-content"
As you can see it here https://developer.mozilla.org/en-US/docs/Web/CSS/width the max-width simply sets the size based on the space its children needs regardless if it's available or not, while the fit-width checks if the space the children needs using max-width is available and if not, it uses the min-width instead.
For further reading about the difference between max-width and min-width see http://dev.w3.org/csswg/css-sizing/#block-intrinsic.
the one scenario in which max-content and fit-content don't behave the same way is when you set a 'max-width' property on the element, and the viewport size is narrower than the max-width value. in this case the 'max-content' value will result in a layout in which the text will be cut arbitrarily (and the only way to see the entire text is to scroll horizontally). using the 'fit-content' value, on the other hand, will ignore the max-width property and adjust the text nicely inside the viewport.
It seems these two codes are the same:
.fit-content {
width: fit-content;
}
// is same as
.fit-content {
width: max-content;
max-width: 100%;
min-width: min-content;
}
In my experience I either go with width: fit-content or width: max-content; max-width: 100%. The latter is for cases when the element shouldn't have a min-width.
I need to dynamically build a table to hold some data.
I've followed the usual approach of using divs with display: table, display: table-row and display: table-cell:
.tab {
display: table;
height:100%;
width: 200px;
}
.row {
height: 100%;
display: table-row;
}
.elem {
border: 1px solid black;
vertical-align: top;
display: table-cell;
height:100%;
background: blue;
}
.content {
height: 100%;
background: greenyellow;
}
<div class="tab">
<div class="row">
<div class="elem">
<div class="content">
Content
</div>
</div>
<div class="elem">
<div class="content">
Longer content that will need to wrap around eventually you know and don't you hate it when things don't end as you expect them octopus
</div>
</div>
</div>
</div>
Or view on Jsfiddle.
In most browsers I get the expected output:
However, in IE8 (and possibly later versions, I haven't tested later versions), I get the following:
The height: 100% set on the div surrounding "Content" is ignored.
According to CanIUse, IE8 should offer full support for the related display properties.
I've looked through a number of similar questions on SO without finding a working solution: most solutions either rely on Javascript (which I'm looking to avoid), use a fixed height (ibid previous) or don't work on IE8.
Unfortunately, the effect of percentage values for height on display: table-row and display: table-cell elements is undefined according to the spec:
CSS 2.1 does not define how the height of table cells and table rows is calculated when their height is specified using percentage values.
So while a browser may claim to offer full support for table layout, certain aspects such as percentage heights may not be consistently implemented across all browsers because there is no correct behavior. You could try raising an issue on Microsoft Connect in hopes that they will change the behavior to be interoperable, but in the meantime you will need to find a different workaround (and even then you can't guarantee the behavior will remain interoperable, even in other browsers).
To make matters worse, I just tested and this affects all versions of IE up to and including 11, which means an IE-specific hack will fall short here. If you need to use a CSS table layout, as evidenced by the fact that you need to support IE8, then a pure CSS workaround is probably not feasible.
For Internet Explorer 8-10 table-cells with height: 100%; have to be wrapped by table-row with height: 100%;.
Html for IE should be like:
table > table-row > table-cell
While other browsers will work properly with
table > table-row
or
table > table-cell
[edit] I reviewed the question again, and noticed You want to set 100% height not to the table-cells, but on the content inside it.
solution 1: So for Internet Explorer content-height is related to closest element with height set in absolute units, such as pixels, em's, if you want to use % height, you may also need to set 100% height on all parent elements, this will be html and body.
working example
solution 2: Simply add
.content {
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.elem {
overflow: hidden;
}
You don't need to set height on Any of the parent elements in this case.
working example.
Hope this helps.
http://jsfiddle.net/XW9Se/
I've set width: 200px; on the left <div> but if I view it with the browser inspector tool it appears that the real width is random or something. It keeps changing depending on the window size.
Why doesn't the width take effect?
EDIT: If I remove width: 100% the width stays fixed. But I need that so the #main div takes the remaining width :( Is there any way to have the sidebar # fixed width and the other <div> fill the rest of the container width? width: auto; on #main doesn't work..
The answer from Adrift is perfect; but a change to make it more flex would be
#left{
flex-basis: 200px;
flex-grow: 0;
flex-shrink: 0;
}
And remove the width property entirely.
It would be the flex way to say that the element will have an invariable width of 200px
My preferred way of dealing with this situation is to add:
flex-shrink: 0;
This way you may continue using width in your Flex container and you've given it specific information about how you wish this flex item to behave.
Another option, depending on the requirement is to use min-width, which is respected when using flex.
Give the #left div a min-width of 200px, should do the job.
Remove the width on .container > div and use flex: auto; on #main: fiddle
#main {
flex: auto;
background: lightblue;
-webkit-order: 2;
order: 2;
}
Also (if nothing from above works)
Check your min-width and max-width.
It fixed the same problem for me by increasing their range.
add display: contents on the element or div you want to maintain the width.
Solved this with a flex not respecting min-width when there was not enough content to fill that width.
Added the CSS rule box-sizing: initial; on the same flex element that had the non-working min-width declaration.
Add display:inline-block; in left class
When using CSS overflow: hidden , I've often found that the last line of text gets partially cut-off. Is there a way to prevent this so that any partial lines do not show-up. Almost like a vertical word-wrap.
You can use wrapper div and multi-column css:
.wrapper {
-webkit-column-width: 150px; //You can't use 100%
column-width: 150px;
height: 100%;
}
Solution example: http://jsfiddle.net/4Fpq2/9/
Update 2017-09-21
In Firefox this solution still works but broken in Chrome. Recently Chrome started break column by small parts, also stop break content if you set height.
In this http://jsfiddle.net/4Fpq2/446/ example, I change hight to max-height and show strange Chrome behavior.
If you have ideas please write in comments.
Update 2019-03-25
Basically, it's work even for Chrome but you should have at least two lines. For a block with some amount of visible text this approach still should work fine.
http://jsfiddle.net/ncmo9yge/
Once you understand how the column-width work, #stalkerg's answer makes a lot of sense.
The column-width splits the content in columns, so the last line of the text would not fit, it will be moved to the next column. Now the trick is to make the column-width as wide as the container. The container has overflow: hidden, so the 2nd column won't show.
.box {
width: 200px;
}
.container {
-webkit-column-width: 200vw;
-moz-column-width: 200vw;
column-width: 200vw;
height: 100%;
}
This solution worked for me: https://stackoverflow.com/a/17413577/2540428
Essentially create a wrapper div with the appropriate padding and put the content in the main div where you edit its height and hide the overflow. See link for more details.
Rob is correct. I was making a div that had a max-height of 11em and the last line of overflow text was only half there. white-space: nowrap just eliminates that last line all together.
I tried
white-space: nowrap;
and Gaby is also correct that this causes problems too.
The best I came up with was to fiddle with the line-height and div height until the fewest lines were cut-off
that worked for me:
.wrapper_container{
width: 300px;
height: 200px;
overflow: hidden;
}
.wrapper{
-webkit-column-width: 300px;
column-width: 300px;
height: 100%;
}
There are two css3 property exist. 1) word-break & 2) word-arap
Don't forget these are new property that is css3. So that older browsers do not support such property.
.class-name {word-break: break-all;}
.class-name {word-wrap: break-word;}
just add column-width attribute and set width of the container, it will work.
just use the border instead of padding.