Question

Using Bootstrap Responsive – HTML appears like…

<div class="row-fluid Center">
    <div id="divMapCanvas" class="span6">
        <div id="map_canvas">
        </div>
    </div>
    <div id="divMapPanel" class="span6">
        <div id="map_panel">
        </div>
    </div>
</div>

Test Webpage: http://gfw.yyyz.net/Contact

What I would like to do is initially hide the divMapPanel div and have the divMapCanvas div centered on the page. Then after the directions button is pressed, the divMapCanvas would move to the left and the divMapPanel would appear. I have tried merely hiding the divMapPanel, but I can’t get the divMapCanval centered.

Thanks in advance for any suggestions?

Answer 1

On the the div with class span6 that wrap your canvas, you need to set a fixed width (I used width: 526px; when I got it to work on your example page, but you could use % instead, or what have you, but it cannot be set to auto which is the default setting), you also have to get rid of the floating by adding float: none; and margin: 0 auto;.

On the divMapPanel you need to add display: none, to make sure that it doesn’t take up any space in the DOM. Using visibility: hidden for instance will not work.

Then when the user click on direction and you want to display both elements side by side, you get rid of these settings by adding float: left etc. back in, and both elements should appear side by side.