CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Andi
Andi

Reputation: 541

Bootstrap: Modal with horizontal form and input addon does not layout properly

Rows with inputs seam wider then other rows (example is a button).

http://jsfiddle.net/ujnw8x4p/2/

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container">
  <div tabindex="-1" role="dialog" class="modal" size="lg" index="0" style="z-index: 1050; display: block;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"><span aria-hidden="true">×</span></button>
                <h3 class="modal-title">Bootstrap Modal with horizontal form and input addon</h3>
            </div>
            <div class="modal-body ng-scope">
                
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="inputLinkPp" class="hidden-xs col-sm-3 control-label">Website</label>
                        <div class="input-group col-sm-9 xs-margin">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                            <input type="text" class="form-control" id="inputLinkPp" placeholder="link to your page"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <p class="col-sm-offset-3 col-sm-9" style="text-align: right">
                            <button type="button" class="btn btn-success">
                                <i class="glyphicon glyphicon-link"></i> Create</button>
                        </p>
                    </div>                    
                </form>
                
            </div>
        </div>
    </div>
    </div>
</div>
</body>

It seams like the modals padding is not respected by the input-group-addon. But maybe i am not supposed to us input-groups in horizontal forms?

Any ideas on it?

Upvotes: 0

Views: 5334

Answers (2)

Tim Lewis
Tim Lewis

Reputation: 29298

I came up with this using only the Bootstrap classes. It looks like it accomplishes what you need, the only issue is the vertical alignment on the <label> doesn't match up with the <input>. Would need some custom css to override that. Here's the code:

<div class="container">
  <div tabindex="-1" role="dialog" class="modal" size="lg" index="0" style="z-index: 1050; display: block;">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close"><span aria-hidden="true">×</span></button>
          <h3 class="modal-title">Bootstrap Modal with horizontal form and input addon</h3>
        </div>
        <div class="modal-body ng-scope">
          <div class="row">
            <div class="col-xs-2 text-right" >
              <label>Website</label>
            </div>
            <div class="col-xs-10">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                <input type="text" class="form-control" id="inputLinkPp" placeholder="link to your page"/>
              </div>
            </div>
          </div>
          <br/>
          <div class="row">
            <div class="col-xs-12 text-right">
              <div class="form-group">
                <button type="button" class="btn btn-success">
                  <i class="glyphicon glyphicon-link"></i> Create</button>
              </div> 
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Oh and I accidentally removed the <form> tag from it, so that would need to be added back in. Here's a link to the Bootply:

Bootply

Hope that helps!

Upvotes: 3

Andi
Andi

Reputation: 541

Finally i found a working solution. Not sure though whether its the correct way or not. Added this in my style sheet:

.form-horizontal .input-group {
    padding-left: 15px;
    padding-right: 15px;
}

http://jsfiddle.net/ujnw8x4p/3/

Upvotes: 0

Related Questions