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>

Keep resizable children within parent

I'd like to keep the resizable elements within the parent element.
What I did:
I gave already the minHeight : property and wile resizing I'm constraining the new height using Math.max to keep it at 30px height
Expected:
All resizable children elements should always be visible and minimally 30px in height.
Issue:
Somehow if you resize the lower elements, at some point vertical the big scrollbar appear and the resizable goes out of containment:"parent" (why?).
To recap - the page's vertical scrollbar should never appear an one should be always able to get to the "c" element.
$(".resiz").not(":last").resizable({
handles: 's',
minHeight : 30,
containment: "parent", /* seems not to work?! */
start:function(e,ui) {
this.other= $(this).next() || $(this).prev();
this.startingHeight = this.other.height();
},
resize:function(e,ui) {
var diffH = ui.size.height - ui.originalSize.height;
this.other.height( Math.max(30, this.startingHeight - diffH) );
}
});
*{box-sizing:border-box; margin:0;}
html, body{height:100%;}
#panel{
position:absolute;
height:100%;
width:200px;
}
.resiz{
height:33vh;
width:100%;
background:#eee;
}
.ui-resizable-s{
height:3px;
background:#08f;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="panel">
<div class='resiz'>a</div>
<div class='resiz'>b</div>
<div class='resiz'>c</div>
</div>
Edit: Seems related but the answer is not what I expected...

You are changing the height of the last div but never the actual div being resized. So the containment grows with the last div being pushed and since the containment is applied on the div being resized, it's never applied.
So to solve your problem I think you need to resize the last div until it's a maximum height, and when it's the case prevent anymore resizing. You could do it like this, although it seems there could be a more efficient way. Still it'll give you some ideas:
$(".resiz").not(":last").resizable({
handles: 's',
minHeight: 30,
containment: "parent",
/* seems not to work?! */
start: function(e, ui) {
this.maxHeight = undefined;
this.other = $(this).next();
this.startingHeight = this.other.height();
},
resize: function(e, ui) {
var diffH = ui.size.height - ui.originalSize.height;
//when next div is at max height, you prevent resizing of current div
if (Math.max(30, this.startingHeight - diffH) == 30) {
this.maxHeight = this.maxHeight || (this.prevHeight);
ui.size.height = this.maxHeight;
//until it's at max div you resize next div
} else {
this.other.height(this.startingHeight - diffH);
this.prevHeight = ui.size.height;
}
}
});
* {
box-sizing: border-box;
margin: 0;
}
html,
body {
height: 100%;
}
#panel {
position: absolute;
height: 100%;
width: 200px;
}
.resiz {
height: 33vh;
width: 100%;
background: #eee;
}
.ui-resizable-s {
height: 3px;
background: #08f;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="panel">
<div class='resiz'>a</div>
<div class='resiz'>b</div>
<div class='resiz'>c</div>
</div>

Switch div from fixed to absolute at bottom of browser

Im trying to add a footer at the bottom of this content that doesn't overlay the content but moves it up.
The only way I can see it working would be something like, when browser is at the bottom remove 'fixed' class on the left red '#work'.
js fiddle DEMO
Updated js fiddle DEMO
HTML
<div id="header-block">
Header-block, this sits here in the background
</div>
<div id="content">
<div id="work">
This content should be fixed when at the top
</div>
<div id="description">
This content should scroll -
</div>
</div><!-- end content -->
<div id="footer">
This should appear at the bottom
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
#header-block {
background: green;
width: 100%;
position: fixed;
z-index: 1;
height: 300px;
top: 0;
}
#content {
margin-top: 300px;
width: 100%;
position: relative;
z-index: 2;
}
#work {
background: red;
width: 50%;
height: 100vh;
float: left;
position: absolute;
}
#description {
background: blue;
width: 50%;
height: 1200px;
float: right;
font-size: 30px;
}
#footer {
background: black;
width: 100%;
height: 100px;
position: absolute;
z-index: 3;
bottom: 0;
}

