Laravel- retrieve old values textbox in create form - css

I need your help guys, I've created a form for creating Pay Bulletin and a form for editing. What i need is this:
Once i select emplyee_id the other textfield related popup with old data from DB if they are already entered; if not, i give them values and submit.
I am wondering how this can be done in Laravel??
Here is the code create.blade.php:
<form method="post" action="{{url('employeBultinDetails')}}">
{{csrf_field()}}
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<label for="paie_id">Mois du paie:</label>
<select id="paie_id" name="paie_id" class="form-control">
#foreach($paies as $p)
<option value="{{$p->id}}">{{$p->mois}} - {{$p->annee}}</option>
#endforeach
</select>
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<label for="employe_id"> Employee:</label>
<select id="employe_id" name="employe_id" class="form-control">
<option value="">Selectionner l'employé...</option>
#foreach($employes as $emp)
<option value="{{$emp->id}}">{{$emp->nni}} : {{$emp->nomComplet}}</option>
#endforeach
</select>
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<table>
<tr>
<th >Rubrique:</th>
<th >Montant:</th>
</tr>
#foreach($rubriques as $rub)
<tr>
<td>{{$rub->libelle}}</td>
<td>
<input type="text" class="form-control" name="montant[{{$rub->id}}]">
</td>
</tr>
#endforeach
</table>
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<button type="submit" class="btn btn-success" style="margin-left:38px">Enregistrer</button>
</div>
</div>
</form>
#endsection

Try this code:
<form method="post" action="{{url('employeBultinDetails')}}">
{{csrf_field()}}
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<label for="paie_id">Mois du paie:</label>
<select id="paie_id" name="paie_id" class="form-control">
#foreach($paies as $p)
<option value="{{$p->id}}">{{$p->mois}} - {{$p->annee}}</option>
#endforeach
</select>
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<label for="employe_id"> Employee:</label>
<select id="employe_id" name="employe_id" class="form-control">
<option value="">Selectionner l'employé...</option>
#foreach($employes as $emp)
<option value="{{$emp->id}}">{{$emp->nni}} : {{$emp->nomComplet}}</option>
#endforeach
</select>
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<table>
<tr>
<th >Rubrique:</th>
<th >Montant:</th>
</tr>
#foreach($rubriques as $field => $rub)
<tr>
<td>{{$rub->libelle}}</td>
<td>
<input type="text" class="form-control" name="montant[{{$rub->id}}]" value="montant[{{old($field)}}]">
</td>
</tr>
#endforeach
</table>
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<button type="submit" class="btn btn-success" style="margin-left:38px">Enregistrer</button>
</div>
</div>
</form>
#endsection

Related

How to center Bootstrap form

I have this form:
<form style="margin-top:20px">
<div class="row form-group">
<div class="col-lg-3">
<label for="exampleInputEmail1">Original Amount</label>
<div class="input-group">
<div class="input-group-addon" id="OriginalAmountAddon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
<div class="col-lg-3">
<label for="exampleInputEmail1">Billing Amount</label>
<div class="input-group">
<div class="input-group-addon" id="BillingAmountAddon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
</div>
<div class="row form-group">
<div class="col-lg-3">
<label for="exampleInputEmail1">Original Currency Code</label>
<div class="input-group">
<div class="input-group-addon" id="OriginalCurrencyAddon">$</div>
<select class="form-control" id="OriginalCurrencySelect">
<option value="$">USD</option>
<option value="€">EUR</option>
<option value="£">GBP</option>
<option value="₪">ILS</option>
</select>
</div>
</div>
<div class="col-lg-3">
<label for="exampleInputEmail1">Billing Currency Code</label>
<div class="input-group">
<div class="input-group-addon" id="BillingCurrencyAddon">$</div>
<select class="form-control" id="BillingCurrencySelect">
<option value="$">USD</option>
<option value="€">EUR</option>
<option value="£">GBP</option>
<option value="₪">ILS</option>
</select>
</div>
</div>
</div></form>
It looks like this:
I want the whole form in the center, how to? Do I need to center each row separately? And another question, I want for example, the "Supllier Account" field, to be in the same lenght of the two fields above, how to?
This is basically a duplicate of a question that's already been asked many times..
Center a column using Twitter Bootstrap 3
To specifically center your form you can use column offsets like this, but there are several different methods for centering:
<div class="container">
<div class="row">
<div class="col-md-9 col-md-offset-3 col-sm-10 col-sm-offset-1">
<form style="margin-top:20px">
<div class="row form-group">
<div class="col-md-4">
<label for="exampleInputEmail1">Original Amount</label>
<div class="input-group">
<div class="input-group-addon" id="OriginalAmountAddon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
<div class="col-md-4">
<label for="exampleInputEmail1">Billing Amount</label>
<div class="input-group">
<div class="input-group-addon" id="BillingAmountAddon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label for="exampleInputEmail1">Original Currency Code</label>
<div class="input-group">
<div class="input-group-addon" id="OriginalCurrencyAddon">$</div>
<select class="form-control" id="OriginalCurrencySelect">
<option value="$">USD</option>
<option value="€">EUR</option>
<option value="£">GBP</option>
<option value="₪">ILS</option>
</select>
</div>
</div>
<div class="col-md-4">
<label for="exampleInputEmail1">Billing Currency Code</label>
<div class="input-group">
<div class="input-group-addon" id="BillingCurrencyAddon">$</div>
<select class="form-control" id="BillingCurrencySelect">
<option value="$">USD</option>
<option value="€">EUR</option>
<option value="£">GBP</option>
<option value="₪">ILS</option>
</select>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
http://www.codeply.com/go/sRbuCfloDX
When i want to do it, margin: 0 auto; works quite fine

Bootstrap 3 unclickable inputs when col-xs class applyed

when I apply class col-xs-5 to my input it becomes un-clickable. And it only un-clickable on small screens, on big screens it works fine.
<form action="" method="POST" role="form" class="col-lg-12 clearfix" style="padding: 0px;">
<div class="form-group col-lg-1 col-lg-offset-0 col-md-1 col-md-offset-0 clearfix col-xs-5" style="padding: 0px;">
<label for="">Badrooms</label>
<select name="" id="input" class="form-control" style="padding: 2px 2px;" >
#foreach([1,2,3,4,5,6,7,8,9,10] as $arr)
<option value="">{{{$arr == 10 ? '10 >' : $arr}}}</option>
#endforeach
</select>
</div>
<div class="form-group col-lg-1 col-lg-offset-1 col-md-1 col-md-offset-1 clearfix col-xs-5 col-xs-offset-2" style="padding: 0px;">
<label for="">Bathrooms</label>
<select name="" id="input" class="form-control" style="padding: 2px 2px;" >
#foreach([1,2,3,4,5,6,7,8,9,10] as $arr)
<option value="">{{{$arr == 10 ? '10 >' : $arr}}}</option>
#endforeach
</select>
</div>
<div class="form-group col-lg-3 col-lg-offset-2 col-md-3 col-md-offset-2 clearfix" style="padding: 0px;">
<label for="">Type</label>
<select name="" id="input" class="form-control" style="padding: 2px 2px;" >
#foreach(ListingTypeDB::all() as $type)
<option value="{{{$type->id}}}">{{{$type->type_name}}}</option>
#endforeach
</select>
</div>
<div class="form-group col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2 clearfix" style="padding: 0px;">
<label for="">Rent/Buy</label>
<select name="" id="input" class="form-control" style="padding: 2px 2px;" >
<option value="1">Rent</option>
<option value="0">Buy</option>
</select>
</div>
</form>
I tryed to wrap my form-group snippets into .row it becomes clickable but it messes everything see the picture :
thank You.
You can edit your code as shown below
<div class="row">
<div class="form-group col-sm-6" >
<div class="form-group col-sm-5" >
<label for="">Badrooms</label>
</div>
<div class="form-group col-sm-7" >
<select name="" id="input" class="form-control" >
#foreach([1,2,3,4,5,6,7,8,9,10] as $arr)
<option value="">{{{$arr == 10 ? '10 >' : $arr}}}</option>
#endforeach
</select>
</div>
<div class="clearfix"></div>
</div>
<div class="form-group col-sm-6" >
<div class="form-group col-sm-5" >
<label for="">Bathrooms</label>
</div>
<div class="form-group col-sm-7" >
<select name="" id="input" class="form-control" >
#foreach([1,2,3,4,5,6,7,8,9,10] as $arr)
<option value="">{{{$arr == 10 ? '10 >' : $arr}}}</option>
#endforeach
</select>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6 " >
<div class="form-group col-sm-5" >
<label for="">Type</label>
</div>
<div class="form-group col-sm-7" >
<select name="" id="input" class="form-control" >
#foreach(ListingTypeDB::all() as $type)
<option value="{{{$type->id}}}">{{{$type->type_name}}}</option>
#endforeach
</select>
</div>
<div class="clearfix"></div>
</div>
<div class="form-group col-sm-6 ">
<div class="form-group col-sm-5" > <label for="">Rent/Buy</label></div>
<div class="form-group col-sm-7" > <select name="" id="input" class="form-control" >
<option value="1">Rent</option>
<option value="0">Buy</option>
</select></div>
<div class="clearfix"></div>
</div>
</div>
Using these css classes your clickable issue has been solved.I am attaching screenshot for your reference
For me it fixed by adding a:
<div class="clearfix visible-xs-block"></div>
After each col div. You can make it visible only for certain sizes, mine is only visible for xs. You can take a look at:
Bootstrap Grid responsive resets

Long gap between columns of bootstrap grid

I am facing long gap before fields. The first row is fine but the second row gives a long gap. Also all rows should look like the first row.Thanks
See the image to get the real view of the problem
Here is the code.
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
<form action="http://localhost/CI/Products/manageIpo" class="form-horizontal" role="form" enctype="multipart/form-data" method="post" accept-charset="utf-8">
<input type="hidden" name="dataid" value="">
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> POD Request Number </label>
<div class="col-lg-12">
<input type="text" name="ipo_request_no" value="" id="ipo_request_no" class="col-lg-10" placeholder="IPO Request Number" />
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-sm-12" for="form-field-1"> DN Number </label>
<div class="col-sm-12">
<input type="text" name="dn_number" value="" id="dn_number" class="col-lg-10" placeholder="DN Number" />
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Job Type</label>
<div class="col-lg-12">
<select id="ipo_type" class="col-lg-10"
name="ipo_type">
<option value="3">Transportation</option>
<option value="4">Reverse Transportation</option>
</select>
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Warehouse</label>
<div class="col-lg-12">
<select id="warehouse_id" class="col-lg-10"
name="warehouse_id">
<option value="1">Wah</option>
<option value="2">Warid</option>
<option value="3">Zong 1</option>
<option value="4">Test Approved</option>
<option value="5">Mobilnk</option>
</select>
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Vendor</label>
<div class="col-lg-12">
<select id="supplier_id" class="col-lg-10"
name="supplier_id">
<option value="1">Spine engineering</option>
</select>
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Project</label>
<div class="col-lg-12">
<select id="project_id_ipo" class="col-lg-
10" name="project_id">
<option value="1">CM Pak Wireless Optimization</option>
<option value="2">Mobilink Mega 2014 </option>
<option value="3">Mobilink Mega 2015 </option>
<option value="4">Mobilink Mega 2013 </option>
</select>
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Project Externel Code </label>
<div class="col-lg-12">
<input type="text" name="project_externel_code" value="" id="project_externel_code" class="col-lg-10" placeholder="Project Externel Code" disabled="disabled" />
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> RSD Date </label>
<div class="">
<div class="col-lg-12">
<div class="input-group">
<input class="form-control date-picker col-lg-10" name="rsd" id="id-date-picker-1" type="text" data-date-format="dd-mm-yyyy" />
<span class="input-group-addon">
<i class="fa fa-calendar bigger-110"></i>
</span>
</div>
</div>
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> RAD Date </label>
<div class="">
<div class="col-lg-12">
<div class="input-group col-lg-10">
<input class="form-control date-picker" name="rad" id="id-date-picker-2" type="text" data-date-format="dd-mm-yyyy" />
<span class="input-group-addon">
<i class="fa fa-calendar bigger-110"></i>
</span>
</div>
</div>
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Site</label>
<div class="col-lg-12">
<select id="site_id" class="col-lg-10"
name="site_id">
<option value="0">Select Site</option>
<option value="1">Site 2</option>
<option value="2">Site 1</option>
<option value="3">Site 3</option>
<option value="4">Site 4</option>
</select>
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Region</label>
<div class="col-lg-12">
<select id="region_id" class="col-lg-10"
name="region_id">
<option value="1">South</option>
<option value="2">East</option>
<option value="3">North</option>
<option value="4">West</option>
</select>
</div>
</div>
<div class="row col-lg-12">
<div class="form-group col-xs-6">
<label class="col-lg-12 center" for="form-field-2">POD Attachment</label>
<div class="col-lg-12">
<input multiple="" type="file" name="other_attach" id="id-input-file-5" />
</div>
</div>
<div class="form-group col-xs-6">
<label class="col-lg-12 center" for="form-field-1">Signed Attachment</label>
<div class="col-lg-12">
<input multiple="" type="file" name="signed_attach" id="id-input-file-4" />
</div>
</div>
</div>
<div class="modal-footer col-lg-12">
<button type="submit" class="btn btn-sm btn-primary">
<i class="ace-icon fa fa-check"></i>
Save </button>
</div>
</form> </div>
</div>
You should include a div with class="row" to set up those elements in a row,
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
Please refer Grid system in Bootstrap for more info.
Try out the below code,
<form action="http://localhost/CI/Products/manageIpo" class="form-horizontal" role="form" enctype="multipart/form-data"
method="post" accept-charset="utf-8">
<input type="hidden" name="dataid" value="">
<div class="row">
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> POD Request Number </label>
<div class="col-lg-12">
<input type="text" name="ipo_request_no" value="" id="ipo_request_no" class="col-lg-10"
placeholder="IPO Request Number">
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-sm-12" for="form-field-1"> DN Number </label>
<div class="col-sm-12">
<input type="text" name="dn_number" value="" id="dn_number" class="col-lg-10" placeholder="DN Number">
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Job Type</label>
<div class="col-lg-12">
<select id="ipo_type" class="col-lg-10" name="ipo_type">
<option value="3">Transportation</option>
<option value="4">Reverse Transportation</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Warehouse</label>
<div class="col-lg-12">
<select id="warehouse_id" class="col-lg-10" name="warehouse_id">
<option value="1">Wah</option>
<option value="2">Warid</option>
<option value="3">Zong 1</option>
<option value="4">Test Approved</option>
<option value="5">Mobilnk</option>
</select>
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Vendor</label>
<div class="col-lg-12">
<select id="supplier_id" class="col-lg-10" name="supplier_id">
<option value="1">Spine engineering</option>
</select>
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Project</label>
<div class="col-lg-12">
<select id="project_id_ipo" class="col-lg-
10" name="project_id">
<option value="1">CM Pak Wireless Optimization</option>
<option value="2">Mobilink Mega 2014</option>
<option value="3">Mobilink Mega 2015</option>
<option value="4">Mobilink Mega 2013</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Project Externel Code </label>
<div class="col-lg-12">
<input type="text" name="project_externel_code" value="" id="project_externel_code" class="col-lg-10"
placeholder="Project Externel Code" disabled="disabled">
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> RSD Date </label>
<div class="">
<div class="col-lg-12">
<div class="input-group">
<input class="form-control date-picker col-lg-10" name="rsd" id="id-date-picker-1" type="text"
data-date-format="dd-mm-yyyy">
<span class="input-group-addon">
<i class="fa fa-calendar bigger-110"></i>
</span>
</div>
</div>
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> RAD Date </label>
<div class="">
<div class="col-lg-12">
<div class="input-group col-lg-10">
<input class="form-control date-picker" name="rad" id="id-date-picker-2" type="text"
data-date-format="dd-mm-yyyy">
<span class="input-group-addon">
<i class="fa fa-calendar bigger-110"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Site</label>
<div class="col-lg-12">
<select id="site_id" class="col-lg-10" name="site_id">
<option value="0">Select Site</option>
<option value="1">Site 2</option>
<option value="2">Site 1</option>
<option value="3">Site 3</option>
<option value="4">Site 4</option>
</select>
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Region</label>
<div class="col-lg-12">
<select id="region_id" class="col-lg-10" name="region_id">
<option value="1">South</option>
<option value="2">East</option>
<option value="3">North</option>
<option value="4">West</option>
</select>
</div>
</div>
</div>
<div class="row col-lg-12">
<div class="form-group col-xs-6">
<label class="col-lg-12 center" for="form-field-2">POD Attachment</label>
<div class="col-lg-12">
<input multiple="" type="file" name="other_attach" id="id-input-file-5">
</div>
</div>
<div class="form-group col-xs-6">
<label class="col-lg-12 center" for="form-field-1">Signed Attachment</label>
<div class="col-lg-12">
<input multiple="" type="file" name="signed_attach" id="id-input-file-4">
</div>
</div>
</div>
<div class="modal-footer col-lg-12">
<button type="submit" class="btn btn-sm btn-primary">
<i class="ace-icon fa fa-check"></i>
Save
</button>
</div>
</form>
First two blocks having height is more than a last block that is select box.
so you missed putting class="form-control" in select boxes.

