topic Re: JQuery Layout UI - map not resizing in ArcGIS JavaScript Maps SDK Questions

JQuery Layout UI - map not resizing

AlexGole — Tue, 19 Aug 2014 18:41:16 GMT

Hi all,

I am trying to use a JQuery layout from a plugin called "JQuery Layout UI" for my web applications but It seems like I am experiencing an issue.

As shown on my attachment the map displays correctly, but when I close the east panel, the map does not resize properly and a large white margin appears instead of the panel. What am I missing?

Code:

<!DOCTYPE html>
<html>
<head>
    <title>Layout Container</title>
    <link type="text/css" rel="stylesheet" href="../source/stable/layout-default.css">
    <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.10/js/dojo/dijit/themes/nihilo/nihilo.css">
    <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.10/js/esri/css/esri.css">
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: auto; /* when page gets too small */
        }


        body {
            background: #666;
        }


        /*
        * #verticalCenteringWrapper
        *
        * This is an example of a pure CSS solution for vertical centering
        * It works well when dealing with a fixed-height container
        * However if you just want a 'margin' at top and bottom,
        * then you could use an absolutely positioned div with top & bottom settings,
        * or use an extra wrapper-layout as described in more detail below.
        */
        #verticalCenteringWrapper {
            background: #777; /* for easier visualization */
            overflow: visible !important; /* override Layout CSS added due to #container.min-height */
            width: 100%;
            height: 0;
            top: 50%;
            position: absolute;
        }


        #container {
            background: #999;
            height: 500px;
            margin: -250px auto 0; /* top-margin = height/2 */
            width: 100%;
            max-width: 1100px;
            min-width: 700px;
            _width: 700px; /* min-width for IE6 */
            position: relative;
        }
        .pane ui-layout-center {
            width: 100%;
            height: 100%;
            position: absolute;
        }
        
         .pane {
            display: none; /* will appear when layout inits */
        }
    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript" src="../source/stable/jquery.layout.js"></script>
    <script src="http://js.arcgis.com/3.10/"></script>
    <script type="text/javascript">
        require(["esri/map", "dojo/ready", "dijit/layout/ContentPane"], function (Map, ready) {


            //$(document).ready(function () {
            ready(function () {
                $('#container').layout("resizeContent");


                // create the map
                var map = new Map("map", {
                    logo: true,
                    sliderPosition: "top-right",
                    basemap: "topo",
                    center: [-121.469, 38.556],
                    zoom: 8,
                    autoResize: true
                });
                console.log("added basemap");
            });
        });


    </script>
</head>
<body>
    <div id="verticalCenteringWrapper">
        <div id="container">
            <div class="pane ui-layout-center">
                <div id="map" class="nihilo" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', design:'sidebar'" style="width:100%; height:100%"></div>
            </div>
            <div class="pane ui-layout-north">North</div>
            <div class="pane ui-layout-south">South</div>
            <div class="pane ui-layout-east">East</div>
            <div class="pane ui-layout-west">West</div>
        </div>
    </div>
</body>
</html>

Attachment:

Alex

Re: JQuery Layout UI - map not resizing

FilipKrál — Tue, 19 Aug 2014 19:13:57 GMT

Hi,

Are you resizing the map after each layout pane is resized?

Look at row 2233 of this demo (a bit messy, you may need to refresh couple of times).

http://wlwater.ceh.ac.uk/lwis/apps/cc-impacts/

Cheers,

Filip.

Re: JQuery Layout UI - map not resizing

AlexGole — Tue, 19 Aug 2014 19:25:33 GMT

Filip,

I am not resizing the map at all at the moment I am not really sure how to do so with ESRI JS API. I used autoResize but i think I am not using it right.

As of now here is my code:

//$(document).ready(function () {

ready(function () {

$('#container').layout("resizeContent");

// create the map

var map = new Map("map", {

logo: true,

sliderPosition: "top-right",

basemap: "topo",

center: [-121.469, 38.556],

zoom: 8,

autoResize: true

});

console.log("added basemap");

});

By the way your example looks great. Thank you for your help!

Alex

Re: JQuery Layout UI - map not resizing

AlexGole — Tue, 19 Aug 2014 19:27:14 GMT

How can I get to see your demo's script?

Re: JQuery Layout UI - map not resizing

FilipKrál — Tue, 19 Aug 2014 19:34:05 GMT

Hi, thanks,

As far as I know, you can resize the map simply by calling map.resize(); when appropriate.

In most browsers you should be able to press Ctrl+U to display the source code of the page, search in there for 'resize()', like on row 2233.

If Ctrl+U doesn't work for you, try something like Tools -> Developer -> View source code of your browser (or something like that).

Re: JQuery Layout UI - map not resizing

AlexGole — Tue, 19 Aug 2014 19:43:36 GMT

Got it! Thank you! That was it. I am truly impressed by your demo. It looks great. Which JQuery widget did you use for the toolbar in the west panel? I would love to use something similar.

Alex

Re: JQuery Layout UI - map not resizing

FilipKrál — Tue, 19 Aug 2014 20:00:30 GMT

Glad I could help.

I used a lot of Bootstrap components. There is a lot of room for improvements. For example the content of the left tab is hard-coded to some extent (like the tabs you showed), then some components within that are more widget-like, but not entirely ready at this point. I am still working on it (on and off), trying to combine dojo and jquery.

Re: JQuery Layout UI - map not resizing

AlexGole — Tue, 19 Aug 2014 20:08:03 GMT

Well it looks great already! It is a lot of work you put into this. I have not yet gotten the chance to use bootstrap I think this day will come soon. Thank you for your help!

Alex