Develop Reference

How to detect child div's height exceeding parent div's height

I have a div A, which contains div B, which contains div C, which contains div D, where div A has a default height of 40px. It's something like below.
<div id='A' style="height: 40px">
<div id='B'>
<div id='C'>
<div id='D'></div>
</div>
</div>
</div>
The thing is, div C is implemented in a way that it can dynamically change height. Therefore, it could exceed the default height of div A (40px) and cause some cosmetic issue.
What I want to achieve is to keep the height of div A as 40px as long as the height of any its child div doesn't exceed 40px. However, if the height of any its child div exceeds 40px, I want height of the child div to override div A's height. For example, when div C changes height to 80px, I want div A's height to be 80px.
I am wondering if I need to write a method to dynamically calculate the height of each child div and do something like getElementById('A').style.height = null if the child height returned is greater than 40px.
Is there a better or simpler way to do that?

Try using 'min-height'.
min-height: 40px;

As per the my point you no need to check each child element height.
If you check B child element height is more than enough, because that is the parent for child element C and D
According to that, following JS code will provide you the solution
// get parent div #A
var parentElement = document.getElementById('A');
// parent div #A initialHeight
var parentDivOffsetHeight = 40; // no need to mentionion px
// get child div #B offest height
var childDivOffsetHeight = document.getElementById('B').offsetHeight;
// check if child div height is greater than parent div or not
if(childDivOffsetHeight > parentDivOffsetHeight){
//set child div height to parent div
parentElement.style.height = childDivOffsetHeight+'px';
}
Related JS Fiddle: https://jsfiddle.net/katheer_mizal/3ouypevd/18/
To check element hights you can use following ways
clientHeight includes padding.
var clientHeight = document.getElementById('B').clientHeight;
offsetHeight includes padding, scrollBar and borders.
var offsetHeight = document.getElementById('B').offsetHeight;
.style.height equalent to $('#content').css('height'.
var offsetHeight = document.getElementById('B').style.height;

get witdh of div element (parent overflow hidden)

Get the with of a div which is partly hidden by overflow hidden.
I have a div container which contains 3 divs
the div container is set to flex en only the last div is growing in size so it fills up the space in the container.
The container has the property overflow hidden.
The last div contains dynamic data that wil fill up the div and will be partly hidden. I need to know what the size(width) of the div is within the container.
I tried several methods like offsetwith, clientwidth & getboundingclientrect().width.
All return the width of the div with the hidden part.
I need the width whitout the hidden part.
I created an example on codepen.
https://codepen.io/Babulaas/pen/GObgxb
(I use (angular2) typescript in my project but didnt know how to use this in codepen

you have to get all div elements inside the div with hidden css parameter and just adding up all width of them
Using jQuery
var totalWidth = 0
//this get all div element inside component
$('.component > div').each(function(){
totalWidth += $(this).width()
})
alert('total width of elements inside container "component": ' + totalWidth)
your codepen edited
https://codepen.io/anon/pen/OzJjBo
observation: this work because the inner elements of "component" are inline, you cant get the width of the "component" element adding the hidden part because the hidden part is not part of the width of "component" is part of the overflowed element. the offset method or outerWidth as is called in jQuery get you the width of the element adding the padding, margin and border, not the hidden part because is not part of the element.

clientWidth of element is 0 unless I set it with css

How can I get an elements width without setting it's width property in CSS? If I set the width it works, but if I don't the width is just 0 even though I can see it's not after inspecting with debugger.
let width = this.htmlElement.clientWidth;
HTML
<label [model]="foobar">0</label>

Use offsetWidth instead
let width = this.htmlElement.offsetWidth;
The first line in the docs for clientWidth is
The Element.clientWidth property is zero for elements with no CSS or
inline layout boxes, otherwise it's the inner width of an element in
pixels
The offsetWidth on the other hand is a read-only property that returns the layout width of an element, regardless of wether or not the element is styled with a given width.
var el = document.getElementById('foobar');
console.log('clientWidth : '+ el.clientWidth );
console.log('offsetWidth : '+ el.offsetWidth );
<label id="foobar">This has width ..................</label>

How to set child width equal to parent width minus x px by js or jquery?

I try to set width of child element according to parent width - x px.
what's wrong in my code :
$("#formTable table:first-child").css("width",$("#Content").css("width")-5)
where formTable is child of Content.

Use this code :
$("#formTable table:first-child").css("width",$("#Content").width()-5)

jquery center div at point

I am creating a div using jquery and I am trying to center it at a specific point. The text in the div is dynamic, and it's not centered in a particular parent html, but rather I want to center it on just a specific point.
So basically I have
var centerX = 100; // dynamically computer in my code
$('<div/>').text('sometext').css({'left': (centerPointX - $('#mydiv').width() / 2) + 'px'});
But the width of mydiv is not known until it is rendered, so I'm not sure how to go about centering at the x point. Do I need an outer container in which to center in relative to?

Firstly $('#mydiv') only gets the element if it is available in the DOM.
So you would first be required to inject the element into the DOM and then access the width property . Otherwise it will be 0 when you try to access the width property of the element.