openlayers map with sidebar problem

[Jedrin]

I am displaying a map using openlayers, on the left I have a sidebar
which I can show/hide through ruby on rails/ajax. The problem is that
when my sidebar appears, the map pushes out to the right and causes a
slider to appear at the bottom. I want it to work the same way that
google maps works where the map resizes and no slider appears at the
bottom.

Any advice on the general direction, what approach or API to look
into would be appreciated.

The general layout I use is with the sidebar is below


=====================

<style type='text/css'>
<!--

#sidebar {
background-color: #999999;
margin: 0px;
padding: 5px;
border-right-width: thin;
border-top-style: none;
border-right-style: dotted;
border-bottom-style: none;
border-left-style: none;
border-right-color: #990000;
overflow: auto;
float: left;
width: 150px;
height: 100%;
}


-->
</style>

<span id='sidebar' style='display:none'>
<%= link_to_remote '<<<<', :url => {:action => 'hide_sidebar'} %>

<%= render artial => 'map/georec_form',
:locals => {:recs => @recs} %>

</span>


<div id='main_content'>
<div> &nbsp
<span id='sidebar_button'>
<%= link_to_remote '>>>>', :url => {:action => 'show_sidebar'} %>
</span>
</div>

<%= yield %>

</div>

 

[Scott Sauyet]

I am displaying a map using openlayers, on the left I have a sidebar
which I can show/hide through ruby on rails/ajax. The problem is that
when my sidebar appears, the map pushes out to the right and causes a
slider to appear at the bottom.  I want it to work the same way that
google maps works where the map resizes and no slider appears at the
bottom.

Are you referring to the scroll-bar by "slider"?

 Any advice on the general direction, what approach or API to look
into would be appreciated.

It's probably easiest to set the style of the DIV, IFRAME, or whatever
box holds the map. You'll need to find the width of the sidebar, the
width of the container which holds both the sidebar and that map
(possibly the BODY), and then set the width of the map holder with
something like:

myBox.style.width = (widthOfContainer - widthOfSidebar - padding)
+ "px";

This should be inside a function that is called when the sidebar is
hidden or shown and when the window is resized.

 The general layout I use is with the sidebar is below

As this is a Javascript group, HTML, CSS, and JS code are all quite
relevant. But server-side markup (RHTML?) is not very helpful.
Please, if you're still looking for help with this, supply the
*output* from your server-side code (from "View Source" or similar in
your browser.)

Good luck,

-- Scott