CODEWITHSUNDEEP
csstwitter-bootstrap
user1447679
user1447679

Reputation: 3270

Make bootstrap input on horizontal form absolute positioned without affecting width?

I'm using a horizontal bootstrap form and need a <input> absolute positioned for reasons too boring to explain. However, I'm battling getting it the same width as it used to be prior to absolute. So in the linked example, I want the password field to be the same width as the email field.

<form class="form-horizontal" style="max-width: 400px">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10"> 
      <input type="password" class="form-control abs" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>

CSS:

.abs {
  position: absolute;
  width: inherit; /* 100%; */
}

How can I modify this fiddle?

jsFiddle

Upvotes: 0

Views: 901

Answers (3)

Mat
Mat

Reputation: 1007

There is one way to do it, although it does require a few divs. The idea is to not apply the position: absolute property to the input element itself but to a container which has the same structure as the form. This way, we can be certain they will both always share the same size.

.password-container {
  width: 100%;
  position: absolute;
  padding-left: 15px;
}
.password-container > .form-horizontal {
  max-width: 400px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-horizontal" style="max-width: 400px">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="password-container">
      <div class="form-horizontal">
        <div class="form-group">
          <div class="col-sm-10 col-md-offset-2"> 
            <input type="password" class="form-control abs" id="pwd" placeholder="Enter password">
          </div>
        <div>
      </div>
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>

Since it only uses divs semantics is not affected.

Upvotes: 1

user1447679
user1447679

Reputation: 3270

Using Louis' answer as inspiration, I think I was able to simplify this a little bit. 

.abs-container {
  position: absolute;
  width: 100%;
  padding-right: 30px;
}

Seems to work fine regardless of width of the form as well.

https://jsfiddle.net/8aco78L7/4/

Upvotes: 1

Gerard
Gerard

Reputation: 15796

.col-sm-10 {
  position: relative;
}

input {
  max-width: 400px;
}

.abs {
  position: absolute;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-horizontal" style="max-width: 400px">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10">
      <input type="password" class="form-control abs" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>

Upvotes: 0

Related Questions