Inline input elements doesn't use entire width

Question

I'm trying to get 3 elements next to each other, using the entire width of the form. See screenshot and Bootstrap 3 code below.

Anyone know why the input elements won't adjust to fit the entire width?

Edit: Added additional code. Some more text also since I'm not allowed to post mostly code? Some more text also since I'm not allowed to post mostly code? Some more text also since I'm not allowed to post mostly code? Some more text also since I'm not allowed to post mostly code?

   

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal" role="form" method="post" action="mmm.php">

<div class='container-fluid' style="padding: 8px;">
<div class='row'>
    <div class='col-sm-12'>
        <div class="input-group form-group">
            <select id="ID" name="ID" class="form-control selectpicker"
                    data-live-search="true"
                    style="">
<option value='559'>(559)</option>

            </select>

            <span class="input-group-btn">
            <button id="GPS" class="btn btn-primary" type="button" onclick="loadCoordinates()">
                <span id="icon" class="glyphicon glyphicon-screenshot"></span></button>
            </span>

        </div>
    </div>
</div>


<div class='row'>
    <div class='col-sm-12'>
        <div class="form-group">
            <label for="dato" class="">When:</label>
            <div class='input-group'>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                <input type='text'
                       value='10.10.2017'
                       name="dato"
                       class="form-control"
                       id="datoPicker"
                       readonly/>

            </div>
        </div>
    </div>
</div>

<div class='row'>
    <div class='col-sm-12'>
        <div class="form-group">
            <div class="col-xs-4 form-group">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                    <input type='text'
                           value='07:00'
                           name="fraKlokken"
                           class="form-control fraTimepicker"
                           id="fraKlokkenPicker"
                           readonly>
                </div>
            </div>
            <div class="col-xs-4 form-group">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-arrow-right"></span></span>
                    <input type='text'
                           value='15:00'
                           name="tilKlokken"
                           class="form-control tilTimepicker"
                           id="tilKlokkenPicker"
                           readonly>
                </div>
            </div>
            <div class="col-xs-4">
                <select class="form-control" id="lunchSelect"  name="lunsj">
                  <option value="0">No lunch</option>
                  <option value="30">30m lunch</option>
                  <option value="60">60m lunch</option>
                </select>
            </div>
        </div>
    </div>
</div>



<div class='row'>
    <div class='col-sm-12'>
        <div class="form-group">
            <label class="control-label" for="kommentar">Comment:</label>

                <textarea class="form-control input" id="kommentar" name="kommentar"
                          placeholder="."
                          ></textarea>
        </div>
    </div>
</div>



<div class='row '>
    <div class='col-sm-12'>
        <div class="form-group">
            <label for="timearbeid">m,n,mn</label>
            <div class="btn-group" data-toggle="buttons">
                <label class="btn">
                    <input type="radio"
                           value="1"
                           required ><i
                            class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> Yes</span>
                </label>

                <label class="btn">
                    <input type="radio" class=""
                           value="0" >
                    <i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> No</span>
                </label>
            </div>
        </div>
    </div>
</div>

I see the problem is somewhere else, I'll try to post the rest of the code. — JamesB
– JamesB, Commented Oct 10, 2017 at 10:54

Sanchit Patiyal · Accepted Answer · 2017-10-10 11:11:47Z

You are using form group class twice. Removing it from the inner class will do the trick

   

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal" role="form" method="post" action="mmm.php">

<div class='container-fluid' style="padding: 8px;">
<div class='row'>
    <div class='col-sm-12'>
        <div class="input-group form-group">
            <select id="ID" name="ID" class="form-control selectpicker"
                    data-live-search="true"
                    style="">
<option value='559'>(559)</option>

            </select>

            <span class="input-group-btn">
            <button id="GPS" class="btn btn-primary" type="button" onclick="loadCoordinates()">
                <span id="icon" class="glyphicon glyphicon-screenshot"></span></button>
            </span>

        </div>
    </div>
</div>


<div class='row'>
    <div class='col-sm-12'>
        <div class="form-group">
            <label for="dato" class="">When:</label>
            <div class='input-group'>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                <input type='text'
                       value='10.10.2017'
                       name="dato"
                       class="form-control"
                       id="datoPicker"
                       readonly/>

            </div>
        </div>
    </div>
</div>

<div class='row'>
    <div class='col-sm-12'>
        <div class="form-group">
            <div class="col-xs-4">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                    <input type='text'
                           value='07:00'
                           name="fraKlokken"
                           class="form-control fraTimepicker"
                           id="fraKlokkenPicker"
                           readonly>
                </div>
            </div>
            <div class="col-xs-4">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-arrow-right"></span></span>
                    <input type='text'
                           value='15:00'
                           name="tilKlokken"
                           class="form-control tilTimepicker"
                           id="tilKlokkenPicker"
                           readonly>
                </div>
            </div>
            <div class="col-xs-4">
                <select class="form-control" id="lunchSelect"  name="lunsj">
                  <option value="0">No lunch</option>
                  <option value="30">30m lunch</option>
                  <option value="60">60m lunch</option>
                </select>
            </div>
        </div>
    </div>
