Responsive behavior
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: 0pxsmall- min-width: 576pxmedium- min-width: 768pxlarge- min-width: 992pxxlarge- min-width: 1200px- use
customfor setting a custombreakpoint
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.
Demo
<Select
responsive={{
}}
/>JSXTSX
import { Select, setOptions } from '@mobiscroll/react';
import { useMemo } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const myResponsive = useMemo(
() => ({
xsmall: {
display: 'bottom',
},
small: {
display: 'anchored',
},
custom: {
// Custom breakpoint
breakpoint: 800,
display: 'anchored',
touchUi: false,
},
}),
[],
);
const myData = useMemo(
() => [
{
text: 'Atlanta',
value: 'atl',
},
{
text: 'Berlin',
value: 'ber',
},
{
text: 'Boston',
value: 'bos',
},
{
text: 'Chicago',
value: 'chi',
},
{
text: 'London',
value: 'lon',
},
{
text: 'Los Angeles',
value: 'la',
},
{
text: 'New York',
value: 'ny',
},
{
text: 'Paris',
value: 'par',
},
{
text: 'San Francisco',
value: 'sf',
},
],
[],
);
return (
<Select
data={myData}
responsive={myResponsive}
label="Select"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please select..."
/>
);
}
export default App;
import { MbscResponsiveOptions, MbscSelectOptions, Select, setOptions } from '@mobiscroll/react';
import { FC, useMemo } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const myData = [
{
text: 'Atlanta',
value: 'atl',
},
{
text: 'Berlin',
value: 'ber',
},
{
text: 'Boston',
value: 'bos',
},
{
text: 'Chicago',
value: 'chi',
},
{
text: 'London',
value: 'lon',
},
{
text: 'Los Angeles',
value: 'la',
},
{
text: 'New York',
value: 'ny',
},
{
text: 'Paris',
value: 'par',
},
{
text: 'San Francisco',
value: 'sf',
},
];
const App: FC = () => {
const myResponsive: MbscResponsiveOptions<MbscSelectOptions> = useMemo(
() => ({
xsmall: {
display: 'bottom',
},
small: {
display: 'anchored',
},
custom: {
// Custom breakpoint
breakpoint: 800,
display: 'anchored',
touchUi: false,
},
}),
[],
);
return (
<Select
data={myData}
responsive={myResponsive}
label="Select"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please select..."
/>
);
};
export default App;