Javascript Select Responsive behavior Example

The select has a liquid layout, which means it nicely adapts to its surroundings. There are times however when you would like to set up the component responsively.

Use the responsive option to configure the picker and change the options based on the viewport width. There are five predefined breakpoints:

xsmall - min-width: 0px
small - min-width: 576px
medium - min-width: 768px
large - min-width: 992px
xlarge - min-width: 1200px
use custom for setting a custom breakpoint

It is a good idea to change the display or controls option to tailor the UX. This way you can have a bottom positioned picker on mobile, a popover anchored to the input on tablet and desktop display on large screens.

Download and try example

Javascript jQuery Angular React Vue

                    responsive: {
    xsmall: {
        display: 'bottom',
        touchUi: true
    },
    small: {
        display: 'anchored',
        touchUi: true
    },
    custom: { // Custom breakpoint
        breakpoint: 800,
        display: 'anchored'
        touchUi: false
    }
}

                

Select