How to put buttons on the leaflet map

css, html, javascript, leaflet

Solution

I hope i understood you right and it helps. Here is the fiddle: http://jsfiddle.net/g3JrG/4/

HTML:

<div class="span9" style="height:100%">
    <div id="map-wrapper">
        <div id="map"></div>
        <div id="button-wrapper">
            <input type="button" id="Btn1" value="Btn1" class="btnStyle span3" />
            <input type="button" id="Btn2" value="Btn2" class="btnStyle span3" /> 
            <input type="button" id="Btn3" value="Btn3" class="btnStyle span3" />
         </div> 
    </div>
    <span id="studentsCount" class="lblStyle span3"> Ikke rutesat: </span>
</div>

CSS:

#map-wrapper {
    width: 100%;
    height: 500px;
    position: relative;
    border: 1px solid black;
}

#map {
    width: 100%;
    height: 100%;
    background-color: green;
}

#button-wrapper {
    position: absolute;
    bottom: 10px;
    width: 100%;
    border: 1px solid red;
}

TJL

Problem

I am using leaflet map in my application & using bootstrap for responsiveness. I have some buttons bellow that map. It looks something like this. But I want to overlap buttons on map like this Here is my HTML ``` <div class="span9" style="height:100%"> <div id="map"></div> <div style="padding-left: 10px;padding-right: 10px"> <input type="button" id="Btn1" value="Btn1" onclick="" class="btnStyle span3" /> <input type="button" id="Btn2" value="Btn2" onclick="SaveRoutes()" class="btnStyle span3" /> <input type="button" id="Btn3" value="Btn3" onclick="editRoutes()" class="btnStyle span3" /> <span id="studentsCount" class="lblStyle span3"> Ikke rutesat: </span> </div> </div> ``` My css for map ``` html, body, #map, .row-fluid{ height: 100%; } #map { width: 100%; } .btnStyle { background-color: #4D90FE; background-image: -moz-linear-gradient(center top , #4D90FE, #4787ED); border: 1px solid #3079ED; color: #FFFFFF; padding: 4px; margin-top: 4px; margin-bottom: 4px; width:100% } .lblStyle { color: red; padding: 4px; margin-top: 4px; margin-bottom: 4px; width: 100%; font-weight: bold; } ```

Original source