Sorry if this is in the wrong place. I'm not sure if the error is in JavaScript or html... I'm using bootstrap-select but it's not working right. Two selects show up side by side when there should be one and when it's clicked nothing happens, there's no dropdown. The select styles bootstrap style and can be colored, but there's just no functionality. I tried calling instantiation function inside document ready as well, but it didn't fix. as a side question I'm curious about how the select would function with JS disabled.. <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <link type="text/css" rel="stylesheet" href="../lib/dist/css/bootstrap.min.css"/> <script type="text/javascript" src="../lib/jquery/jquery.js"></script> <script type="application/javascript" src="../lib/dist/js/bootstrap.js"></script> <script type="text/javascript" src="../lib/dist/js/bootstrap-select.js"></script> <link rel="stylesheet" type="text/css" href="../lib/dist/css/bootstrap-select.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <link rel="stylesheet" href="../lib/dist/css/bootstrap-tagsinput.css" /> <link rel="stylesheet" href="../lib/dist/css/bootstrapValidator.min.css" /> <style type="text/css"> body{ background-color:black; } p{ color:white; margin:0px; } </style> </head> <body> <div class="container"> <div class="row-fluid"> <div class="col-lg-12" style="border:thin white solid;"> <h3>Verification</h3> <p>You're almost ready to start selling your products. The only thing left to do now is verify your account. We sent you a verification code to your e-mail. Simply paste the code and set up a security question. Don't lose your security question. It's crucial for account retrieval.</p><br/> <form role="form" method="post" action="#" class="form-inline"> <label>Verification</label><br/> <input type="text" class="form-control"/><br/><br/> <label>Security Question</label><br /> <select class="selectpicker abc" name="securityQuestion" data-style="btn-primary"> <option>Mother's Maiden name</option> <option>Pet's name</option> <option>Hometown's name</option> <option>First school's name</option> <option>Favorite book</option> </select><br/><br/> <label>Answer</label><br/> <input type="text" class="form-control"/><br/><br/> <?php if($error === "") { echo '<div id="regFormError" style="visibility:hidden; display: none;" class="alert alert-warning"> <a class="close" data-dismiss="alert">×</a> <strong>Warning!</strong><span id="errorOuput"></span> </div>'; }else{ switch($error) { case "": echo '<div id="regFormError" style="visibility:hidden; display: none;" class="alert alert-warning"> <a class="close" data-dismiss="alert">×</a> <strong>Warning!</strong><span id="errorOuput"></span> </div>'; break; } } ?> <input type="submit" class="btn btn-primary" value="Submit"/><br/><br/> <a href="#">Resend Verification Code</a> </form> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script type="text/javascript" src="../lib/jquery/jquery.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script type="text/javascript" src="../lib/dist/js/bootstrap.min.js"></script> <script type="text/javascript" src="../lib/dist/js/bootstrap-select.js"></script> <script> $(document).ready(function() { $('.selectpicker').selectpicker({ style: 'btn-info', size: 4 }); }); </script> </body> </html> HTML: EDIT: I've updated the code to make relevant. Still get two selects side by side though, and select doesn't open.
Well, I can't say much about your issues with the idiotic bloated halfwit bull known as bootcrap (go find a stick to scrape that off with), but your code does present a lot of questions... Like why the incomplete / invalid form? Where's your fieldset? Where are your FOR attributes on you LABEL, where's the ID's for those FOR attribute to point at? Why the static style inlined in PHP output? Is there some legitimate reason you think a select needs some sort of goofy scripttardery attached to it?!? Laundry list of how not to code a form or even write HTML; much less the pointless garbage code bloat of "JS for nothing and your scripts for free" mated to the mouth-breathing stupidity that is bootcrap. (seriously, stick... scrape... you're tracking it all over the carpets) There's a basic rule of thumb I think you are ignoring -- if you can't make it work without scripting FIRST, you likely have NO business adding scripting to it!
Hey, I take it you don't like bootstrap? lol. I love it for easy columns, but for forms it's kind of bad. There's no style for selects... well maybe I should use bootstrap for columns and something else for form elements? I just like what it does to inputs, and I'm finding it impossible to style selects... in ff it's hard to make them match the bootstrap input. also didn't think fieldset had anything to do with a form other than styling/bordering. take it you don't like bootstrap? I love it for easy columns, but forms it's kind of bad. There's no style for selects... well maybe I should use bootstrap for columns and something else for form elements? I just like what it does to inputs, and I'm finding it impossible to style selects... in ff it's hard to make them match the bootstrap input. hmm.... could you possibly give me some pointers with these problems. I'd drop bootstrap for my forms, but I'm not so sure the form will look good in plain HTML. I'll also fill in some of the other things you've said. I just Googled for attribute, didn't even know it existed, but ads some good functionality.
Hey, I think I might have solved my problem here. I found purecss, which seems to be a pure CSS library for forms. http://purecss.io/start/
-- the size of a website before you even HAVE a website? Presentational use of classes in the markup? Endless pointless DIV for nothing, broken pathetic ATTEMPT at being responsive in 99% of cases where people us it? Making the markup more complicated and slower loading? What is there to like?!? Styling inputs is a train wreck, you are usually best off avoiding doing so for much more than padding/border/color. SELECT? GOOD FREAKING LUCK. NO two browsers handle that in the least bit consistently, with Firfuxxors being the worst of the lot. (Even worse that IE!)... Though at least as of version 21 they FINALLY fixed the padding behavior, it's still an all-around disaster. (see what happens with border-radius!) Fieldset is the semantic tag for grouping sets of input. NO HTML TAG as of HTML 4.01 (or as of HTML 2 if you pretend the bull known as 3.2 and 4 tranny never existed) exists just for a presentational meaning; even B, I and SMALL have a semantic meaning (as in would be, not should be) Fieldset does NOT mean "draw a border around this" it means "this set of INPUT / SELECT/ TEXTAREA are used to set user input"... Ever notice how non block-level tags as a direct child of a FORM is not valid markup in STRICT??? -- there's a reason for that, you're supposed to have a DIV or a FIELDSET. Using the FIELDSET for the user input helps with non-visual navigation (and if a browser maker other than opera had bothered implementing all the recommended shortcuts ti would help on visual ux too; same goes for accesskeys and numbered headings) to what they should fill in. I usually use a FIELDSET for INPUT/SELECT/TEXTAREA, and DIV#submitsAndHiddens around my... well... submits and hiddens since those are NOT user input. FIELDSET can also be used to group inside a FIELDSET, a great example of that would be using the FIELDSET's LEGEND tag to describe and group radio buttons. *** semi-OT rant *** Of course, the train wreck of bull known as HTML 5 throws that in the trash thanks to it's mouth-breathing "who cares about accessibility, nobody is bothering to use logical document structure anyways" attitude. hence why I say HTML 5 is for the jacktards who never pulled their craniums out of 1997's rectum! It sure as shine-ola does NOT feel like forward thinking, progress or improvement. It FEELS like the W3C shrugging it's shoulders, saying "whatever" and throwing a bunch of bloat in blindly hoping that people are dumb enough to go "ooh shiny and new" without thinking about it. Thankfully for them, most people never embraced STRICT, semantics, or just plain "using HTML properly" for what it was designed to do, giving them a whole audience of fools to yum up the manure like it was their favorite party snack. I'm still not getting what it is you are trying to do to your columns or these poor form elements that makes you think you need some rubbish off the shelf library to do... well... much of anything. What are you trying to do to these? Do you have a screencap of the appearance you are aiming for because styling a form with CSS is NOT rocket science unless you're trying to do something that's going to look like crap cross-browser and be broken somewhere at some time; which is the number one reason I go "doesn't even belong on a website" so much. The laugh is, the relationship between FOR and ID, the proper use of FIELDSET, and a whole host of other things people don't do resulting in inaccessible forms has existed since forms were introduced. The problem is people have been learning from incomplete tutorials written by people who never took the time to read the specification and the halfwits who continue to vomit up HTML 3.2 to this day, slapping either 4 tranny or 5 lip-service around their outdated, outmoded, bloated inaccessible disasters that they have the giant pair of brass to call a website. But yeah, if you get me what you want your input/select to look like (I wasn't aware bootcrap dicked with them) I can tell you if it's viable or not, and if viable how to do it without some stupid bloated framework/library nonsense.
Only way to do select-styling with a somewhat consistent look is to swap out the select-element with javascript. Usually the select element is still there, just hidden, so this doesn't really affect availability or usability for disabled and such. Normally you can still accesss the elements via keyboard and so on. Depends on what you want to do with them