Multiple input box in inline form - html

Question

I use the solution provide by #dippas here
Inline form make input text full width and responsive
My new request is how to put multiple input text and fill all the space.
I am aware that we can not use width with inline form like mention in bootstrap website
Requires custom widths Inputs, selects, and textareas are 100% wide by
default in Bootstrap. To use the inline form, you'll have to set a
width on the form controls used within. The default width of 100% as
all form elements gets when they got the class form-control didn't
apply if you use the form-inline class on your form.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.form-inline {
display: flex;
padding:5px !important;
}
.flex {
flex: 1;
display: flex !important
}
.flex input {
flex: 1 !important ;
padding-right:15px !important;
}
.form-inline .form-group {
padding-right:15px !important;
}
</style>
<div class="panel panel-primary">
<div class="panel-heading">
<h4><b>Search Options</b></h4>
</div>
<div class="panel-body">
<form class="form-inline">
<div class="form-group">
<div class="btn-group">
<button type="button"
class="btn btn-default dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>Account ID <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Account ID</li>
<li>Company Name</li>
<li>Account Type</li>
<li>Marketplaces</li>
</ul>
</div>
</div>
<div class="row" style="display: block">
<div class="form-group flex" >
<input class="form-control" type="text" value="" id="filter_id" placeholder="Put your filter here">
<button type="button" class="btn btn-danger"> Fermer </button>
</div>
<div class="form-group flex">
<input class="form-control" type="text" value="" id="filter_id" placeholder="Put your filter here">
<button type="button" class="btn btn-danger"> Fermer </button>
</div>
<div class="form-group flex">
<input class="form-control" type="text" value="" id="filter_id" placeholder="Put your filter here">
<button type="button" class="btn btn-danger"> Fermer </button>
</div>
</div>
</form>
</div>
</div>

Answer 1

you need to add display:flex to .row, because now the parent of .flex is .row
/* !important only for this snippet */
.form-inline {
display: flex;
padding: 5px !important;
}
.row {
display: flex;
flex-wrap: wrap;
flex: 1
}
.flex {
flex: 0 100%;
display: flex !important
}
.flex input {
flex: 1 !important;
padding-right: 15px !important;
}
.form-inline .form-group {
padding-right: 15px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="panel panel-primary">
<div class="panel-heading">
<h4><b>Search Options</b></h4>
</div>
<div class="panel-body">
<form class="form-inline">
<div class="form-group">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account ID <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Account ID</li>
<li>Company Name</li>
<li>Account Type</li>
<li>Marketplaces</li>
</ul>
</div>
</div>
<div class="row">
<div class="form-group flex">
<input class="form-control" type="text" value="" id="filter_id" placeholder="Put your filter here">
<button type="button" class="btn btn-danger"> Fermer </button>
</div>
<div class="form-group flex">
<input class="form-control" type="text" value="" id="filter_id" placeholder="Put your filter here">
<button type="button" class="btn btn-danger"> Fermer </button>
</div>
<div class="form-group flex">
<input class="form-control" type="text" value="" id="filter_id" placeholder="Put your filter here">
<button type="button" class="btn btn-danger"> Fermer </button>
</div>
</div>
</form>
</div>
</div>