Add margin Bootstrap 3 table inside a modal

I want to add some space between the edges of a table and modal. The table is inside a modal popup but I don't know how to build the space. The table looks very bad, which clearly shows poor web design skills.
Adding the class
.table-responsive
..doesn't help.
This is how it looks like and here is the code of the modal and table.
<div id="modalUserViewEdits" class="modal-block modal-block-lg mfp-hide">
<section class="panel">
<header class="panel-heading">
<h2 class="panel-title">User</h2>
</header>
<div class="alert alert-message hide">
<!--User message alert popup-->
</div>
<div class="form-data">
<form id="form_UserEdits" class="form-horizontal form-userEditsDetails">
<div class="panel-body">
<div class="form-group">
<label class="control-label col-sm-3">
Username
<span class="required">*</span>
</label>
<div class="col-sm-9">
<input class="form-control" id="userId_modalUserViewEdits" type="hidden" name="id" value="0" />
<input class="form-control" id="userAction_modalUserViewEdits" type="hidden" name="action" value="active"/>
<input class="form-control" id="userOperation_modalUserViewEdits" type="hidden" name="operation" />
<input class="form-control" id="userName_modalUserViewEdits" type="text" placeholder="Username" name="userName" disabled />
</div>
</div>
</div>
</form>
<div id="divDynamicTable" class="form-data table-responsive">
<table class="table table-bordered table-striped mb-none" id="table_viewUserChanges" data-swf-path="lookandfeel/assets/vendor/jquery-datatables/extras/TableTools/swf/copy_csv_xls_pdf.swf">
<thead>
<tr>
<th>Field</th>
<th>Old Value</th>
<th>New Value</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<footer class="panel-footer">
<div class="row">
<div class="col-md-12 text-right">
<button type="button" id="btnApproveUserEdit" class="btn btn-success" data-name='approve'>Approve</button>
<button type="button" id="btnDeclineUserEdit" class="btn btn-danger" data-name='decline'>Decline</button>
<button type="button" class="btn btn-default modal-dismiss">Cancel</button>
</div>
</div>
</footer>
</div>
</section>
Please help
Wrap the table in div with class container-fluid
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div id="modalUserViewEdits" class="modal-block modal-block-lg mfp-hide">
<section class="panel">
<header class="panel-heading">
<h2 class="panel-title">User</h2>
</header>
<div class="alert alert-message hide">
<!--User message alert popup-->
</div>
<div class="form-data">
<form id="form_UserEdits" class="form-horizontal form-userEditsDetails">
<div class="panel-body">
<div class="form-group">
<label class="control-label col-sm-3">
Username
<span class="required">*</span>
</label>
<div class="col-sm-9">
<input class="form-control" id="userId_modalUserViewEdits" type="hidden" name="id" value="0" />
<input class="form-control" id="userAction_modalUserViewEdits" type="hidden" name="action" value="active"/>
<input class="form-control" id="userOperation_modalUserViewEdits" type="hidden" name="operation" />
<input class="form-control" id="userName_modalUserViewEdits" type="text" placeholder="Username" name="userName" disabled />
</div>
</div>
</div>
</form>
<div id="divDynamicTable" class="form-data table-responsive">
<div class=container-fluid>
<table class="table table-bordered table-striped mb-none" id="table_viewUserChanges" data-swf-path="lookandfeel/assets/vendor/jquery-datatables/extras/TableTools/swf/copy_csv_xls_pdf.swf">
<thead>
<tr>
<th>Field</th>
<th>Old Value</th>
<th>New Value</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<footer class="panel-footer">
<div class="row">
<div class="col-md-12 text-right">
<button type="button" id="btnApproveUserEdit" class="btn btn-success" data-name='approve'>Approve</button>
<button type="button" id="btnDeclineUserEdit" class="btn btn-danger" data-name='decline'>Decline</button>
<button type="button" class="btn btn-default modal-dismiss">Cancel</button>
</div>
</div>
</footer>
</div>
</section>
wrap it in container-fluid before the table-responsive so it works perfectly in responsive way also. may it works for you
<div class="container-fluid">
<div id="divDynamicTable" class="form-data table-responsive">
<table class="table table-bordered table-striped mb-none" id="table_viewUserChanges" data-swf-path="lookandfeel/assets/vendor/jquery-datatables/extras/TableTools/swf/copy_csv_xls_pdf.swf">
<thead>
<tr>
<th>Field</th>
<th>Old Value</th>
<th>New Value</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>

Inline a bootstrap form?

Here I have a form but the form is not inlined:
<form class="form-horizontal">
<fieldset>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">Vrsta</label>
<div class="col-md-4">
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">nafta</option>
<option value="2">biodizel</option>
</select>
</div>
</div>
<!-- Appended Input-->
<div class="form-group">
<label class="col-md-4 control-label" for="appendedtext">Kolicina</label>
<div class="col-md-4">
<div class="input-group">
<input id="appendedtext" name="appendedtext" class="form-control" placeholder="uptrebljena kolicina" type="text">
<span class="input-group-addon">kg</span>
</div>
<p class="help-block">preostalo 22l</p>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4">
<button id="singlebutton" name="singlebutton" class="btn btn-success">Add</button>
</div>
</div>
</fieldset>
</form>
How can I inline this form?
I tried with:
<form class="form-inline">
but that doesn't work. What is the problem here?
I also tried to make three col-md-4 columns, but again I can't align them with the button.

Resources