html中的select元素没有将width属性设置为100%

Question

 <div class="tabbable"> <ul class="mb10 nav nav-pills nav-justified form-tabs hidden-xs hidden-sm hidden-md hidden-lg"> <li class="tab-selector active"><a href="#tab1" data-toggle="tab">Information Services</a></li> <li class="tab-selector"><a href="#tab2" data-toggle="tab">Transactions</a></li> <li class="tab-selector"><a href="#tab3" data-toggle="tab">Changes/Additions</a></li> <li class="tab-selector"><a href="#tab4" data-toggle="tab">Login</a></li> <li class="tab-selector"><a href="#tab5" data-toggle="tab">Service Agencies</a></li> <li class="tab-selector"><a href="#tab6" data-toggle="tab">Data Analysis</a></li> </ul> <select class="mb10 form-control visible-xs service-tabs" id="tab_selector"> <option value="0">Information Services</option> <option value="1">Transactions</option> <option value="2">Changes/Additions</option> <option value="3">Login</option> <option value="4">Service Agencies</option> <option value="5">Data Analysis</option> </select> <div class="tab-content visible-xs"> <div class="tab-pane active" id="tab1"> <ul> <li><a href="#">Know Your Bhudhaar</a></li> <li><a href="#">Bhu-Samacharam</a></li> <li><a href="#">Market Value</a></li> <li><a href="#">Information on approved Layouts</a></li> <li><a href="#">History of Transactions</a></li> <li><a href="#">Rights on forest land</a></li> </ul> </div> <div class="tab-pane" id="tab2"> <ul> <li class="sub"><a href="#">Mutation</a><span class="caret"></span></a> <ul class="sublist"> <li><a href="#">Agriculture</a></li> <li><a href="#">Rural Property</a></li> <li><a href="#">Urban Property</a></li> </ul> </li> <li><a href="#">Land Conversion</a></li> <li><a href="#">Sub Division</a></li> <li><a href="#">Grievances</a></li> </ul> </div> <div class="tab-pane" id="tab3"> <ul> <li><a href="#">Name Change</a></li> <li><a href="#">Add Mobile No.</a></li> <li><a href="#">Update Mobile No.</a></li> </ul> </div> <div class="tab-pane" id="tab4"> <ul> <li><a href="#">Government Departments</a></li> <li><a href="#">Service Agencies</a></li> <li><a href="#">Citizen</a></li> </ul> </div> <div class="tab-pane" id="tab5"> <ul> <li><a href="#">Meeseva</a></li> <li><a href="#">Meekosam</a></li> <li><a href="#">Bhuseva Processing</a></li> </ul> </div> <div class="tab-pane" id="tab6"> <ul> <li><a href="#">Webland Vs SSLR</a></li> </ul> </div> </div> </div>

Answer 1

see snippet, if that what you meant.

 #tab_selector { width: 100%; }

 <div class="tabbable"> <ul class="mb10 nav nav-pills nav-justified form-tabs hidden-xs hidden-sm hidden-md hidden-lg"> <li class="tab-selector active"><a href="#tab1" data-toggle="tab">Information Services</a></li> <li class="tab-selector"><a href="#tab2" data-toggle="tab">Transactions</a></li> <li class="tab-selector"><a href="#tab3" data-toggle="tab">Changes/Additions</a></li> <li class="tab-selector"><a href="#tab4" data-toggle="tab">Login</a></li> <li class="tab-selector"><a href="#tab5" data-toggle="tab">Service Agencies</a></li> <li class="tab-selector"><a href="#tab6" data-toggle="tab">Data Analysis</a></li> </ul> <select class="mb10 form-control visible-xs service-tabs" id="tab_selector"> <option value="0">Information Services</option> <option value="1">Transactions</option> <option value="2">Changes/Additions</option> <option value="3">Login</option> <option value="4">Service Agencies</option> <option value="5">Data Analysis</option> </select> <div class="tab-content visible-xs"> <div class="tab-pane active" id="tab1"> <ul> <li><a href="#">Know Your Bhudhaar</a></li> <li><a href="#">Bhu-Samacharam</a></li> <li><a href="#">Market Value</a></li> <li><a href="#">Information on approved Layouts</a></li> <li><a href="#">History of Transactions</a></li> <li><a href="#">Rights on forest land</a></li> </ul> </div> <div class="tab-pane" id="tab2"> <ul> <li class="sub"><a href="#">Mutation</a><span class="caret"></span></a> <ul class="sublist"> <li><a href="#">Agriculture</a></li> <li><a href="#">Rural Property</a></li> <li><a href="#">Urban Property</a></li> </ul> </li> <li><a href="#">Land Conversion</a></li> <li><a href="#">Sub Division</a></li> <li><a href="#">Grievances</a></li> </ul> </div> <div class="tab-pane" id="tab3"> <ul> <li><a href="#">Name Change</a></li> <li><a href="#">Add Mobile No.</a></li> <li><a href="#">Update Mobile No.</a></li> </ul> </div> <div class="tab-pane" id="tab4"> <ul> <li><a href="#">Government Departments</a></li> <li><a href="#">Service Agencies</a></li> <li><a href="#">Citizen</a></li> </ul> </div> <div class="tab-pane" id="tab5"> <ul> <li><a href="#">Meeseva</a></li> <li><a href="#">Meekosam</a></li> <li><a href="#">Bhuseva Processing</a></li> </ul> </div> <div class="tab-pane" id="tab6"> <ul> <li><a href="#">Webland Vs SSLR</a></li> </ul> </div> </div> </div>

Answer 2

use <select class="mb10 form-control visible-xs service-tabs" id="tab_selector" style="width: -webkit-fill-available;">

OR

 <select class="mb10 form-control visible-xs service-tabs" id="tab_selector" style="width: 100%">

Style attribute added in <select> tag to define css.