प्रोग्रामिंग, सवालों के जवाब में मदद करें / jQuery / HTML, CSS, JQuery के गैर-कार्यशील बूटस्ट्रैप फ़ॉर्मेटिंग के लिए डेटाटेबल परिणाम - jquery, html, css, twitter-bootstrap, datatables

एचटीएमएल, सीएसएस, JQuery डेटाटेबल परिणाम गैर-काम करने वाले बूटस्ट्रैप स्वरूपण के लिए परिणाम - jquery, html, css, twitter-bootstrap, डेटाटेबल्स

मेरी अपनी तालिका है जिसमें 2 पंक्तियाँ हैं, एक मूल पंक्ति हैऔर एक बच्चा। इससे पहले कि मैं "JQuery डेटाटेबल" लाइब्रेरी का उपयोग करूं, यह सब तब ठीक लगता है जब यह मेरे chidlrow लेबल और फ़ील्ड के संरेखण की बात आती है। लेबल और उसके क्षेत्र को क्षैतिज रूप से संरेखित किया जाना चाहिए, लेकिन यह सभी क्षेत्र एक ऊर्ध्वाधर स्थिति में होना चाहिए।

यह गलत दृश्य केवल तब होता है जब तालिका ब्राउज़र के अंदर पूर्णस्क्रीन / चौड़ी हो जाती है। लेकिन ब्राउजर की चौड़ाई छोटी होने पर यह अपने आप ऑटो हो जाता है।

यह ऐसा है जो पहले की तरह दिखता है (बिना Jquery Datatable प्लगइन के)

और यह अब जैसा दिखता है (Jquery Datatable प्लगइन का उपयोग करके):

मैं अपने क्षेत्रों को पहली छवि की तरह प्रारूपित करना चाहता हूं, जब मैंने "Jquery DataTable" लाइब्रेरी का उपयोग किया।

मेरा यहाँ है JSFIDDLE

** नोट: मेरे Jsfiddle के "आउटपुट" क्षेत्र को चौड़ा / अधिकतम करने की कोशिश करें ताकि आप देखेंगे कि क्षेत्र का अपमान हो रहा है।

@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">&nbsp;</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;" >&nbsp;</th><th class="sorting" tabindex="0" rowspan="1" colspan="1" style="width: 28px;" >&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</div></th></tr>
</thead>

<tbody>
<tr  role="row" class="odd shown">
<td style="display:none;" class="sorting_1">
<span class="item_id hidden" >&nbsp;</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>

उत्तर:

उत्तर № 1 के लिए 1

एक त्वरित सुधार के लिए, उच्च चौड़ाई पर विकृत किए बिना लेआउट को बनाए रखने के लिए बस निम्नलिखित सीएसएस का प्रयास करें,

.form-inline .form-group {
width: 100%;
}

यह त्वरित समाधान दीर्घकालिक समाधान नहीं हो सकता है।

बेला

उत्तर:

संबंधित सवाल