Tattu Tattu - 2 months ago 8
Javascript Question

Dynamically add or remove height and overflow-Y scroll property of a div using javascript

I have two sections [divs] on a page which is based on bootstrap. The left section contains a bootstrap panel which initially is resized to occupy the full page and then on clicking a glyph on the panel header, right section slides in sharing the page with the left panel. The contents of the right section are also panels whose contents are dynamic[table and dynamic rows]. The left panel is coded to always occupy window height. What I want is the right side div also to always occupy the window height and for overflow let a scroll appear for the right hand section. If I hard code the height of the right hand section and then give overflow-y: scroll, then it works. But I want to provide both using javascript and the height to be window width. Please help.

<body style = "height: 100%; overflow:hidden;">
<div id="navigationbar">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<a class="navbar-brand" href="#">TRAMM</a>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right" id="menu">
<li><a href="">Home</a></li>
<li><a href="">Page1</a></li>
<li><a href="">Page2</a></li>
<li><a href="">Page3</a></li>
<li><a href="">Page4</a></li>

<div id="wrapper">
<div id="main-wrapper" class="col-sm-6">
<div class="panel panel-info" style="margin-top: 1%">
<div class="panel-heading" id="JnName">
<div class="row">
<div class="col-sm-8">
NAME : Somename
<div class="col-sm-4" style="text-align: right;">
<span class="toggle-button bs-tooltip" id="ShowButton" style="cursor: pointer" data-toggle="tooltip" data-placement="left" title="Click to toggle sidebar">
<span id="glyphbutton" class="glyphicon glyphicon-backward"></span>
<div class="panel-body" id="SVGPanel">

<div id="sidebar-wrapper" class="col-sm-6 sidebar">
<div class="panel panel-info" style="margin-top: 1%;" id="JunctionParam">
<div class="panel-heading" id="JunctionParameters">Junction Parameters</div>
<div class="panel-body">
Please fill the content which is more than the window height here...

And I have tried this. But it does not seem to be working

function autoAdjust()
var $sidebarwrapperscroller;
$sidebarwrapperscroller = document.getElementById('sidebar-wrapper');
$sidebarwrapperscroller.style.height = $(window).height();
$sidebarwrapperscroller.style.overflowY = "scroll";

But without any javascript, if I set

<div id="sidebar-wrapper" class="col-sm-6 sidebar" style="height: 700px; overflow-y:scroll;">

Then its working. But I want the height to be set to window height dynamically.


If I understood you you need to add overflow-y:scroll and height:auto to sidebar-wrapper ? Maybe with jquery?

$("#sidebar-wrapper").click(function() {
    if ( $("#sidebar-wrapper").css('display') == 'visible' ){
        $("#sidebar-wrapper").css({"height":"auto", "overflow-y":"scroll"}); 
        $("#sidebar-wrapper").css({"height":"", "overflow-y":""});

Replace sidebar-wrapper id with your glyph id in .click function