set all div in html without vertical scrollbar

By : Shaggy

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%;">
            <li><a href="#divP1">Dashboard</a></li>
            <li><a href="#divP2">Network</a></li>
            <li><a href="#divP3">> 24 Hours</a></li>            
        <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 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 id="divP3" style="margin:0 auto;">
            <div id="divTicketTypeTime"></div>

HighCharts are reneder to divDailyUptimeLineChart divUptimeGauge divFaultCount divTicketTypeCount On first tab

JS :


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

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


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