clientWidth "lying", unable to determine actual width of element - javascript

<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.

Related

How to make an element in a page the same visual width as another element exactly?

I'm trying to make it so that element A's width is equal to B's width so that they both visually appear to be the same.
I tried to do:
$('#A').css('max-width', $('#B').css('width'));
But this doesn't work the way I want it to, because B's width is 83%, so A's max width becomes 83%.
This doesn't make A visually the same as it just becomes 83% of its parent element, which makes it appear bigger on the page.
Is there a way to calculate the visual width of B so I can use that as A's max-width, using jQuery?
EDIT: I can't edit the document structure.
via javascript only, offsetWidth should do :
The HTMLElement.offsetWidth read-only property returns the layout width of an element as an integer.
var myW = document.querySelector("#a").offsetWidth;
document.querySelector("#b").style.width=myW+"px";
p {float:left;clear:left;border:solid;margin:1px 1em;box-sizing:border-box;}
<p id="a">some content to give a width</p>
<p id="b">:</p>
You need to be setting width, not max-width.
$('#A').css('width', $('#B').width() )
https://codepen.io/doughballs/pen/zYGrMoK
Max-width restricts how wide an element can be - if it isn't already at the width you set as max width, then max-width won't have any effect. Width tells an element how wide it should be.

How to make an element's height increase with every child added to it

I have a <div> that has children appended to it by a script. These children elements are automatically appended by a PHP script and positioned using position:absolute. I tried to give the parent <div> the style min-height:400px allowing the elements appended to the <div> to increase the parent's height. The only problem is that the height does not increase when I do this. Does anybody know what I can do to fix this?
EDIT: I am not able to use position:relative for positioning my elements. Are there any solutions that allow for position:absolute.
Yes you can use position absolute (yeee♥!)
LIVE DEMO TEST CASE
By simply doing:
$(this).height( this.scrollHeight );
or with pure JS:
this.style.height = this.scrollHeight ;
and adding this to your element's CSS:
overflow:hidden;
overflow-y:auto;
Edit:
The demo tested fine in IE10, Firefox, Chrome, Safari, and Opera.
The key point here is setting the overflow value for the x or y axis (whichever dimensions you need the size of) to auto, rather than the default value of visible. Then the scrollWidth or scrollHeight property can be used on the HTML DOM object to get the full size of the element, including any absolutely-positioned descendants.
Odd as it seems, this is entirely consistent with the fact that setting overflow:hidden for a container clips any absolutely-positioned descendants. Apparently, elements with position:absolute aren't quite as "out of the flow" as we've always been told :)
You should not use position: absolute for this because stuff that is positioned that way will be pulled out of the normal render flow. This results in the parent not noticing that its content s acually very high. Use position: relative for the child div's. This way the parent will grow automatically.

Inline Block element with width auto doesn't update

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/

Relative position of Div in another Div

How do I get the position of a Div relatively to its parent Div? Using .position() and .offset() always gives me its position to the document.
HTML:
<div id="frame">
<div id="inner"></div>
</div>
CSS:
Let's assume frame is centered with margin: auto; and width: 1024px.
inner has left: 300px;, top: 200px and position: relative;.
What I want:
A nice function for getting inners's position data 300 and 200 (e.g. without px when using .css('left') etc.
Is there anything?
If you give the parent a "position" of "relative", then using .position() should be its position inside of the parent.
Using .offset actually should always give you its position based off the document, while using .position gives you its "position" based off its first parent whose "position" is not "static" (default).
Here's examples:
http://jsfiddle.net/Z2VNx/
http://jsfiddle.net/Z2VNx/1/
The first example uses <br /> to add space at the top of the container, while the second example uses padding-top to add space at the top of the container. Both return a value greater than 0 for the child's top position.
The only problem is that position does not account for the child's margins, padding, and borders when calculating its position. This is because all of those are part of the element, so even though you may not visually see them, they wouldn't be included in the element's position calculation. So of course, depending on exactly what part of the element you want to see its position of, you need to add that to the result of .position. Some people want the "position" to return to top-left position of the border, which would mean adding the margin. Something like this:
http://jsfiddle.net/Z2VNx/2/

Setting a paragraphs CSS width through Javascript doesn't work

In Javascript, I have a div with a paragraph inside it. I have made an effect where the div slowly expands in width & reveals the text in the paragraph below.
I set the divs width to zero, then every 10 milliseconds I increase the width by 10px. This works great because I have set the div to have overflow hidden.
My Problem: BUT the text in the paragraph wraps to the current width of the parent div, which means that the text jumps around & reformats as the width increases.
I want to remove/stop this from occuring so I explicity set the paragraphs width to 100px (the width of the div once it has completely expanded) but the problem is when I go check the CSS width of the paragraph element in Firebug, its not set, ie its not listed in the HTML elements inline CSS style?
It makes me think that a paragraph element by default has display block & ignores the width parameter, is that correct?
My ultimate question is: How can I get the paragraph element to be 100px wide? Do I need to change the display type to get the width to work?
This doesn't work:
pEle.style.width = "100px";
// maybe I need to change the display type before I set its width?
If I understand your question correctly you can do this just be explicitly setting a width for the paragraph in your CSS.
By default a paragraph element is block level and will take take any width you specify... Leads me to think somethings going wrong with how you're trying set the width.
Here's a quick fiddle - http://jsfiddle.net/MerlinMason/Sdq65/
Hope that helps!
I truly believe all your problems maybe fixed by adding this css property to your paragraph:
white-space: nowrap;

Categories