CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapbootstrap-modal
Jeremy Daniel Gregorio
Jeremy Daniel Gregorio

Reputation: 137

Bootstrap modal grid layout missing padding

I've got a modal with a grid layout because I put the labels above each field. That mostly works but they fill the entire Modal running right up to the left/right edges. I don't seem to have that trouble with the demo from the bootstrap site but those are text fields instead of and tags. I played around with the form-control class but that seemed to make matters worse. Is there a class I'm missing?

Here's a JSfiddle of my code: https://jsfiddle.net/jdnag6zx/

<!DOCTYPE html>
<html>
<!--https://jsfiddle.net/jdnag6zx/-->
    <head>
        <title>Bootstrap 3</title>
    </head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <body>      
        <a href="#dates" class = "btn btn-default" data-toggle="modal">Dates</a>

        <div id="dates" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                <form class="form-horizontal">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4>New Map</h4>
                    </div>
                    <div class="modal-body">

                        <div class="row">
                            <label for="column-type" class="col-lg-4 control-label">Date</label>
                            <label for="column-type" class="col-lg-4 control-label">Separator</label>
                            <label for="column-type" class="col-lg-4 control-label">Example</label>             
                        </div>

                        <div class="row">
                                <select class="col-lg-4" id="date-format" >
                                    <option>1/1/2017</option>
                                    <option>2/1/2017</option>
                                    <option>3/1/2017</option>                   
                                </select>
                                <select class="col-lg-4" id="date-separator">
                                    <option>/</option>
                                    <option>-</option>
                                </select>
                                <input class="col-lg-4" id="date-example" value="1-1-2017"></input>
                        </div>


                    </div>
                    <div class="modal-footer">

                        <a href="#" class="btn btn-primary pull-right" data-dismiss="modal">Close</a>
                        <a href="#" class="btn btn-success fcvt-btn-save"  ng-click="onSubmit()">Continue</a>
                    </div>
                </form>
                </div>
            </div>
        </div>          

    <body>

            <script  src="https://code.jquery.com/jquery-3.1.1.js"
                integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
                crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</html>

Upvotes: 0

Views: 694

Answers (3)

HirenMangukiya
HirenMangukiya

Reputation: 655

Use bootstrap table instead of cols check this fiddle

Upvotes: 0

LXhelili
LXhelili

Reputation: 980

This is a better approach! 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<a href="#dates" class="btn btn-default" data-toggle="modal">Dates</a>

<div id="dates" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <form class="form-horizontal">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4>New Map</h4>
        </div>
        <div class="modal-body">

          <div class="row">
            <div class="col-sm-4">
              <label for="column-type" class="control-label">Date</label>
              <select class="form-control" id="date-format">
                <option>1/1/2017</option>
                <option>2/1/2017</option>
                <option>3/1/2017</option>
              </select>
            </div>
            <div class="col-sm-4">
              <label for="column-type" class="control-label">Separator</label>
              <select class="form-control" id="date-separator">
                <option>/</option>
                <option>-</option>
              </select>
            </div>
            <div class="col-sm-4">
              <label for="column-type" class="control-label">Example</label>
              <input class="form-control" id="date-example" value="1-1-2017" />
            </div>

          </div>


        </div>
        <div class="modal-footer">

          <a href="#" class="btn btn-primary pull-right" data-dismiss="modal">Close</a>
          <a href="#" class="btn btn-success fcvt-btn-save" ng-click="onSubmit()">Continue</a>
        </div>
      </form>
    </div>
  </div>
</div>

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53709

Remove the .row classes from .modal-body https://jsfiddle.net/jdnag6zx/1/

Upvotes: 1

Related Questions