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;



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



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

//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 () {

$('#basemap-gallery').click(function () {