set all div in html without vertical scrollbar

By : Shaggy
Source: Stackoverflow.com
Question!

I am building Dashboard page which contains graphs(using HighCharts for same). my html also contains jQuery Tabs.

In one tab there are 4 different charts.charts are getting loaded properly but it comes with vertical scroll bar. being a dashboard page i want to hide vertical scroll bar.

Here is My HTML

 <div id="container" style="width:98%;">
        <ul>
            <li><a href="#divP1">Dashboard</a></li>
            <li><a href="#divP2">Network</a></li>
            <li><a href="#divP3">> 24 Hours</a></li>            
        </ul>
        <div id="divP1" style="margin:0 auto;">
            <div id="divDailyUptimeLineChart" style="width:650px;height:250px;float:left;"></div>
            <div style="width:500px;height:250px;margin-left:750px;" id="divUptimeGauge"></div>
            <br />
            <div style="clear:both;width:700px;float:left;" id="divFaultCount"></div>
            <div style="margin-left:700px;" id="divTicketTypeCount"></div>
            <br />            
        </div>      
        <div id="divP2" style="margin:0 auto;">
            <div id="divFaultTicketType" style="width:49%;float:left;" ></div>            
            <div id="divCRATicketType" style="margin-left:49%;width:49%"></div>
        </div>  
        <div id="divP3" style="margin:0 auto;">
            <div id="divTicketTypeTime"></div>
        </div>
    </div>

HighCharts are reneder to divDailyUptimeLineChart divUptimeGauge divFaultCount divTicketTypeCount On first tab

JS :

$('#container').tabs();

I have tried this code in my HighCharts Defination Code : but it didnt worked

chart: {
        renderTo: divID,
        type: 'gauge',
        height: $(document).height()/2,
        width: $(document).width()/2,
        },
By : Shaggy


Answers
Give the style overflow-y : hidden to hide vertical scroll bar.



Try adding this to the style of each of the divs holding the charts:

overflow-y: hidden;

So for example divDailyUptimeLineChart would be like the following:

<div id="divDailyUptimeLineChart" style="width:650px;height:250px;float:left;overflow-y:hidden;"></div>
By : gimg1


First of all to hide the overflow of the div you should reduce width of the div and place your content to fit inside.

Else you can use

overflow-y:hidden;

Which will hide the exceeding content.It will be a major drawback when to want to display entire content of div.

Try to adjust the tab container width.So that the tab will not exceed the expected size....

I suggest you to read this to know more about Overflow property.



This video can help you solving your question :)
By: admin