Bootstrap modal overlap

Question

I have implemented bootstrap modal and it is working fine. Here is my code

<div id="myModal" class="modal fade hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header" style="background-color:#bb4837">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h2 style="color:white;vertical-align:middle"id="myModalLabel">Add Multiple Stores</h2>
    </div>
    <div class="modal-body">
        <des style="font-family:garrisons">You can upload a excel sheet with your store details.Please download the multistore template in .xls format <a href="#">here</a>.</des><br><br>
            <input style="margin-left:5em" type="text" id="upload-textstore" onclick="select_file('store','storefile','store','text/csv');" class="span3"/><button type="button" style="margin-bottom:25px;margin-left:10px" onclick="upload('/merchant/v1/fileupload','store')" class="btn btn-upload">Upload</button><br>
        <br><br><br><br>
    </div>
    <div class="modal-footer">
            <form class="form-inline" style="margin-bottom:0px">
                <button class="btn btn-danger " data-dismiss="modal" style="font-size:1.2em;height:32px;width:7em;margin-left:4em;margin-right:.5em" href="#">Select</button>
                <a data-dismiss="modal" href="#" style="font-size:1.2em;margin-top:.4em;margin-left:0px;margin-right:1em">Cancel</a>

            </form>
    </div>
</div>

The problem is it overlaps other components in the webpage and it looks hidden.

Do you happen to have a link to this so I can visually see it? — Mitchell Layzell, Apr 01 '13 at 04:29
Sorry the website is in beta version so i cant reveal it. The problem is i have a map with draggable marker. but because of modal overlapping even though it is hidden i cant drag the marker and the modal form button is clickable when i hover to the hidden area. — PRASANTH, Apr 01 '13 at 04:37
You should check out what the display properties are for the item that is overlapping and should be hidden, make sure its `css` is set to `display: none;` if its currently has `visibility: hidden` get rid of that and change it to `display: none;` that would be your best bet, but if you still can't figure it out you can send me a link to my e-mail so it's no all over the web and I can check it out, its up to you. mitchlayzell@gmail.com — Mitchell Layzell, Apr 01 '13 at 04:48
I have fixed this issues please check my comment http://stackoverflow.com/questions/19305821/bootstrap-3-0-multiple-modals-overlay/24445349#24445349 — Arpit Pithadia, Jun 27 '14 at 06:50

score 6 · Answer 1 · answered Apr 10 '14 at 03:09

6

Just in case it will help anyone else, I was having problems with this and it was because I didn't have my bootstrap columns inside of an explicitly defined row class.

answered Apr 10 '14 at 03:09

toddmillernyc

111
2
6

score 5 · Accepted Answer · answered Apr 01 '13 at 05:16

I answered this question in the comments but here my formal answer, if something is suppose to be hidden on a website but it is still there you should look at that elements CSS display properties and make sure they are set to display:none this will remove that element from the flow of the page, if that element has the property visibility: hidden change that to display:none as visibility: hidden removes the visual aspect of the element but doesn't remove it from the flow of the site.

Bootstrap modal overlap

2 Answers2