javascript - Select2 with Bootstrap3 not styling correctly -


i'm trying use latest version of select2 css styles of t0m
however, select form keeps select2 style , won't change. here's code:

<!doctype html> <html lang="en" xmlns="http://www.w3.org/1999/html">  <head>  <!-- stylesheets --> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <link rel="stylesheet" href="select2/select2.css"> <link rel="stylesheet" href="select2/select2-bootstrap.css"> <style type="text/css"> body {   padding: 40px; } </style>  <!-- scripts --> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="select2/select2.js"></script> <script src="select2/select2_locale_it.js"></script>  <script> $(function(){   // turn element select2 select style   $('#select2').select2(); }); </script> </head>  <body>  <select id="select2" class="input-default" style="width:300px">   <optgroup label="alaskan/hawaiian time zone">     <option value="ak">alaska</option>     <option value="hi">hawaii</option>   </optgroup>   <optgroup label="pacific time zone">     <option value="ca">california</option>     <option value="nv">nevada</option>     <option value="or">oregon</option>     <option value="wa">washington</option>   </optgroup>   <optgroup label="mountain time zone">     <option value="az">arizona</option>     <option value="co">colorado</option>     <option value="id">idaho</option>     <option value="mt">montana</option>     <option value="ne">nebraska</option>     <option value="nm">new mexico</option>     <option value="nd">north dakota</option>     <option value="ut">utah</option>     <option value="wy">wyoming</option>   </optgroup>   <optgroup label="central time zone">     <option value="al">alabama</option>     <option value="ar">arkansas</option>     <option value="il">illinois</option>     <option value="ia">iowa</option>     <option value="ks">kansas</option>     <option value="ky">kentucky</option>     <option value="la">louisiana</option>     <option value="mn">minnesota</option>     <option value="ms">mississippi</option>     <option value="mo">missouri</option>     <option value="ok">oklahoma</option>     <option value="sd">south dakota</option>     <option value="tx">texas</option>     <option value="tn">tennessee</option>     <option value="wi">wisconsin</option>   </optgroup>   <optgroup label="eastern time zone">     <option value="ct">connecticut</option>     <option value="de">delaware</option>     <option value="fl">florida</option>     <option value="ga">georgia</option>     <option value="in">indiana</option>     <option value="me">maine</option>     <option value="md">maryland</option>     <option value="ma">massachusetts</option>     <option value="mi">michigan</option>     <option value="nh">new hampshire</option>     <option value="nj">new jersey</option>     <option value="ny">new york</option>     <option value="nc">north carolina</option>     <option value="oh">ohio</option>     <option value="pa">pennsylvania</option>     <option value="ri">rhode island</option>     <option value="sc">south carolina</option>     <option value="vt">vermont</option>     <option value="va">virginia</option>     <option value="wv">west virginia</option>   </optgroup> </select> </body>  </html>

i tried could, nothing changed, except if added class form-control happens this


Comments

Post a Comment

Popular posts from this blog

javascript - Jquery show_hide, what to add in order to make the page scroll to the bottom of the hidden field once button is clicked -

i have button on website when clicked, reveals map. button can seen when page first loads up, when clicked, section holding map slides open , goes out of screen since page loads @ top (normal). want page scroll down bottom of div select when button pushed, if map out of screen. if page scrolled down, , clicks show map button, don't want page jump bottom of map. i tried figure out myself, no luck. seasoned jquery coders able give me guidance? many thanks! map = mapdiv.gmap3("get"); infobox = new infobox({ pixeloffset: new google.maps.size(-220, -310), closeboxurl: '', enableeventpropagation: true }); mapdiv.delegate('.infobox .close','click',function () { infobox.close(); }); jquery(".slidingdiv").hide(); jquery(".show_hide").show(); jquery('.show_hide').click(function(){ lastcenter=map.getcenter(); jquery(".slidingdiv&quo
Read more

javascript - Highcharts multi-color line -

Image
i looking create highchart multi-colored line. if goes down under value, become red, , when comes on value, become green . here picture example: or maybe highcharts have other charts models differentiate high or low level color? you can achieve coloring using lineargradient coloring: color: { lineargradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, stops: [ [0, 'red'], [0.25, 'yellow'], [0.50, 'green'], [0.75, 'yellow'], [1, 'red'] ] } here 0 in stops relates minimum value of series , 1 maximum value, , in between percentages between values. if find percentages according values prior creating chart use correct stops values make relate specific values in data (at least approximately). see this jsfiddle example .
Read more

javascript - Enter key does not work in search box -

tried search guys sorry. input in search box doesnt work (or search) when hit enter when user clicks search button. doing wrong? here code. thanks. <script type="text/javascript"> $(document).ready(function() { $("#submit").click(function() { var url = "http://asla.org/awardssearch.html"; url += "?s=" + $('#googlecse').val(); window.location = url; }); $('#googlecse').keydown(function(event) { if (event.keycode == '13') { $("#submit").click(); } else { //do nothing :) } }); }); </script> <form class="navbar-form navbar-right" role="search"> <div class="search"> <input id="googlecse" type="text" onblur="if(this.value=='')this.value=this.defaultvalue;" onfocus="if(this.value==this.defaultvalue)t
Read more