I want to make a container automatically expand. To do so I want to use max-height property. This is my html structure
<div class='palm-row first' style="max-height:200px">
<div class="palm-row-wrapper">
<div class="textfield-group" x-mojo-focus-highlight="true"
style="max-height:200px">
<div class="title">
<div class="truncating-text" id="nameField" class="recipient-picker"
x-mojo-element="TextField" style="max-height:200px"></div>
</div>
</div>
</div>
</div>
.recipient-picker{
overflow:hidden;
margin-right:0px;
max-width:300px;
padding-right: 4px;
}
I want the textfield to expand in height. However it does not work settings max-height. The container do not change height. However when I set min-height, the correct height is applied.
Any ideas how to achieve this? Any other ideas?
max-height sets the maximum height of an element if it tries to grow past that size. min-height sets the minimum height of an element if it tries to grow below that size. In your case, the default textfield height is less than your specified min-height, so the browser will increase it's height so that the min-height constraint is satisfied.
So what's the problem with just using min-height if it works?
Related
Here is html:
<div class="container>
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
I want container to have the size of the content div. BUT I want the widths of header and footer be constrained by the size of the content/container.
display:inline-block alone does not work because container adapts its size to the widest child.
The width of the content is unknown so explicit width settings can not be set.
Here is the image explaining what behavior I need.
In other words: footer and header follow the width of container.
Size of the content defines container width.
You can use some Javascript to do that. Like so:
var size = $('.content').width(); // To get the width of the content element
$('.container').width(size); // To set the width of the container to the width of the content, overriding any CSS rules
It's a bit rough in terms of code, but it will get you started.
bit confused about heights of nested containers in html/css.
for ex. in this case -http://jsfiddle.net/Y59a7/ if inner2 and inner1 have explicit
height 100%, then height:100% appears to work orelse it looks like the one in fiddle.
<div class="container">
<div class="inner1">
<div class="inner2">
<div class="inner3">
asdlfalsjdflk
asldkflaflkjkalf
</div>
</div>
</div>
</div>
Here's how to think of it:
inner3 will have a height that's equal to 100% of the height of it's containing div (inner2).
But how does inner2 calculate its height? As, in your example, inner2 does not have an explicit height set, its height will be the minimum height required to display its content. (Taking padding and margins into account).
So inner3 will have the height of inner2, and the height of inner2 will be the natural height of inner3.
try this demo
{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
If you want inner3 takes up 100% of height, then all parents' height need to be set to 100%, even body and html
I am designing a fluid layout (no fixed px, all in %)
I have the HTML as;
<div class="parent">
<div class="fl child"><a class="prev"></a></div>
</div>
If I check in Firebug, the height of parent is calculated as 400px..But if I give child as height:100%, it does not take the entire height..
How do I fix this?
Unfortunately heights don't work so well with percentages, you can take a look at the min-height css property but you may need to employ some javascript.
I have a containing div that is constrained in its height and width. It has 2 child elements.
The first child can be of variable height (as the text within it can wrap, and this is desired behavior).
The second child is a div wrapping a table. The div is set to overflow-y: scroll, so it is meant to fill the remaining height of its container, and provide scrolling for the rest of its inner table when it doesn't completely fit.
Here's a simple view of the structure:
<div id="container" style="height:300px; width:200px">
<div id="headerArea">
...
</div>
<div id="scrollingTable" style="overflow-y:scroll">
<table>
...
</table>
</div>
</div>
Despite my tinkering, I can never get the second child, the scrollingTable div, to constrain itself to the limits provided by the container. Using height:100% doesn't FILL the remaining container height, but sets the height to the container's exact height (300px), which is too much because the headerArea takes up space too.
If the height of the headerArea was fixed, I could specify the scrollingTable's size as 300 - heightOfHeaderArea, but as mentioned above the headerArea's height is NOT fixed.
I'm likely going to have to use JQuery to resize the scrollingTable to the specified height, but I am curious if there is a pure css solution.
Any suggestions, or is this impossible without fixing the headerArea's height?
You can't do this with css alone. You have to give the scrolling div a height for it to be able to scroll (100% or fixed value).
http://jsfiddle.net/tUrTu/
This can be achieved though with javascript :
http://jsfiddle.net/tUrTu/2/
Hope it helps.
If you set the scrollTable to 100% it will inherit the 300px from the container div and go outside of the container div regardless of the fixed height you set to headerArea
You shall use Javascript to dynamically generate the height, but beware the sequence of the code must be HTML -> Javascript -> CSS.
code:
<div id="container" style="height:300px; width:200px">
<div id="headerArea">
...
</div>
<div id="scrollingTable">
<table>
...
</table>
</div>
</div>
<script language="javascript">
var headerh = document.getElementById('headerArea').offsetHeight;
document.getElementById('scrollingTable').style.height = (300 - headerh) + 'px';
</script>
<style type="text/css">
#container {
height: 300px;
}
#headerArea {
}
#scrollingTable {a
overflow-y: scroll;
}
</style>
I found if I specify div with only width CSS attribute, the div will not occupy the width I claimed, see:
<div style="width: 300px;">
</div>
It will never occupy 300px space.
Is it possible that I want an empty DIV occupies 300px width?
You either need to add content or set a height. Otherwise an empty div will not appear because its height is determined by its contents.
See Example
You need to specify something or a space to achieve that:
<div style="width:300px; border:1px solid black;"> </div>
The border was given to show width but you can remove it.
height must be specified in order to make it visible.