Develop Reference

How to force child elements to fit within a parent div width, desipte children using absolute width px values?

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"

Replace all the div from row without moving other rows of a grid

I have a grid of div's. and those all position:relative inside its parent.
What I need to do is on click of one div, All the divs from that row will be hidden and that space will be occupied by first div with
width = number_of_div_in_one_row * orignal_width
ie whole row will be occupied by the div user clicked.
I tried lot many thinks. Calculated number of width in one row and Applied css animation for hiding each div and increasing width of first div.
but Whenever user clicks any div, all rows above it and below it are getting disturbed.
I am not asking anybody to do all calculation for me. Just want to ask is there any JS/jquery library that I can apply for this kind of scenarios.
I already tried http://nanogallery.brisbois.fr/
But in this library all the images are replaced by other set of images. I just want to do something like this with only one row.

I don't know if I understand correctly your question but in this Fiddle there is a fluid grid with three divs per row.
When you click on one div this gets 100% width and other divs in same rows disappear.
When you click on the div that has animated, the entire line will back to the starting point
all code you need is
<script type="text/javascript">
$(document).ready(function(){
$('div.element').click(function(){
$(this).toggleClass('go');
if($(this).hasClass('go')){
$(this).animate({'width':'100%'},{
duration:1000,
step:function(gox){
var width = gox < 100 ? (100 - gox) / 2 : 0;
$(this).siblings().css({
'border':'0px',
'width': width + "%"
});
}
})
}else{
$(this).parent('div.row').find('div.element').animate({'width':'33.33%'},1000);
};
});
});
</script>
If you have rows with differnt number of divs you culd do something like this:
Fiddle
These are just simple examples, I hope them can help you.

How to expand height of the container div whenever child divs are expanded

In my HTML page I have a few <div>s, which can be expanded on clicking their respective links. My requirement is whenever I click on that link, size of its parent container must be increased to the <div>'s size (just like an accordion that expands).
This is what I've tried:
$('.add-comment').click(function() {
$('div.extra').height($('div.extra').height() + $('div.stream-widgets-block-comment-box').height());
});
The above statement adds the <div>'s height, but the problem is as it is yet not expanded while the code is getting executed, so the <div>'s height ends up being -1.
EDIT 1: This is the JSFiddle link - http://jsfiddle.net/R9uEh/1/
I have added single div in it, which on expansion uses the height of the page. (Need to click on Add a comment to check the expansion)

$('.add-comment').click(function() {
var vHeight = $('div.extra').height() + $('div.stream-widgets-block-comment-box').height();
$('div.extra').css('height', vHeight);
});
You can use .css() and var.

Try doing it like so.
$('.add-comment').click(function(){
var height = $('div.extra').height() + $('div.stream-widgets-block-comment-box').prop('scrollHeight');
('div.extra').height( height );
});

Set width of one div to the width of another div

I have a search button on the top left which is making my search bar toggle. What i want to achieve here is this.
I basically want the search bar to be the same width as the "welcome" header right above it. the Welcome is not inside a header tag it is actually inside a list tag.
Here is the fiddle i have created.
This is what i tried.
$(document).ready( function () {
var x = $("#page2content :ul").width();
$("#example_filter").css('width', 'x');
});
I basically want to get the width of the welcome header width and store it in a var
and then pass that var in to the css width of the search bar. can anyone please advice what i did wrong? Please also can u give me a smilar solution as i dont want to change the width of the search bar by css directly i want to set its css via jquery. Thanks.

1- This selector is incorrect #page2content :ul, remove the :, so #page2content ul
2- The returned x is a number, you will need to add px to it to make it a valid CSS property. And you will need to target the input
var x = $("#page2content ul").width();
$("#example_filter label input").css('width', x + 'px');

How to find the width of the div or check whether horizontal scroll appears or not?

I want to print the page (div) if there is no horizontal scroll appear for that div.
I have a div (1000px) with dynamic data which having property overflow:auto;. So, I want to print the div only if div's width is not getting crossed.
to achieve this i used following method of a Javascript
var curr_width = parseInt(mydiv.style.width);
But it gives 1000px; only although I can see horizontal scrollbar for the div.
What should I do to achieve this?
Can I check whether horizontal scrollbar is appear for the div or not?
Any help is appreciated.
NOTE: I don't want to use any Javascript library.

scrollWidth, clientWidth did the trick
var mydiv = document.getElementById("grid_print");
if (mydiv.scrollWidth > mydiv.clientWidth){
alert("limit exceeds")
}