Develop Reference

why is child element's width changing when parent's width changes?

I am trying to create a tooltip element that has a min width of 50px and a max width of 200px. I place the tooltip element inside another element so that I can easily control when the tooltip appears or disappears when there is a hover event on the parent.
The problem that I have is that the tooltip element's width appears to be controlled by the parent's width even though I specified that the child(tooltip) has an absolute position.
let p = document.getElementById( 'parent' );
let b = true;
setInterval( ()=> {
b = !b;
let w = 10;
if( b ) {
w = 300;
}
p.style.width = `${w}px`
}, 5000 );
#parent {
background-color: cyan;
width: 100px;
height: 25px;
position: relative;
transition: width 2s;
}
#tooltip {
position: absolute;
top: calc( 100% + 5px );
left: 5px;
min-width: 50px;
max-width: 200px;
background-color: yellow;
padding: 5px;
border: 1px solid black;
}
<div id="parent">
<div id="tooltip">
My long tooltip text that wraps to multiple lines as needed.
</div>
</div>
I would like the tooltip (yellow div) to keep it's size at 200px in this example, but we can see that when the parent changes width, the tooltip width also changes. Why?
Is there a way to fix this problem?
Clarification: In this example: https://codepen.io/anon/pen/ePPWER we see that the tooltip text looks nice on one line. I don't want the tooltip's div to change its width when the parent changes width, because it forces the tooltip text to wrap onto 2 lines which is undesirable.

If we check the specification related to the width of absolutely positioned element we can read this:
'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
So in your case the width of your element is shrink to fit:
Calculation of the shrink-to-fit width is similar to calculating the
width of a table cell using the automatic table layout algorithm.
Roughly: calculate the preferred width by formatting the content
without breaking lines other than where explicit line breaks occur,
and also calculate the preferred minimum width, e.g., by trying all
possible line breaks. CSS 2.1 does not define the exact algorithm.
Thirdly, calculate the available width: this is found by solving for
'width' after setting 'left' (in case 1) or 'right' (in case 3) to 0.
Then the shrink-to-fit width is: min(max(preferred minimum width,
available width), preferred width).
To make it easy, and without considering the min/max-width, the width of your element will try to fit the content without exceding the width of its parent container (containing block). By adding min/max-width you simply add more constraint.
One idea of fix it to remove positon:relative from the parent element so that it's no more the containing block of the position:absolute element (it will be the initial containing block which is wide enough to avoid the available width constraint).
Then use margin instead of top/left to control the position:
let p = document.getElementById( 'parent' );
let b = true;
setInterval( ()=> {
b = !b;
let w = 10;
if( b ) {
w = 300;
}
p.style.width = `${w}px`
}, 5000 );
#parent {
background-color: cyan;
width: 100px;
height: 25px;
transition: width 2s;
}
#tooltip {
position: absolute;
margin-top: 30px;
min-width: 50px;
max-width: 200px;
background-color: yellow;
padding: 5px;
border: 1px solid black;
}
<div id="parent">
<div id="tooltip">
My long tooltip text that wraps to multiple lines as needed.
</div>
</div>

ID Tooltip is being used under Parent. When parent's width changes, it also suggest that tooltip's total width is changed. Since you have used mix-width and max-width it will expand till it reaches max-width. If you want it to be fixed then simple use width.

It is because the .parent has a position: relative. This will keep all children (position: absolute included) as confined by the parent div.
Not sure if this will work for you because it is pulling the tooltip out of the parent and making it's own with span wrapping the text. Alternatively, you'll need to change the parent from being relative otherwise it'll continually affect the child.
let p = document.getElementById('parent');
let b = true;
setInterval(() => {
b = !b;
let w = 10;
if (b) {
w = 300;
}
p.style.width = `${w}px`
}, 5000);
#parent {
background-color: cyan;
width: 100px;
height: 25px;
transition: width 2s;
position: relative;
}
#root {
position: relative;
}
#tooltip {
width: 100%;
}
#tooltip span {
position: absolute;
top: calc( 100% + 5px);
left: 5px;
min-width: 50px;
max-width: 200px;
background-color: yellow;
padding: 5px;
border: 1px solid black;
}
<div id="root">
<div id="parent"></div>
<div id="tooltip">
<span>My long tooltip text that wraps to multiple lines as needed.</span>
</div>
</div>

How to manipulate a generated CSS

I have this css style which is generated from Angular module so I can't do anything there.
The problem is that I want to -30px from what is generated.
<div ng2-sticky="" style="box-sizing: border-box; position: static; float: none; top: auto; bottom: auto; width: 1040px; left: auto;">
Hello World
</div>
As the value changes with screen size, I want the width to be 30px lesser always. So for this specific screen size, it should be 1010px.
I'm not sure how I could possibly use calc here or is there any other method to achieve this?
PS: I can't edit the Javascript generating this code since it's not on my server.

JS - You can do something like this in js
let element = document.querySelector('div[ng2-sticky]');
let width = element.offsetWidth;
let newWidth = width - 30 + "px";
element.style.width = newWidth;
CSS - or simple trick in css would be
div[ng2-sticky]{
margin: 0 15px;
}
so it would give a margin to the left and right

