CODEWITHSUNDEEP
twitter-bootstrapbootstrap-modal
FrenkyB
FrenkyB

Reputation: 7207

Bootstrap modal - elements not inside modal body

I have modal dialog (opens with button press) which is showing me this:

enter image description here

I don't understand why are those inputs outside of the modal dialog?

Example is here

Code:

<style>
    #myModal .modal-dialog { width: 95%;  } 
</style>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">

        <input type="text" class="col-sm-8">

        <label class="col-sm-4">Datum ponudbe:</label>
        <input type="text" class="col-sm-8">

        <label class="col-sm-4">Dokument velja do:</label>
        <input type="text" class="col-sm-8">


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

    </div>

  </div>
</div>

Upvotes: 0

Views: 1338

Answers (1)

esther kay
esther kay

Reputation: 161

Your example and link do not contain the same code. Code here is missing form-groups and modal-body styles. The link should work - it's just pulling the wrong id (#myModal). Change data-target to #modalOffer and it works.

<style>
#myModal .modal-dialog { width: 95%;  } 
</style>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modalOffer">Open Modal</button>

<!-- Modal -->
<div id="modalOffer" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;
</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body" style="overflow:hidden;height:1%;">

    <div class="form-group col-sm-12">
    <label class="col-sm-2">Kraj:</label>
    <input type="text" class="col-sm-3">
    </div>

    <div class="form-group col-sm-12">
    <label class="col-sm-2">Datum ponudbe:</label>
    <input id="inputDateOffer" type="text" class="col-sm-3">
    </div>

    <div class="form-group col-sm-12">
    <label class="col-sm-2">Dokument velja do:</label>
    <input id="inputDokumentValidTo" type="text" class="col-sm-3">
    </div>


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

</div>

</div>
</div>

Upvotes: 1

Related Questions