We Keep Coding

Disable scroll makes content to move right

Have a look at this website please ebooks.am
So when I click on a table row, the sidebar opens from right side. Here I give body disable scroll for two purposes: first is definitely to disable scroll in body when sidebar is opened and the second is to hide scroll bar in sidebar, otherwise I would have 2 scrollbars side by side.
My problem is that when a sidebar is opened, the content (centered table, search) is moved to right. So how can I fix this, to make the content stay at the same place where it is.
Thanks in regards

add "disable-scroll" class on html element and add the following code
html.disable-scroll{
height: 100vh;
overflow: hidden;
}
html.disable-scroll body{
overflow: scroll;
}

Making scrollbar invisible without removing it - Windows browser

In my Angularjs app I have a dropdown menu that appears when I click on a link. To stop scrolling on the page while the menu is showing I use overflow:hidden and add the class to the body when the menu is showing:
However, using overflow:hidden also removes the vertical scrollbar completely from Windows based browsers meaning the whole page shifts to the right (by the width of the scrollbar) when the menu opens.
Can I stop the scrolling without completely removing the scrollbar? Perhaps keep the scrollbar container in place but hide the handle.
Example
Take a look at https://fancy.com/ - click on the login link and the modal should appear. The scrollbar handle disappears but the scrollbar container remains. How can I achieve this effect?

Take a look at https://fancy.com/ - click on the login link and the modal should appear. The scrollbar handle disappears but the scrollbar container remains. How can I achieve this effect?
Looks like they are simply doing this by having overflow-y: scroll set for body to begin with, and then a class fixed is added to the html element when you click “login”.
And then that class affects the main content container of the page, setting it to fixed position:
.fixed #container-wrapper {position:fixed;left:0;width:100%; /*[…]*/

Put the menu into a wrapper div and set overflow-x: and overflow-y: as you need for this div.

As I mentioned in the comments, this can easily be done with nested divs. Yes it could be done using the body tag but that is a very simple change from my code below. You can see the effect here: https://jsfiddle.net/udgj3ot5/
Note: I doubt you will be calling the function straight from the child div so another means to pointing to the element other than this will probably need to be used.
CSS
html, body {
padding:0;
margin:0;
width:100%;
height:100%;
}
div.parentDiv { /*Set this to the body if you don't want two divs*/
width:inherit;
height:inherit;
overflow-y:scroll;
}
JavaScript
function toggleChildDiv(elem) {
if (elem.style.overflow == "hidden") {
elem.style.width = "auto";
elem.style.height = "auto";
elem.style.overflow = "visible"
} else {
elem.style.width = "100%";
elem.style.height = "100%";
elem.style.overflow = "hidden"
}
}
HTML
<div class="parentDiv">
<div onclick="toggleChildDiv(this)">
YOUR PAGE CONTENT
</div>
</div>

Javascript height to impact content not just div

I am working on a form on a webpage. I want to have a button on a panel which when pressed expands a div (underneath the button) to make it visible and then invisible again when the button is pressed again - a kind of further details popout box. So far i have got this:
function blockappear() {
var ourblock = document.getElementById("theblock");
ourblock.style.transition = "all 2s";
if (ourblock.style.height == "0px") {
ourblock.style.height = "220px";
} else {
ourblock.style.height = "0px";
}
}
and this:
#theblock {
background-color: #a83455;
height: 220px;
width: 100%;
padding: 0;
margin: 0;
display: block;
}
and this:
<p><button type="button" onclick="blockappear()">Try it</button></p>
<div id="theblock">
Some text
</div>
And it seems to work which is quite pleasing (even though it has taken hours to get this far). The problem is this. I want the div to change from 200px to 0px including the contents not just to the extent it can according to the contents. At the moment the div shrinks, but the content "some text" stays put on the page. I have tried changing the display attribute of the div to 'block' and 'table' and still no joy. I thought that the point of a div was that it enclosed the content with the group tags and that the content could not exist without the div. If the div has 0px height how can the text still show?
Incidentally, if i just use display:none; on the div it works (without the transition of course). I need the content of the div to respond to the height of the div somehow - i suspect using the css properly.
I think this has been covered before by using jquery, but i want to use javascript now that i have started as it will probably take me another few hours if i start again with a whole new language :-)
Thanks for any help...

Add overflow: hidden; to your div. This will hide the content which doesn't fit into the container.

You want to use this CSS property on your div:
overflow: hidden;
This will make any content of #theblock bigger than #theblock itself invisible. So - if #theblock has height of 0px - all of its contents will be hidden.
Default value is overflow: visible;, so even content bigger than containing element itself will still be there for all to see. That's all there is to it.
Read more: overflow CSS property (MDN)

div inside button not responding to heights

Fiddle
I am making a social thumbs up button, and I'm having some issues. Inside my full button I have a second div to hold the right side of it. But it is about 15px tall, even if I use CSS to make it 300px tall. It also won't size with width. It is about 10px away from the right edge of the button container.

If you want the button to expand with whatever content you put in it, then the height property can't be set to an absolute value. Remove this line:
height: 25px;
from the #b CSS class and your button element should expand to contain whatever content you want inside of it. An alternative to the height property is the min-height property so instead of deleting the above line of css you could replace it with:
min-height: 25px;
The same principle applies with the CSS width property.

How to stop a parent div expanding vertically when child div becomes visible

I have a parent div that has a height set on it.
There are child divs inside of it with initial visibility turned off.
When I make it visible, the parent div expands vertically. I dont want that.
Background:
I'm using DataTables, with the scroller and filterColumn plugins.
The header of my table has an action on it assigned by jQuery that when I click on the a column header, a div is to appear below it and show some content.
Issue is, when it appears, the header div expands.
I've tried overflow: hidden, auto, etc, but the closest i can get is the scrolling body seems to cover the floating div. I also set the z-index to above the scroller, but that doesnt do anything either.
Any suggestions?

You can give the parent div a fixed height
.parent {
height: 400px;
}
and make your child div have absolute position
.child {
position: absolute;
}

use position:absolute on the element being shown to remove it from the page's flow. this will prevent it from affecting the width of the parent div.