AnsweredAssumed Answered

Mobile Popup Behind Buttons

Question asked by D.E.Smith99 on Oct 10, 2014
Latest reply on Oct 24, 2014 by D.E.Smith99

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>

 

Outcomes