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.
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"
I try to insert several DIV elements into a main DIV - the amount of elements is dynamic and changes according to the number the user inserts.
My question is how to set the length and width of the DIV so that if I add a number of elements that should already be displayed in a wider view than the DIV then just the size of each element will decrease - but the main DIV size will not change.
I hope the question was understandable - how to insert a dynamic amount of elements (DIV) into the DIV??
By using flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
Set your parent div to display:flex then set your children according to the ratios you need. If you want them all the same, set them all to flex: 1.
I have the following scenario on JSFiddle: http://jsfiddle.net/psax3fge/
D FIDDLE: http://jsfiddle.net/psax3fge/1/
Basically its a div that has some info in it. The info is 3 separate divs that are inline block, they will be next to each other if there is enough room but will stack underneath each other when the Windows is made smaller
I want this div to be hidden until a button is clicked where the div slides down. I know not setting the height property will make the div have a fluid height (height gets bigger as things stack underneath each other). However, when I animate it with jQuery, I have to set a height.
Is there a way to do this without losing the fluidity of the div? An alternative is to not animate the div and just make it visible/hidden on button click, but I'd really like to use the animation
Update 4: http://jsfiddle.net/psax3fge/4/
Leave the .container div height to auto and remove the overflow from it.
Now you can use the slideToggle function of the jQuery to show and hide the .container.
P.S you can set display:none to container in initialization.
I have a container div which contains other divs(list items).
The size of this container div should equal heights of 30 items.
If there are more than 30 items in container div, it should stay the same size, but show vertical scrollbar.
Question:
Is there a way to style this container div by CSS so that only after more than 30 list items will be added, the scroll would appear?
Or I have to "hardcode" the height of the container div in CSS which would be list_item*30. Or other possibility: use JavaScript to dynamically change height of
container on initialization depending on list item height. Are these are the only correct
ways to do this?
Thank you.
If every item in the list has the same height "hardcoding" might be the easier way to do this. Just set a height of item_height*30 to the div and have overflow:auto.
Mention CSS height to parent div and overflow-y to scroll.
here i take two divs height for parent div.
Example Here
enter code here
http://jsfiddle.net/2C7qH/
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());