CODEWITHSUNDEEP
javascriptcsshighcharts
user2571510
user2571510

Reputation: 11377

CSS / Javascript: hidden div does not take full width after being shown

I have an HTML page with the following divs that are being filled with a chart using Highcharts. By default one of them is hidden and is then displayed based on selections on the page.

When I show the div programmatically it only takes a small part of the screen width but when I show it by default, i.e. without the CSS hiding then it takes the full screen width (which is what I want).

Can someone tell me how I can set the divs to keep full screen width or how to reset this after being shown ?

My divs:

<div id="containerR" style="height:600px; margin:0 auto; min-width:300px;"></div>
<div id="containerC" style="height:600px; margin:0 auto; min-width:300px; display:none"></div>

My JS function:

$('#viewC').on('click', function() {
    $('#viewR').removeClass('btn-primary');
    $('#viewC').addClass('btn-primary');
    $('#containerR').hide();
    $('#containerC').show();
});

Many thanks in advance for any help with this, Tim.

Upvotes: 0

Views: 107

Answers (1)

juvian
juvian

Reputation: 16068

Problem is highChart probably draws according to available space, but if its hidden it messes up its calculation. Even if you show it later and set the width, the chart has already been drawn with the other size.

You need to unhide it when you draw the chart, and after that you can hide it again

Upvotes: 1

Related Questions