AnsweredAssumed Answered

Basemap Gallery behaves oddly, end-row basemaps push next-row basemaps over.

Question asked by MollyKFoley on May 1, 2018
Latest reply on May 1, 2018 by rscheitlin

I've encountered a weird fluke and it probably has something to do with the styling of my basemap gallery, but I can't really figure it out. I have the basemaps styled in a 3x4 row/column arrangement. If I click on the 4th basemap in the row, it pushes the first basemap in the next row over to sit directly underneath it, and then creates a new row with the remaining basemaps.

 

Screenshots - it starts out looking like this:

 

Then if I click on "Topograhpic" it changes to this:

 

If I click on any of the other maps, it will go back to normal, except if I click on "Terrain with Labels", then it will do the same thing and "Oceans" winds up directly underneath it and the rest create a new row:

 

I haven't done much to overwrite the original styles (in fact this problem still occurs if I don't add any styles of my own at all):

#gallery .esriBasemapGalleryNode {
    margin: 5px 20px;
}

#gallery .esriBasemapGalleryLabelContainer {
    height: 3em;
}

#gallery .esriBasemapGalleryLabelContainer span{
    font-family: Lato, sans-serif;
    font-size: 13px;
}

 

HTML:

    <div id="basemap-dialog" title="Choose a basemap">
        <div id="gallery"></div>
    </div>

 

JS:

//Create basemap gallery
var basemapGallery = new BasemapGallery({
    showArcGISBasemaps: true,
    map: map
}, "gallery");
basemapGallery.startup();


//Creates the basemap gallery dialog popup using jQuery UI
var basemapDialog = $('#basemap-dialog').dialog({
    autoOpen: false,
    height: "auto",
    width: 600,
    dialogClass: 'basemap-dialog',
    buttons: [{
        id: "basemap-ok",
        text: "Ok",
        click: function () {
            basemapDialog.dialog("close");
        }
    }]
});

$('#basemap-gallery').click(function () {
    basemapDialog.dialog("open");
});

Outcomes