Twitter Bootstrap Question posted in

Twitter bootstrap input group – max width

In bootstrap input groups out of the box has a width of 100% but what i would like to achieve is to set them with a fixed max-width of 100px. But then the right hand side does not stretch the full width for my dropdown.

Example code: http://plnkr.co/edit/D0N3SKvT5U0uVmYyLw0O?p=preview

<style>
.input-group-addon {
    width: 100px;
}
</style>

...

<div class="form-group">
  <div class="input-group">
    <div class="input-group-addon">Name</div>
    <input type="text" class="form-control" id="name" value="Please enter your name">
  </div>
</div>
<div class="form-group">
  <div class="input-group">
    <div class="input-group-addon">Age</div>
    <select class="form-control" id="age">
    </select>
  </div>
</div>

Anyone know how to do this?

Tags:

2

Answers


  1. 0 
     <style>
    .input-group-addon {
  }
  </style>

</head>

<body>

  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">Name</div>
      <input type="text" class="form-control" id="name" value="Please enter your name">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">Age</div>
      <select class="form-control" id="age">
      </select>
    </div>
  </div>

</body>

    I am not so sure whether you are looking for something like this Plunker.

    hope it helps you.

    Login or Signup to reply.
  2. 0

    try this it will help you

    change the style to

    <style>
.input-group-addon { width: 100px; } 
.input-group { width: 100%; }
</style>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search