CODEWITHSUNDEEP
html
Ruslan Wahyudi
Ruslan Wahyudi

Reputation: 37

How to Solve Option Select appeared behind modal using bootstrap?

I was making form on modal using bootstrap, and why when i used select tag and it's appeared in behind model? like this, sorry my English is bad..

<a href="#regis_card" data-toggle="modal"><i class="icon icon-inbox"></i> <span>Registrasi Card</span></a>

And this is the modal

<div class="modal fade" id="regis_card" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <form action="?page=card/add" method="POST" class="form-horizontal">
    <div class="modal-header">
        <button data-dismiss="modal" class="close" type="button">×</button>
        <h3>Registrasi Data Card</h3>
    </div>
    <div class="modal-body">
        <div class="widget-content nopadding">

            <div class="control-group">
                <div class="row row-fluid">

                    <label class="control-label">Pemilik :</label>
                    <div class="controls">
                        <select class="span12" name="id_tenant">
                        <?php
                        $query_tenant = mysqli_query($koneksi, "select * from tenant");
                        while ($data_tenant = mysqli_fetch_array($query_tenant)){ ?>
                            <option value="<?php echo $data_tenant['id_tenant'];?>" ><?php echo $data_tenant['nama_lengkap']." - ".$data_tenant['NIT'];?></option>
                        <?php
                        }
                        ?>
                        </select>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="modal-footer">
        <a data-dismiss="modal" class="btn btn-inverse" href="#">Cancel</a> 
        <button class="btn btn-primary" type="submit">Simpan</button>
    </div>
    </form>
</div>

Upvotes: 0

Views: 6524

Answers (1)

Tiep Phan
Tiep Phan

Reputation: 12596

change z-index of select:

.class-of-select {
    z-index: 1100; // or > 1050
}

because, default modal bootstrap has z-index: 1050;

note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

.class-of-select {
    position:relative; // or absolute/fixed
    z-index: 1100; // or > 1050
}

Upvotes: 2

Related Questions