I can't seem to keep my (dynamic width) table on the same line as a previous element and have it extend to it's parent container without exceeding it and overflowing. I don't want a horizontal scrollbar as the table should just break the lines and/or words up to make it more narrow.
However, it's not doing that.
jsfiddle
In the fiddle, the table overflows and extends beyond it's parent container's width. The parent container is using white-space: nowrap to keep it on the same line as the content next to it.
Why is it not sizing it's width correctly?
If I set a fixed width on the table, it works and sizes the width correctly, but I need the width of the table to be dynamic. Only the outermost containing div is fixed.
Any ideas?
If you add
.listInfoTbl {
[...]
max-width: 142px;
[...]
}
then you'll see everything is working. But you may wonder why is that?
The answer is that you set a certain width for your div.listPropertyDiv therefore it won't grow beyond this and additionally there's some padding to take into the formula:
innerWidth(.listPropertyDiv) = innerWidth(#left) - border(.listPropertyDiv) - padding(.listPropertyDiv) - margin(.listPropertyDiv)
innerWidth(.listPropertyDiv) = 397px
Therefore:
width(table.listInfoTbl) <= innerWidth(.listPropertyDiv) - width(img.listImage)
width(table.listInfoTbl) <= 142px
You should overthink having a fixed width on #left, if your thinking about dynamically changing the content's width because if the parent doesn't shrink it's children can't.
A fixed fiddle
But maybe this is what you're looking for a solution with max-width and percentage so objects can shrink accordingly.
Related
I'm trying to produce a layout where I have a div with a percentage height of the body. In addition, I also want to limit this height using max-height.
Inside the parent, I want to create some columns that have further sub-elements, all of which fit within the height (or max-height) of the parent.
Please see this example: http://jsfiddle.net/k6rfr/2/
The problem is that the child elements (with a height of 50% each), match the height of the parent and not the max-height.
Is there any way to make the child elements match the max-height instead of the height?
Though this is not exactly what you might need, it solves your problem:
http://jsfiddle.net/k6rfr/3/
I placed the max-height directy in the child-elements omiting the second wrapper element. The problem you have here is that you have to define the height in two different places.
I think the error is that a given block "outer" height of 60% may not correspond to what you wrote after 300px. It's not correct. If you remove a specified percentage of the height, the blocks would fall into place. Or enter the correct proportion height and max-height.
I have an element which I want to have width: 50%. But when the right scrollbar is there, that 50% looks different than before, and since certain elements appear and disappear (through animation), the scrollbar also appears and dissapears, dynamially changing my element's width.
See the Live Demo
Is there any way I can set an element's width with a percentage and not have it influenced by the presence or absence of a vertical scrollbar?
You could make width adjustments to accommodate the scroll bar on the click, but if you are going to have a lot going on that may cause this to occur, it would probably be best to just put...
body {overflow-y: scroll;}
...and have the vertical scroll bar always be present. See http://jsfiddle.net/htWrC/1/
You could do something like this
Check if the height of the div is taller than the height of the window.
If so, there is a scroll. Set the width slightly wider to account for the scrollbar.
Code
$('button').click(function(){
$('p').toggle();
var a = $('#box');
if(a.height() > window.innerHeight){
$('#box').css('width', '51.7%');
}
else{
$('#box').css('width','50%');
}
});
Example: http://jsfiddle.net/htWrC/2/
I have a div on my page, and I want to make it expand to a certain size and then stop. Right now I have...
div {height:300px; width:700px; overflow:auto;}
The overflow attribute makes it scroll, but until then, I would like it to expand with the content. I have a text box below this and it looks bad with a text box floating down part of the page. Is there a way to have both of these attributes? All of the hits I found on Google were about making it expand to fit the content. Thanks!
Try using max-height.
This will allow you to specify the maximum height the box can be and once it reaches this height it will scroll as you've specified.
Did you mean you want the div to have its height variable, depending on the size of content? Then just give height: auto instead of giving a fixed height of 300px. height: auto will adjust the height of the div based on the content size. Also define max-height property if you want to limit the maximum height the div can extend to.
I had a table in my application that could grow to ridiculous heights, so I added a wrapper div around it and set overflow-y: auto to get scrollbars. This unfortunately stopped the div from stretching it's width. Now it has scrollbars for both height and width. Setting overflow-x: visible doesn't even affect the result. I need the width to stretch since the content is of variable width.
Fiddle to illustrate the problem: http://jsfiddle.net/SG8T9/3
Thanks for any help
I'm not sure if this is what you mean but take a look here
http://www.brunildo.org/test/Overflowxy2.html
from that page:
According to the spec ... some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’ ....
so overflow-x: visible becomes overflow-x: auto.
maybe you can make the container wide enough to hold the content, so it doesn't have to overflow.
You must not define a width for your div, otherwise it will not overflow that width regardless of the overflow-x setting. Instead use min-width and max-width to set expansion values, then overflow-x:visible; should work fine.
Here's a fiddle: http://jsfiddle.net/shanethehat/SG8T9/
Note that the defined max-width must be at least as large as the width of the content plus the width of the vertical scrollbar.
I am trying to stretch div as soon as some text is loaded.I am able to do that by giving min-height:140 px and height:100% to its parent container. But content in my div is crossing its parent container. How can I limit the inner div so that it will not cross its parent container.
Please help me as I am trying for it from so long.
thanks in advance
HP
Use the overflow attribute in your CSS.
#myDiv {
overflow:auto;
}
Depending on the width you assign, this will get the nested div to display a scrollbar once it's width exceeds that of its parent.
Every single element on a page is a rectangular box. The sizing, positioning, and behavior of these boxes can all be controlled via CSS. By behavior, I mean how the box handles it when the content inside and around it changes. For example, if you don't set the height of a box, the height of that box will grow as large as it needs to be to accommodate the content. But what happens when you do set a specific height or width on a box, and the content inside cannot fit? That is where the CSS overflow property comes in, allowing you to specify how you would like that handled.
overflow:auto;
Reference
w3schools
css tricks