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;
Related
I am currently struggling with a div container with multiple children elements, some of which are images with absolute px width values.
The issue is resizing the parent and ensuring the content isn't cut off.
My current solution is:
function customResize(element){
let parent = element.parentNode;
element.style.width = parent.style.width;
element.style.height = parent.style.height;
}
$(window).resize(function (){
let elem = document.getElementById('contentContainerId');
customResize(elem);
});
This uses a parent element of the container div (that automatically resizes correctly) as a guide, taking its width and height values and assigning them to the container div. This works for resizing, but for some reason, it's not fully correct.
Any advice would be greatly appreciated!
After some feedback, I'm noticing the container div is resizing correctly and staying to the width of its parent. However, its contents, despite shrinking, still gets cut far too much. See the example image below - green is the desired width, red is the problem area.
Example Image
Or perhaps more clear with this
Example Image 2
Check out this w3schools page: https://www.w3schools.com/jsref/prop_style_overflow.asp
If you replace "hidden" with "scroll" and run it, you'll see how you can make your elements fixed size and scrollable.
As far as adapting to your situation, you may want to set the css width from the width before adding your images. You can do this like
var myDiv = ...;
let wid = myDiv.getBoundingClientRect().width;
myDiv.style.width = wid + "px";
And remember to add css style overflow-x : "scroll"
https://codepen.io/umbriel/pen/MxazRE
I have a slideshow that the user changes which slide to look at by swiping their mouse cursor horizontally over the slide container.
Because the children (slides) are absolutely positioned I need to dynamically update the height of the parent (slideshow container). Otherwise
Because I dont know the height of the individual slides I need to calculate the tallest div and give that to the parent
Code below to get tallest element below:
function getTallestSegment(element) {
let elementsHeight = [];
let height = 0;
element.forEach(child => {
elementsHeight.push(child.scrollHeight);
});
height = Math.max(...elementsHeight);
return height;
}
And the window resize snippet to update the parent height dynamically.
window.onresize = function(e){
Object.assign(item.style, {
height: getTallestSegment(getChildren) + "px"
});
};
Now it works, but only only when I downsize the window:
Please have a look in the gif. Notice the height value in the bottom right corner is in fact changing. But only when I downsize the window, I want it to work when I expand the window width as well!
Any takers to figure out to make the parent resize in both directions?
Thanks!
The problem with your code is that, when you expend the viewport, the elements are 100% height of it's container. When you expand, the elements are still 100% height of it's container because the container has a fixed height, that's whay it doesn't shrink.
But with CSS grids you can overlap elements and still make the container resize according to the tallest of them, no need for absolute position and no need for javascript to resize them.
First you make the container a grid:
.hover-slide {
display:grid;
}
Then, you put all elements on the same row and column (no need for absolute, left, right, width, height, etc):
.hover-slide > * {
grid-column: 1;
grid-row: 1;
}
And that's it, you can change the active element, but the height will just be the minimal to get all the elements inside.
Your code but using this idea https://codepen.io/anon/pen/PLPLpv (I've added a border to see the container's height easily)
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.
In JavaScript what's the right way to set the scrollHeight of one element to that of another element? Direct assignment has no effect.
Thanks, Greg
It's not possible directly. The scrollHeight is a read only property that contain the total height of element content in pixels.
If have element A and you want to have element B with the same scrollHeight as element A, make it so that element B has a single child DIV element (move all previous element B content as child nodes of the DIV) that is set to:
width : 100%;
overflow : hidden;
and using javascript set the height of DIV to scrollHeight of element A (in pixels):
document.getElementById('B').childNodes.item(0).style.height = document.getElementById('A').scrollHeight + 'px';
I'm having a parent div and inside that child element will be table.
I'm hidding some columns in the table through CSS to avoid inline-style.
So how can I reflect the width to parent div after hiding the column of table...
$("#yourtableid").width();
returns the computed pixel width of the table element with id yourtableid.
$("#yourdivid").width ( $("#yourtableid").width() );
will set the parent div width.
See
CSS/width
Maybe you'll need to use jQuery innerWidth() method (calculates elements width with padding without calculating border width) and outerWidth() (calculates elements width with padding and border size included).
If you supply optional boolean argument to outerWidth() (eg : outerWidth(true)), it'll include also size of margins.
So in this case your code will be
$("#yourdivid").width($("#yourtableid").innerWidth());