Plain <Select> Element Vs Bootstrap's Dropdown Element Rendered on Mobile Device

Plain select element vs Bootstrap's dropdown element rendered on mobile device

DevTools Device Mode does not emulate mobile-specific UA handling of form elements. This is actually very tricky to do since those things are compiled for that platform build.

The best thing to do is know there will be a difference. In the case of select elements it really doesn't matter much. Since the mobile UX is a full screen scroll selector of the choices.

The absolute best thing, as always, is use Device Mode as a guideline. It is not absolute nor can it be. You will always need to do on-device testing to verify everything works as expected. DM simply gets you 85-90% of the way there without issue.

In Bootstrap is there a way to have an html table with a cut down number of cells / rows but more for desktop browsers?

You can use the bootstrap hidden-sm field on certain td elements to make them disappear on certain screen sizes.
It would also be worth look at the responsive tables class to make a scrollable div to fit wider tables as well

Access boostrap dropdown value in JS when multiple dropdowns rendered

You can ignore the IDs and observe the hyperlinks class when handling the click event:

Using jQuery:

$('a.dropdown-item').on('click', function(e) { 
    // You don't want to navigate away from this page I suppose?
    e.preventDefault();

    $('#someOtherId').val($(this).text());
});

Using Vanilla JavaScript (ES6):

const elements = document.getElementsByClassName("dropdown-item");

const myHandler = (e) => {
    // You don't want to navigate away from this page I suppose?
    e.preventDefault();

    const myElement = document.getElementById("someOtherId");
    
    myElement.value = this.text;
};

Array.from(elements).forEach(function(element) {
    element.addEventListener('click', myHandler);
});

How do I style a select dropdown with only CSS?

Here are three solutions:

Solution #1 - appearance: none - with Internet Explorer 10 - 11 workaround (Demo)

--

To hide the default arrow set appearance: none on the select element, then add your own custom arrow with background-image

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* Remove default arrow */
   background-image: url(...);   /* Add custom arrow */
}

Browser Support:

appearance: none has very good browser support (caniuse) - except for Internet Explorer.

We can improve this technique and add support for Internet Explorer 10 and Internet Explorer 11 by adding

select::-ms-expand {
    display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}

If Internet Explorer 9 is a concern, we have no way of removing the default arrow (which would mean that we would now have two arrows), but, we could use a funky Internet Explorer 9 selector.

To at least undo our custom arrow - leaving the default select arrow intact.

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background-image:none\9;
        padding: 5px\9;
    }
}

All together:

select {
  margin: 50px;
  width: 150px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #CCC;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(https://stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}

/* CAUTION: Internet Explorer hackery ahead */

select::-ms-expand {
    display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background: none\9;
        padding: 5px\9;
    }
}

<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

twitter-bootstrap vs jquery-mobile

I don't know if "better" is something you can answer since they serve different purposes. Bootstrap is great all-purpose CSS library whereas jQueryMobile is closer to a framework. Meaning jQueryMobile doesn't just make your pages look nice- it gives a lot of mobile oriented features such as- swipe-events, page transitions, allows for single page applications (since it will only show a single div with data-role='page' at a time), AJAX preload and history API, and lots of touch friendly components/widgets. Whereas bootstrap is foremost a CSS library mostly for desktop but works on mobile as well especially since 2.0 comes with media queries built in. Bootstrap will not help you with touch friendly lists, checkboxes, select menu's, etc.

One more thing to point out, jQueryMobile takes your markup and dresses it with all sorts of pretty stuff using JavaScript. Bootstrap has some javascript, but only for optional components, the rest is CSS.

So to answer IMHO- if you're a making a web application that you explicitly plan on using primarily on mobile devices go with jQueryMobile; Anything else go with Bootstrap- it's really quite awesome.

Dropdown select with images

Check this example .. everything has been done easily http://jsfiddle.net/GHzfD/

EDIT: Updated/working as of 2013, July 02: jsfiddle.net/GHzfD/357

#webmenu{
    width:340px;
}

<select name="webmenu" id="webmenu">
    <option value="calendar" title="http://www.abe.co.nz/edit/image_cache/Hamach_300x60c0.JPG"></option>
    <option value="shopping_cart" title="http://www.nationaldirectory.com.au/sites/itchnomore/thumbs/screenshot2013-01-23at12.05.50pm_300_60.png"></option>
    <option value="cd" title="http://www.mitenterpriseforum.co.uk/wp-content/uploads/2013/01/MIT_EF_logo_300x60.jpg"></option>
    <option value="email"  selected="selected" title="http://annualreport.tacomaartmuseum.org/sites/default/files/L_AnnualReport_300x60.png"></option>
    <option value="faq" title="http://fleetfootmarketing.com/wp-content/uploads/2013/01/Wichita-Apartment-Video-Tours-CTA60-300x50.png"></option>
    <option value="games" title="http://krishnapatrika.com/images/300x50/pellipandiri300-50.gif"></option>
</select>

$("body select").msDropDown();

React JSX: selecting selected on selected select option

React makes this even easier for you. Instead of defining selected on each option, you can (and should) simply write value={optionsState} on the select tag itself:

<select value={optionsState}>
  <option value="A">Apple</option>
  <option value="B">Banana</option>
  <option value="C">Cranberry</option>
</select>

For more info, see the React select tag doc.

Also, React automatically understands booleans for this purpose, so you can simply write (note: not recommended)

<option value={option.value} selected={optionsState == option.value}>{option.label}</option>

and it will output 'selected' appropriately.

---

Related Topics