CODEWITHSUNDEEP
htmlcss
John Doe
John Doe

Reputation: 3243

How to add a button to my page (Laying out the button on HTML)

I would like to add a button to the right of the zip code without effecting the size of the field.

Any suggestions would be appreciated.

My original markup was (which is what picture matches):

<div class="col-md-6 col-md-offset-3 text-center" style="border:solid">
   // All my fields...
</div>

I then tried:

<div class="col-md-3"></div>
<div class="col-md-6">
   // All my fields using form-group
</div>
            <div class="col-md-3">
            <div class="form-group"></div>
            <div class="form-group"></div>
            <div class="form-group"></div>
            <div class="form-group"></div>
            <div class="form-group"></div>
            <div class="form-group"></div>
            <div class="form-group">
                @(Html.Kendo().Button()
                        .Name("btnLookup")
                        .Content("Lookup")
                )
            </div>
        </div>

However it placed the button to the top of the form.

Before I added the button the page looks like:

enter image description here

Upvotes: 0

Views: 46

Answers (1)

Pjetr
Pjetr

Reputation: 1382

Have you tried adding them via display: absolute?

.form-group {
  position: relative;
}
.lookup {
  position: absolute;
  top: 0;
  right: -50px;
  width: 40px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-3">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Name">
      </div>
      <div class="form-group">
        <input type="email" class="form-control" placeholder="Email">
      </div>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Postal">
        <button class="btn btn-primary lookup"><i class="glyphicon glyphicon-search"></i>
</button>
      </div>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="City">
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions