problem resizing map in floating pane

Question

I have a map that starts with a search of facilities.  The user can decide once they see the list if they also want to see a map of the features.  By default, no map is shown.

I created a floating pane for the map and set a dock to act as a button for the user to click on to open the map.  First of all, I'm having a little problem styling the dock 'button'.  I've been working to have an image on it as well as a piece of text, but at the moment it still looks like a button separate from the image and not a single seamless looking object.

Secondly, when you click the button that opens the floating pane, in Firefox, the map only takes up the left 1/2 of the pane.  It seems to look OK in IE (very surprising!).  I have my map height and width set to 100%, but somewhere I'm missing another setting to fill the pane properly.

[HTML]http://wwwgis.dhss.mo.gov/Website/VCFprovider/provider.html[/HTML]

Third, when I resize my floating pane, my map isn't resizing.  I thought I was accounting for that, but maybe it makes a difference that the pane is dynamically resizable as opposed to a map that might be resized because of a browser resize?

Last, in IE, my grid, which I think I have hidden or invisible at start up until the user makes a selection, shows an outline of the grid column headings in IE, but not Firefox.

TracySchloss · Answer

12.0.

I tracked down an old thread that described a similar situtation, but for tabs in a tabcontainer rather than a floating pane.  It did mention my default size of 400 x 400 as being an issue with map content for a container that's not yet initialized.  So I either need to initialize it differently than I have or just figure out a way to define the height and width before it opens the floating pane.

This started originally with a map in the center of the layout and a list in the left pane.  I didn't really change it up too much which I switched it to this version.  Mostly I wrapped the mapDiv in a floating pane when it had been in a regular contentPane.   Mostly this has worked, but I think this problem is a side effect of not having my initializations in the right order now.

jskinner · Answer

I can't seem to reproduce this.  What version of Firefox are you running?

TracySchloss · Answer

I knew I needed a different pair of eyes!  I was sure that would fix it, but it didn't!.  I'm noticing setting a breakpoint when the map is created, it's height and width are defined as 400x400 px. In the documentation, it says the size is determined by the div it's in.  but since my div is within a floating pane that isn't yet opened, maybe it's getting confused?  I have set explicit dimensions (comparable to the dimensions of the floating panel), to 100% to auto and to inherit (which all sound the same to me, but I'm sure have subtle differences!).  Nothing is making my map budge from it's 400 x 400 size.  In Firebug, I can set the dimensions of the mapDiv and mapDiv_root, which seems to be the container within it once it's renderer, but adding dimensions for the styles of those doesn't make any difference.

The map is still not resizing when I resize the pane.  I have the resizeHandle.css referenced, which seems to be a common error people make.   My 'workaround' is to have the dimension of the floating pane to also be a square, so it's not so obvious I have a problem.  But that's no kind of solution!

I did finally dig around enough in the style of the dock to get my button to look better!