you could
document.querySelector('[ng2-sticky=""]').style.width = 1010px;
or perhaps
<style>div[ng2-sticky=""] {width:1010px !important;}</style>

Resize a CSS div box dynamically

if i have one div box with this css content:
.box
{
border-radius: 18px;
background: blue
width: 260px;
height: 60px;
padding: 10px;
margin: 15px;
border: 2px black solid;
position: absolute;
left: 250px;
top: 5px;
}
is it possible to create a second box with only other width, height, left and top with something like a function call with parameters in JS or something else where I only can change this params and dont need define more css boxes by myself?

this should do it: http://jsfiddle.net/91shfpxm/
$(function(){
var newbox = createBox(200, 300, 100, 50);
$('body').append(newbox);
});
function createBox(w, h, t, l)
{
return $('<div class="box"></div>').css('width', w + 'px').css('height', h + 'px').css('left', l).css('top', t);
}

Something like this will get you started:
function newBoxElement(cssClass, position, aWidth, aHeight){
var markup = '<div class = "'+cssClass+'"></div>';
$("body").append(markup);
$('.'+cssClass).css({'position': 'absolute', display: 'block', top: position.top, left: position.left, height: aHeight, width: aWidth, border: '1px solid black'});
}
Here's a jsfiddle http://jsfiddle.net/nn3hboon/
Note that the parameter cssClass is a string, position is an object assuming you're using something like $(element).offset(), and width and height are just width and height values you can get from using offsetWidth and offsetHeight on an element.

You can always create css classes by creating a style tag in your header as follows:
$("<style type='text/css'> .newbox{ color:#f00; font-weight:bold;} </style>").appendTo("head");
But in you case since you are already have a css class defined and would like to just change it's attributes, you can simply select that class using class selector in jquery and change its attributes on the fly.
$(document).find(".box").css("width","200px").css("height","300px").css("background-color","green");

Get width of an element after the browser has determined its width

I have a pop up box that I want to be perfectly centered on the window. It has the following CSS properties:
#pop_up {
position: fixed;
display: inline-block;
border: 2px solid green;
box-shadow: 0px 0px 8px 5px white;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
border-radius: 5px;
background-color: grey;
}
I also have some jQuery stuff that sets this element's left and top properties.
$(document).ready(function() {
window_height = $(window).height();
window_width = $(window).width();
pop_up_height = $('#pop_up').outerHeight();
pop_up_width = $('#pop_up').outerWidth();
pop_up_left = (window_width / 2) - (pop_up_width / 2);
pop_up_top = (window_height / 2) - (pop_up_height / 2);
$('#pop_up').css('left', pop_up_left);
$('#pop_up').css('top', pop_up_top);
});
I had it alert me of all of the variables and the window variables were right but for pop_up_height and pop_up_width it would alert me '4'. This obviously means that it is only getting the border. If I change it to .innerHeight(); and .innerWidth(); it alerts '0'. So, it is returning the width before the browser decides according to my width: max-content; property. Trying to figure how to get the width after the browser auto's it.
Also, when I specify a left property does it position the element according to the border or to the actual inside of the element? So if I gave an element 2px border and a left of 20px, would the border be 20px from the left or the actual inside of the element? Just a side question.

function popCenter()
{
$('#pop_up').css({'top':($(window).height()-$('#pop_up').height())/2,'left':($(window).width()-$('#pop_up').width())/2});
}
$(document).ready(function() {
popCenter();
})
$(window).resize(function() { //if resize the window, keep the selector in center;
popCenter();
})

No the border will not be 20 px.
And the element will stick to left .

Try using $("#pop_up").width(); and .height()

How to place a div inside a bigger scrollable div at particular position

I have a div with height = 10*screen-height.
I want to add another smaller div to it with height = screen height
Assuming that I can add 10 such smaller div's onto the bigger div, I want to add this div at particular position on the bigger div. Say starting from 4*screenheight pixel. How do I do that using jQuery?

Presumably you already have the screen height stored, and the two divs created at the correct heights, so:
$(inner_div).css('position', 'relative').css('top', 4*screen_height);
You may not need position:relative in your style if it's in your css already

See here how you can access and manipulate the body's height and the big div's inners afterwards;
JSfiddle
HTML
<div id="biggy">
<div class="smally">Smally :)</div>
<div class="smally">Smally 2, don't forget me :D</div>
</div>
CSS
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
#biggy {
width: 200px;
background-color: orange;
position: relative;
}
.smally {
width: 100%;
background-color: blue;
color: white;
text-align: center;
position: absolute;
}
JavaScript
$(document).ready(function() {
var bh = $('body').height();
var smally_offset = (bh / 10);
// Set biggy to be the body's height
$('#biggy').css('height', bh);
// Make all smallies 10% of the set height
$('.smally').css('height', smally_offset);
// Handle the different smallies :)
$('.smally:nth-child(1)').css('top', smally_offset * 0);
$('.smally:nth-child(2)').css('top', smally_offset * 1);
});