CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3forms
yaylitzis
yaylitzis

Reputation: 5534

Add border to an inline input

I have three inputs in one line, and I want to add only to the 3rd input a border, like a box. I add a class for the 3rd input to adjust the border with no success.

.valid-version {
  border: #0f7864;
  border-style: solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <label for="inputName" class="col-lg-2 col-sm-1 control-label">product</label>
  <div class="col-md-2 col-sm-2">
    <input type="text" class="form-control" name="product">
  </div>
  <label for="inputName" class="col-lg-1 col-sm-1 control-label">version</label>
  <div class="col-md-1 col-sm-2">
    <input type="text" class="form-control" name="version">
  </div>

  <div class="valid-version">
    <label for="inputName" class="col-lg-1 col-sm-1 two-lines control-label">Valid</label>
    <div class="col-lg-2 col-sm-3">
      <select class="form-control">
        <option>yes</option>
        <option>no</option>
      </select>
    </div>

  </div>
</div>

Go to full view (in order to have all the inputs in one line)

Upvotes: 0

Views: 1421

Answers (2)

Gleb Kemarsky
Gleb Kemarsky

Reputation: 10398

On the wide screen Bootstrap column becomes floating. Because of this the parent block decides that it is empty. And its height becomes zero.

So you need to add the overflow: hidden; property to the .valid-version class. This property causes the parent block to take the dimensions considering its floating children.

.valid-version {
  border: #0f7864;
  border-style: solid;
  overflow: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <label for="inputName" class="col-lg-2 col-sm-1 control-label">product</label>
  <div class="col-md-2 col-sm-2">
    <input type="text" class="form-control" name="product">
  </div>
  <label for="inputName" class="col-lg-1 col-sm-1 control-label">version</label>
  <div class="col-md-1 col-sm-2">
    <input type="text" class="form-control" name="version">
  </div>

  <div class="valid-version">
    <label for="inputName" class="col-lg-1 col-sm-1 two-lines control-label">Valid</label>
    <div class="col-lg-2 col-sm-3">
      <select class="form-control">
        <option>yes</option>
        <option>no</option>
      </select>
    </div>

  </div>
</div>

Upvotes: 0

Mukesh Ram
Mukesh Ram

Reputation: 6328

Add select in your class because you added css in main div of select

.valid-version select{
  border: #0f7864;
  border-style: solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <label for="inputName" class="col-lg-2 col-sm-1 control-label">product</label>
  <div class="col-md-2 col-sm-2">
    <input type="text" class="form-control" name="product">
  </div>
  <label for="inputName" class="col-lg-1 col-sm-1 control-label">version</label>
  <div class="col-md-1 col-sm-2">
    <input type="text" class="form-control" name="version">
  </div>

  <div class="valid-version">
    <label for="inputName" class="col-lg-1 col-sm-1 two-lines control-label">Valid</label>
    <div class="col-lg-2 col-sm-3">
      <select class="form-control">
        <option>yes</option>
        <option>no</option>
      </select>
    </div>

  </div>
</div>

Upvotes: 1

Related Questions