</div>



<div class='row'>
    <div class='col-sm-12'>
        <div class="form-group">
            <label class="control-label" for="kommentar">Comment:</label>

                <textarea class="form-control input" id="kommentar" name="kommentar"
                          placeholder="."
                          ></textarea>
        </div>
    </div>
</div>



<div class='row '>
    <div class='col-sm-12'>
        <div class="form-group">
            <label for="timearbeid">m,n,mn</label>
            <div class="btn-group" data-toggle="buttons">
                <label class="btn">
                    <input type="radio"
                           value="1"
                           required ><i
                            class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> Yes</span>
                </label>

                <label class="btn">
                    <input type="radio" class=""
                           value="0" >
                    <i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> No</span>
                </label>
            </div>
        </div>
    </div>
</div>

Another thing you will notice in the snippet above that there is still some space at each side and that is due to use of class='col-sm-12' along with class='col-xs-4'. Removing that also will give you the alignment with the 10.10.2017 value input field.

   

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal" role="form" method="post" action="mmm.php">

<div class='container-fluid' style="padding: 8px;">
<div class='row'>
    <div class='col-sm-12'>
        <div class="input-group form-group">
            <select id="ID" name="ID" class="form-control selectpicker"
                    data-live-search="true"
                    style="">
<option value='559'>(559)</option>

            </select>

            <span class="input-group-btn">
            <button id="GPS" class="btn btn-primary" type="button" onclick="loadCoordinates()">
                <span id="icon" class="glyphicon glyphicon-screenshot"></span></button>
            </span>

        </div>
    </div>
</div>


<div class='row'>
    <div class='col-sm-12'>
        <div class="form-group">
            <label for="dato" class="">When:</label>
            <div class='input-group'>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                <input type='text'
                       value='10.10.2017'
                       name="dato"
                       class="form-control"
                       id="datoPicker"
                       readonly/>

            </div>
        </div>
    </div>
</div>

<div class='row'>
   
        <div class="form-group">
            <div class="col-xs-4">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                    <input type='text'
                           value='07:00'
                           name="fraKlokken"
                           class="form-control fraTimepicker"
                           id="fraKlokkenPicker"
                           readonly>
                </div>
            </div>
            <div class="col-xs-4">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-arrow-right"></span></span>
                    <input type='text'
                           value='15:00'
                           name="tilKlokken"
                           class="form-control tilTimepicker"
                           id="tilKlokkenPicker"
                           readonly>
                </div>
            </div>
            <div class="col-xs-4">
                <select class="form-control" id="lunchSelect"  name="lunsj">
                  <option value="0">No lunch</option>
                  <option value="30">30m lunch</option>
                  <option value="60">60m lunch</option>
                </select>
            </div>
        </div>
   
</div>



<div class='row'>
    <div class='col-sm-12'>
        <div class="form-group">
            <label class="control-label" for="kommentar">Comment:</label>

                <textarea class="form-control input" id="kommentar" name="kommentar"
                          placeholder="."
                          ></textarea>
        </div>
    </div>
</div>



<div class='row '>
    <div class='col-sm-12'>
        <div class="form-group">
            <label for="timearbeid">m,n,mn</label>
            <div class="btn-group" data-toggle="buttons">
                <label class="btn">
                    <input type="radio"
                           value="1"
                           required ><i
                            class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> Yes</span>
                </label>

                <label class="btn">
                    <input type="radio" class=""
                           value="0" >
                    <i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> No</span>
                </label>
            </div>
        </div>
    </div>
</div>

Thanks, but I'm not 100% satisfied with this solution. As you can see there's a lot of unnessesary spacing between the elements. I want them all to be right next to each other and and left and right aligned with the other elements. Now it's kind of center alligned?
Thanks! That looks better. Any idea how to reduce the spacing?
That can be done by providing padding in inline css to col-xs-4 class. By default padding-left and padding-right of this class is 15px. You just need to reduce that.

Minal Chauhan · Accepted Answer · 2017-10-10 11:22:23Z

Why are used form-group class with columns?

Just remove that and update the your code which was below:

.no-left-padding{
  padding-left: 0 !important;
}
.no-right-padding{
  padding-right: 0 !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal" role="form" method="post" action="mmm.php">
    <div class='container-fluid' style="padding: 8px;">
        <div class='row'>
            <div class='col-sm-12'>
                <div class="input-group">
                    <select id="ID" name="ID" class="form-control selectpicker" data-live-search="true" style="">
                        <option value='559'>(559)</option>
                    </select>
                    <span class="input-group-btn">
            <button id="GPS" class="btn btn-primary" type="button" onclick="loadCoordinates()">
                <span id="icon" class="glyphicon glyphicon-screenshot"></span></button>
                    </span>
                </div>
            </div>
        </div>
        <div class='row'>
            <div class='col-sm-12'>
                <div class="form-group">
                    <label class='col-sm-12' for="dato" class="">When:</label>
                    <div class='col-sm-12'>
                    <div class='input-group'>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        <input type='text' value='10.10.2017' name="dato" class="form-control" id="datoPicker" readonly/>
                    </div>
                    </div>
                </div>
            </div>
        </div>
        <div class='row'>
            <div class='col-sm-12'>
                <div class="form-group">
                    <div class="col-xs-4 no-right-padding">
                        <div class="input-group">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                            <input type='text' value='07:00' name="fraKlokken" class="form-control fraTimepicker" id="fraKlokkenPicker" readonly>
                        </div>
                    </div>
                    <div class="col-xs-4 no-left-padding">
                        <div class="input-group">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-arrow-right"></span></span>
                            <input type='text' value='15:00' name="tilKlokken" class="form-control tilTimepicker" id="tilKlokkenPicker" readonly>
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <select class="form-control" id="lunchSelect" name="lunsj">
                            <option value="0">No lunch</option>
                            <option value="30">30m lunch</option>
                            <option value="60">60m lunch</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class='row'>
            <div class='col-sm-12'>
                <div class="form-group">
                    <label class="col-sm-12" for="kommentar">Comment:</label>
                    <div class="col-sm-12">
                      <textarea class="form-control input" id="kommentar" name="kommentar" placeholder="."></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class='row'>
            <div class='col-sm-12'>
                <div class="form-group">
                    <label class="col-sm-12" for="timearbeid">m,n,mn</label>
                    <div class="col-sm-12">
                      <div class="btn-group" data-toggle="buttons">
                          <label class="btn">
                              <input type="radio" value="1" required><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> Yes</span>
                          </label>
                          <label class="btn">
                              <input type="radio" class="" value="0">
                              <i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> No</span>
                          </label>
                      </div>
                    </div>
                </div>
            </div>
        </div>

Raptus · Accepted Answer · 2017-10-10 10:56:34Z

I would read the docs on this section http://bootstrapdocs.com/v3.0.3/docs/css/#forms-horizontal

The layout is stated as such...

<div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>

Your code has been written as this...

<div class="col-xs-4 form-group">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-arrow-right"></span></span>
                    <input type='text' value='15:00' name="tilKlokken" class="form-control tilTimepicker" readonly>
                </div>
            </div>

After giving it the correct layout and classes, you should be all good to go.

Nick Artymiak · Accepted Answer · 2017-10-10 11:22:47Z

In this section, you have 3 <div class='col-xs-4 form-group'> wrapped in a <div class='col-sm-12'> :

<div class='row'>
    <div class='col-sm-12'> 
        <div class="form-group">
            <div class="col-xs-4 form-group">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                    <input type='text'
                           value='07:00'
                           name="fraKlokken"
                           class="form-control fraTimepicker"
                           id="fraKlokkenPicker"
                           readonly>
                </div>
            </div>
            <div class="col-xs-4 form-group">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-arrow-right"></span></span>
                    <input type='text'
                           value='15:00'
                           name="tilKlokken"
                           class="form-control tilTimepicker"
                           id="tilKlokkenPicker"
                           readonly>
                </div>
            </div>
            <div class="col-xs-4">
                <select class="form-control" id="lunchSelect"  name="lunsj">
                  <option value="0">No lunch</option>
                  <option value="30">30m lunch</option>
                  <option value="60">60m lunch</option>
                </select>
            </div>
        </div>
    </div>
</div>

I'd try to remove the <div class='col-sm-12'>. Here's an example:

<div class='row'>
      <!--<div class='col-sm-12'> REMOVE -->
        <div class="form-group">
            <div class="col-xs-4 form-group">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                    <input type='text'
                           value='07:00'
                           name="fraKlokken"
                           class="form-control fraTimepicker"
                           id="fraKlokkenPicker"
                           readonly>
                </div>
            </div>
            <div class="col-xs-4 form-group">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-arrow-right"></span></span>
                    <input type='text'
                           value='15:00'
                           name="tilKlokken"
                           class="form-control tilTimepicker"
                           id="tilKlokkenPicker"
                           readonly>
                </div>
            </div>
            <div class="col-xs-4">
                <select class="form-control" id="lunchSelect"  name="lunsj">
                  <option value="0">No lunch</option>
                  <option value="30">30m lunch</option>
                  <option value="60">60m lunch</option>
                </select>
            </div>
        </div>
<!--</div> REMOVE -->
</div>

And here's a fiddle: https://jsfiddle.net/vy12eLxa/

Collectives™ on Stack Overflow

Inline input elements doesn't use entire width

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related