I have my table which has 2 rows, a parent row and a childrow. Before I use the "JQuery Datatable" library, all seems fine when it comes to alignment of my chidlrow label and fields. The label and its field should be aligned horizontally, but all this field should be in a vertical position.
This misaligned scenario only happens when the table is fullscreen/widened inside the browser. But it auto align itself when the browser width is smaller.
This what it looks like before (without Jquery Datatable plugin):
And this is what it looks like now (using Jquery Datatable plugin):
I Want to format my fields like the first image when I used the "Jquery DataTable" library.
Here is my JSFIDDLE
**Note: Try to widen/maximize the "output" area of my Jsfiddle so you will see the field being disaligned.
@import url(' //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');<div id="myTable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer"><div class="row"><div class="col-sm-6"></div><div class="col-sm-6"></div></div><div class="row"><div class="col-sm-12"><div class="dataTables_scroll"><div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px; width: 100%;"><div class="dataTables_scrollHeadInner" style="box-sizing: content-box; width: 1132px; padding-right: 0px;"><table class="table table-condensed table-striped table-responsive dataTable no-footer" role="grid" style="margin-left: 0px; width: 1132px;"><thead>
<tr role="row"><th style="display: none; width: 28px;" class="sorting_asc" tabindex="0" rowspan="1" colspan="1" >Column1</th><th style="display: none; width: 4px;" class="sorting" tabindex="0" rowspan="1" colspan="1"> </th><th class="sorting" tabindex="0" rowspan="1" colspan="1" style="width: 697px;" >Column2</th><th class="sorting" tabindex="0" rowspan="1" colspan="1" style="width: 208px;" >Column3</th><th class="sorting" tabindex="0" rowspan="1" colspan="1" style="width: 119px;" > </th><th class="sorting" tabindex="0" rowspan="1" colspan="1" style="width: 28px;" > </th></tr>
</thead></table></div></div><div class="dataTables_scrollBody" style="position: relative; overflow: auto; width: 100%; height: 266px;"><table id="myTable" class="table table-condensed table-striped table-responsive dataTable no-footer" role="grid" style="width: 100%;"><thead>
<tr role="row" style="height: 0px;"><th style="display: none; width: 28px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" class="sorting_asc" rowspan="1" colspan="1" aria-sort="ascending"><div class="dataTables_sizing" style="height:0;overflow:hidden;">Column1</div></th><th style="display: none; width: 4px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" class="sorting" rowspan="1" colspan="1" ><div class="dataTables_sizing" style="height:0;overflow:hidden;"> </div></th><th class="sorting" rowspan="1" colspan="1" style="width: 697px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" ><div class="dataTables_sizing" style="height:0;overflow:hidden;">Column2</div></th><th class="sorting" rowspan="1" colspan="1" style="width: 208px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" ><div class="dataTables_sizing" style="height:0;overflow:hidden;">Column3</div></th><th class="sorting" rowspan="1" colspan="1" style="width: 119px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" ><div class="dataTables_sizing" style="height:0;overflow:hidden;"> </div></th><th class="sorting" rowspan="1" colspan="1" style="width: 28px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" ><div class="dataTables_sizing" style="height:0;overflow:hidden;"> </div></th></tr>
</thead>
<tbody>
<tr role="row" class="odd shown">
<td style="display:none;" class="sorting_1">
<span class="item_id hidden" > </span>
<div style="display:none; margin-left: 5px;width:100px;">
<input class="form-control " maxlength="10" size="10" type="text">
</div>
</td>
<td style="display:none">
</td>
<td class="toggle">
<div style="display:inline" class="">Sample</div>
<input type="hidden" >
</td>
<td style="min-width:135px">
<button class="btn btn-primary" style="min-width:55px;margin-right:3px;margin-bottom:3px;padding:3px" >Button1
</button>
<button class="btn btn-primary " style="min-width:55px;margin-right:3px;margin-bottom:3px;padding:3px" >Button2
</button>
<div class="" style="text-align:left;">
</div>
</td>
<td>
<button class="btn btn-warning" style="min-width:75px;margin-right:3px;margin-bottom:3px;padding:3px" >Button3
</button>
</td>
<td>
<a class="" style="display:inline;padding:2px" >
<i class="">
</i>
</a>
</td>
</tr>
<tr class="tablesorter-childRow">
<td colspan="6">
<div class="" >
<div class="form-group ">
<label class="control-label col-xs-6 col-md-3" for="Field1">Field1
</label>
<div class=" col-xs-6 col-md-9">
<input class="form-control" id="Field1" type="text">
<div class="" style="display:none"></div>
</div>
</div>
<div class="form-group ">
<label class="control-label col-xs-6 col-md-3" for="Field2">Field2
</label>
<div class="col-xs-6 col-md-9">
<textarea class="form-control" cols="40" id="Field2" rows="5" ></textarea>
<div class="" style="display:none"></div>
</div>
</div>
<div class="form-group ">
<label class="control-label col-xs-6 col-md-3" for="Field3">Field3</label>
<div class="col-xs-6 col-md-9">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default " style="margin: 0px 4px 5px 0px;">
<input type="radio" name="Field3" autocomplete="off" value="1"> Radio1
</label>
<label class="btn btn-default " style="margin: 0px 4px 5px 0px;">
<input type="radio" name="Field3" autocomplete="off" value="2"> Radio2
</label>
<label class="btn btn-default " style="margin: 0px 4px 5px 0px;">
<input type="radio" name="Field3" autocomplete="off" value="3"> Radio3
</label>
</div>
<div class="" style="display:none"></div>
</div>
</div>
<div class="form-group " >
<label class="control-label col-xs-6 col-md-3" for="Field4">Field4</label>
<div class="col-xs-6 col-md-9">
<textarea class="form-control" cols="40" id="Field4" rows="5" ></textarea>
<div class="" style="display:none">
</div>
</div>
</div>
<div class="form-group ">
<label class="control-label col-xs-6 col-md-3" for="Field5">Field5</label>
<div class="col-xs-6 col-md-9 ">
<select class="form-control" id="Field5" >
<option value="0" selected="selected">Option1</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<div class="" style="display:none"></div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table></div></div></div></div><div class="row"><div class="col-sm-5"></div><div class="col-sm-7"></div></div></div>
