How to make elements in single line? - css

Question

I use bootstrap in my project.
The width of the area is 350px.
I have this html elements:
<form class="form-inline">
<div class="input-group input-group-sm col-xs-5" >
<input type="text" class="form-control" placeholder="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
<div class="input-group input-group-sm">
<select class="form-control" ng-model="" ng-options="">
<option value="">- authority-</option>
</select>
</div>
</form>
Here is plunker.
How can I make search box and dropdown list in one line.

Answer 1

You don't need css to fix this, you can do it with bootstrap styles.
Wrap the form in a 12 wide container (col-lg-12) and wrap each input in a 6 wide container (col-lg-6). (For simplicities sake I only used desktop size in the example)
This would look like:
<div class="col-lg-12">
<!-- start form -->
<div class="col-lg-6">
<!-- input -->
</div>
<div class="col-lg-6">
<!-- input -->
</div>
<!-- end form -->
</div>
That way bootstrap will cut the screen in half (12 / 2 = 6) and put the input box in there.
To make it work with your code have a look at this fiddle
Note I added col-lg, col-md, col-sm and col-xs to make them appear on the same line regardless of screen size.
EDIT:
To put all of this in another panel use:
<div class="panel panel-default">
<div class="panel-body">
<!-- form row -->
</div>
</div>
Working fiddle: http://jsfiddle.net/92z54z04/596/

Answer 2

.input-group are table displayed, so:
.input-group {
display: inline-table;
}
will solve your problem.
JSFiddle

Answer 3

<form class="form-inline">
<div class="form-group" >
<input type="text" placeholder="search"/>
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
<select class="form-group" ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
<option value="">- authority-</option>
</select>
</form>

Answer 4

you can do it with bootstrap easily by using col-xs-6 property
here is the working code:
<form class="form-inline">
<div class="col-xs-6">
<div class="input-group input-group-sm" >
<input type="text" class="form-control" placeholder="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="input-group input-group-sm">
<select class="form-control" ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
<option value="">- authority-</option>
</select>
</div>
</div>
</form>

Answer 5

You could extend bootstrap to allow a select element inside your input group.
This depends on your usecase if it is intuitive, but I think this may be a good looking option to evaluate.
You basically copy and paste some of bootstraps style to make the select element fit into a input group.
If you have control over the sass, less files, you may be able to do it cleaner than I did.
.input-group-select:not(:first-child):not(:last-child) {
border-radius: 0;
}
.input-group-select {
position: relative;
width: 1%;
white-space: nowrap;
vertical-align: middle;
display: table-cell;
}
.input-group-select>select {
border-color: #ccc;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 7px;
padding-bottom: 7px;
border-radius: 0;
border-left-width: 0;
}
.input-group-btn:not(:first-child):not(:last-child)>.btn {
border-radius: 0;
border-left-width: 0;
}
.input-group-select:last-child>select {
border-radius: 0 3px 3px 0;
}
.input-group-sm>.input-group-select>select {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
<div class="input-group input-group-sm col-xs-5">
<input type="text" class="form-control" placeholder="search">
<div class="input-group-select">
<select ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
<option value="">- authority-</option>
</select>
</div>
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
<div class="input-group input-group-sm col-xs-5">
<input type="text" class="form-control" placeholder="search">
<div class="input-group-select">
<select ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
<option value="">- authority-</option>
</select>
</div>
</div>
<div class="input-group input-group-sm col-xs-5">
<input type="text" class="form-control" placeholder="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
<div class="input-group-select">
<select class="select" ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
<option value="">- authority-</option>
</select>
</div>
</div>
</form>

Answer 6

Just use style in div:
display:inline-table;
http://jsfiddle.net/ankitg1602/mqnrmLjb/1/