Mobile Popup Behind Buttons

DanielSmith · ‎10-10-2014

JavaScript noob so pardon my ignorance.

I'm building a app that is to be mainly used on mobile devices.

The issue i am hoping you all can help me with is that when opened the MobilePopup is behind the home, locate, and additional button i have added. Note the navigation buttons are properly behind the the Popup.

I'm using the 3,11comnpact API

// set up geolocator
                    geoLocate = new LocateButton({
                        map: map
                    }, "LocateButton");
                    geoLocate.startup();
                    //set up geolocator and home buttons
                    var home = new HomeButton({
                        map: map
                    }, "HomeButton");
                    home.startup();

                    //info window and info Template
                    var infoWindow = new PopupMobile(null, DomConstruct.create("div"));
                    map.setInfoWindow(infoWindow);
                    var infoWindowTemplate = new InfoTemplate();
                    infoWindowTemplate.setTitle("<b>${name}</b>");

    <style>
        html, body, #mapDiv{
            padding: 0;
            margin: 0;
            height: 100%;
        }
        #LocateButton {
            position: absolute;
            top: 95px;
            left: 20px;
            z-index: 50;
        }
        #HomeButton {
            position: absolute;
            top: 135px;
            left: 20px;
            z-index: 50;
        }
        #nearButton {
             position: absolute;
             top: 175px;
             left: 20px;
             height:35px;
             width: 35px;
             border-radius: 5px;
             opacity: 0.75;
             z-index: 50;
         }
    </style>
<body>
    <div id="mapDiv">
        <div id="HomeButton"></div>
        <div id="LocateButton"></div>
        <button id="nearButton" data-dojo-type="dijit/form/Button"></button>
    </div>
</body>

KellyHutchins · ‎10-23-2014

Are you worried about the home button image looking pixelated on high-resolution devices? Or do you just want to make the button bigger so its easier to press on touch-friendly devices like an iphone.

If you want to make a larger tap target for smaller devices like an iphone you can use a media query to resize the button when appropriate. Here's an example that shows resizing the button width to 45x45 for screens smaller than 600 pixels wide.

    @media only screen and (max-width : 600px){ 
      .HomeButton .home{
        width:45px;
        height:45px;
      }
    }

If you are worried about the image looking bad at certain resolutions you could switch out the image with an icon font. Icon fonts scale well and can be modified via css. Check out a site like IconMoon for details. However I tested the existing home button on a few devices and it looked ok to me.

DanielSmith · ‎10-24-2014

Media query!! that's the ticket!!!

Again, i really appreciate your help.