Resize and Reposition Map

[JohnPreston]

I would like to resize and reposition map div and map after user clicks button. When page loads map is positioned to float right with taking up a certain % of page. I would like to reposition map to left and set size to specific #. I can move the map and resize, however the map layers do reposition in center. I'm sure I missing something. Here is my code...

onClick: function () {

$('#left_col').hide();

$('#right_col').css("float", "left");

$('#right_col').css("width", "500px");

$('#right_col').css("height", "500px");

$('#map').css("float", "left");

$('#map').css("width", "500px");

$('#map').css("height", "500px");

map.width = 1000;

map.height = 500;

map.resize();

map.reposition();

});

[TyroneBiggums]

Your map width is 1000 but the containing map div is 500px.

[JohnPreston]

I tried making them both 500, however the map doesn't resize at all. With the code I posted the map actually resized but didn't reposition.

When I do change to both to 500, and I pan just a little the map then repositions in center (does that make sense)?

[TyroneBiggums]

Height and width are read-only for the map. Remove map.width and map.height. Your map is in a containing div, right? #right_col or #map? Just resize the containing div.

Map | API Reference | ArcGIS API for JavaScript

[JohnPreston]

I took out map.width and map.height, now map doesn't resize. The map is contained in #map, the #map div is contained in #right_col.

[TyroneBiggums]

Seeing more code might be helpful. I'm not picturing what's happening. You're moving right_col to the left side of the window?

Are the right_col dimensions changing?

Are you AMD?

Are you checking to see if the dom is ready after stuff is moved around? The sync/async stuff can get screwy at times. Your map may have resized before the dom was ready (before your right_col moved).

What version of the API?

[JohnPreston]

Thanks Tyrone

I got it to behave the way I want. However when I add graphics to map and/or separate graphics layer they are not being redrawn correctly. They graphics are not in the correct position and are distorted. Do I need to update extent? Some other setting?

$('#printPane').hide();

$('#left_col').hide();

$('#right_col').css("float", "left");

$('#right_col').css("width", "700px");

$('#right_col').css("height", "500px");

$('#map').css("float", "left");

$('#map').css("width", "700px");

$('#map').css("height", "500px");

map.width = 700;

map.resize();

map.reposition();

[TyroneBiggums]

I'd probably need to see more code to replicate and see what you mean. And, you have map.width, the read-only property, set to 700. I'm not sure how much that helps you or how much it hinders you.