If I understand your question correct, this should do the trick (although it depends very much on JavaScript unfortunately).
// Fix work column on scroll
contentStart = $("#content").offset().top ;
contentSize = $("#content").height() ;
window.onscroll = function(){
if( window.XMLHttpRequest ) {
var position=window.pageYOffset;
// calculate the position of the footer and the actual seen window
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $("#footer").offset().top;
if ( position > 300 && !(docViewBottom >= elemTop)) {
$('#work').css({'position':'fixed', 'top':'0', 'height':'100vh'});
} else {
// if the footer is visible on the screen
if(docViewBottom >= elemTop) {
$('#work').css({ 'top': 0 - (docViewBottom - elemTop) }); // scroll the #main div relative to the footer
} else {
$('#work').css({'position':'relative', 'top': 'auto'}) ;
}
}
}
}
For further informations about the calculations, perhaps this question on stackoverflow is useful.
Edit: Andrew Haining posted his answer in between of my answer, perhaps give his link a try and maybe it's a better (more proper) solution. Unfortunately I haven't actualised this page when I was testing your code in JSFiddle and I didn't see his answer.
If you want to use my script, make sure you can test it with different resolutions. It works just fine for my resolution in JSFiddle, I didn't test any other.

I'm not 100% sure what you want, but if you remove the position: absolute and the bottom: 0 from the footer, and put a div with class='clearboth' above the footer, it seems to do what you need.
CSS
.clearboth {
clear: both;
}
This is a drawing of what I see on your fiddle;
Do you want the red and the blue to always be touching the black?
I don't see the red overlying the black

You should use jQuery to add a class containing the position:fixed value when the scroll position of the page is less than the inline position of the #work div. Once it scrolls past the position, remove the class and have the element fall back in line.
You can achieve this using the following jQuery methods.. .scrollTop() .offset().top() and $(window).height().
This tutorial will give you an understanding of what you need to do to achieve the necessary results, you will just have to change the calculation slightly using $(window).height(), $('#footer').height() and a few other changes to get what you desire.

Based on the question you asked i think this is what you mean. The red div should be fixed when it gets to the top but be absolute when it is below the top for scrolling and the black footer should be below the red while scrolling, check this code i have done for you. just add this jquery script and run it.
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready(function() {
$(window).scroll(function () {
console.log($(window).scrollTop());
if ($(window).scrollTop() >= 322) {
$('#footer').css("z-index","1");
$('#work').css(
{
"background": "red",
"width": '50%',
'height': '100vh',
'float': 'left',
'position': 'fixed',
'top': '0'
});
}
if ($(window).scrollTop() <= 322)
{
$('#work').css(
{
"background": "red",
"width": "50%",
"height": "100vh",
"float": "left",
"position": "absolute"
});
};
});
});
</script>

If not exactly a parallax, this is somewhat close to how parallax works, containers moving at different speeds, and some containers sitting fixed or scrolling when they attain a particular top/bottom offset in the viewport.
There's plugin that can do it. Skrollr
You can use Skrollr along with skrollrcss, and it'll make sure how the containers take position on screen based on scrolltop of the window and the container specifically.

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);
});

jQuery animate expand proportionally

I'm now in problem about how to animate function in jQuery to expand proportionally. Normally, it expand one-sided only just like expand to bottom or expand to right.
What I want is to expand proportionally left-right-top-bottom by using animate.
Following is my coding. What I said above, it expand to bottom only.
$(document).ready(function() {
var theFrame = $("#FrmPatient", parent.document.body);
theFrame.animate({width: 650, height: 485}, 1000);
});

Try this:
<div id="frame"></div>
#frame {
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;
width: 200px;
height: 200px;
background-color: #999;
}
$(function() {
var w = 400, h = 400;
$("#frame").animate({
width: w,
height: w,
marginLeft: -w/2,
marginTop: -h/2
}, 1000);
});
http://jsfiddle.net/GVj83/

You'll need to animate the left and top properties as well. If the original width and height of the box are (w0, h0) and the expanded ones are (w1, h1), animate left to left-(w1-w0)/2, and top to top-(h1-h0)/2. Note that would only work with absolute or relative positioning.