I am having trouble with inline-block elements with
width: auto;
and programatically changing the height with javascript.
Here is a jsFiddle that demonstrates it;
http://jsfiddle.net/uJZjB/2/
The idea is that if you resize your window, the javascript sets the elements' height, and the inline-block element's width automatically adjusts to fit the content.
However, the width does not auto update and it remains at the original width rather than resizing to match the width of the content.
If you cause the dom to refresh by hiding and showing the element, or changing the display style e.t.c. the widths are updated!
Please see this modified jsfiddle;
http://jsfiddle.net/uJZjB/5/
This one on chrome, now forces the width:auto; to kick in and work, on Firefox it still appears not to update.
Is there a reason why the widths wont update when set this way?
Regards,
You can set the width of the elements alongside the height to what would be expected with width:auto by taking the width of the children:
$('#myul li').css('width',$('#myul li').children().width() + 2); // compensate for border
JSFiddle: http://jsfiddle.net/uJZjB/4/
Related
I have a div that slides up from the bottom of my pagewhen a button is clicked. i do this using a css transition and changing the css "top" attribute of the div. works fine if the div size never changes. So for example if the div is 400px high, i just move it up 400px and it's now in position. cool.
BUT... what if the div has dynamically generated content and will be a different height every time? how can i figure out how much to move the div up in order to be 100% showing?
so in pseudo code i want something like
function movemydiv() {
var howMuchToMoveIt = ??? (somehow getting the dynamic containers height)
document.getelementbyId("mydiv").style.top = bottomOfScreen - howMuchToMoveIt
any tips on most straightforward way to do this??
You can use either clientHeight or offsetHeight to measure the height of your div.
Both clientHeight and offSetHeight include padding , but offsetHeight will also take into account borders and horizontal scrollbars (if rendered) - see MDN link.
So your js would be something like:
var howMuchToMoveIt = document.getElementById('mydiv').clientHeight;
The var will then contain the height of your element.
Hope this helps
I want to make the div container can automatically resize its div-size (height) along side with the content, instead of going out of the area when the text is more than container area. Can anyone help me out to fix this instead of editing up the css for div-container? When I tried to change the div-size even it fits up the content, but while it is more than the div-area, I have to edit it manually again through CSS code.
Is it possibly to make it automatically? or maybe using JavaScript function?
CSS
div#div_id{
height : auto;
min-height: 100% !important;
}
Set your div height to auto. It will take height automatically as per your contents.
The behaviour you want is just what a div - or other so-called block-level-element - naturally does unless you give it a defined height. So just remove any fixed heights you apply to the container and you're done.
In case you want your div to be of a certain minimum/maximum height, use min-height/max-height instead of height for that.
In the DOM, what is the difference between an element’s offsetHeight and its scrollHeight? An image in explanation would be a great help.
HTMLElement.offsetHeight is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.
HTMLElement.scrollHeight is a measurement of the height of an element's content including content not visible on the screen due to overflow. The value returned by HTMLElement.scrollHeight WILL include the padding-top and padding-bottom, but will NOT include the element borders or the element horizontal scrollbar.
This page and this page are my sources.
The MDN documentation also provides images to demonstrate.
As #Csarsam said, offset height is the border-box height (I'm rewording). Scroll height, is the height of the scrollable content, which is generally composed of multiple elements. But scroll height it also defined on elements which does not scroll, hence does not have a scrollable content, in which case (I’ve checked but I have no reference to back it up) scroll height is its content height, that is, it does not include the margins and borders. But when the element is part of a scrollable content, its margin are taken into account to compute the scroll height of its parent.
Scroll height is defined on both scrollable content and non‑scrollable content, that’s what may confuse.
Update
Here is a reference which confirms what I’ve checked: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
<div style="width: 50px;">
<div id="theElement" style="position: relative; left 25px;">textMuchLongerThan50[</div>
</div>
document.getElementById("theElement").clientWidth always returns 50, which is width of the parent element, while it is obvious the element's content is much wider
(The element itself actually has this width, but I need to know its "natural" width, i.e. width of its content.)
Experiencing this behaviour in Chrome and IE. If anoyne knew how to determine the actual dimensions of a relatively positioned DIV residing in another DIV with pre-set/limited width...?
You are interested in scrollWidth: Example
This is because it's a block element, and it is actually taking its width from its parent. The text inside it is overflowing outside of its container, but isn't affecting the container's actual width.
You can prove this by adding a border style to the inner <div>.
You can cause the element to take its width from the width of the text by changing its display type.
If you set it to display:inline-block;, it will report the correct width.
And if you add a border now, you'll notice that it has changed as well.
I have a page made of elements with width and height set to auto and their dimensions defined with left, right, top and bottom properties. When the page is loaded, all widths and heights are set to their calculated values by the browser, as they should be. However, when I set min-width of the elements to their respective calculated widths, each of those elements is expanded by 2px. The same happens if I set their min-height to be equal to the calculated height. I do it with jQuery, like this
element.css('min-width', element.css('width'));
or
element.css('min-width', element.width());
The effect is exactly the same as it should be, but there should not be the extra 2px if I understand what's happening correctly. Using
element.css('min-width', element.width() - 2);
completely solves the problem but I don't like not understanding why there are the extra 2px. According to specifications, neither width nor min-width nor max-width should include padding, borders or margins.
I've tested in Chrome and FF and both behave the same way.
What browser are you testing and can it be that your document is in quirksmode?
element.css('min-width', element.width()); shouldn't be doing anything in standards mode, because element.width() returns an integer without a CSS unit, and min-width requires a unit in standardsmode.
So put your document in standards mode and then try:
element.css('min-width', element.width() + "px");
If that doesn't help you'll need to show a working example.