In the following image I want to have the labels of my multi-value Select component be underneath each other in a columnwise fashion.
<Select
closeMenuOnSelect={false}
components={makeAnimated()}
options={optionsIngameMode}
defaultValue={optionsIngameMode}
noOptionsMessage={() => "No game modes selected"}
isMulti
autoFocus
/>
How can I achieve this?
This can easily be done by setting multiValue width to 100% to fill the all of the container space
const customStyles = {
multiValue: (provided) => ({
...provided,
width: "100%"
}),
multiValueLabel: (provided) => ({
...provided,
marginRight: "auto", // push the delete icon to the far right
}),
input: (provided) => ({
...provided,
display: "none"
}),
valueContainer: (provided) => ({
...provided,
minHeight: 30
}),
};
export default () => (
<Select isMulti styles={customStyles} options={colourOptions} />
);
Live Demo
Related
I want to reduce the size of React Select.
This is my code,
<div>
<Select
options={workflowStepAction}
/>
</div>
I tried the below code. But it's not working properly,
<div>
<Select
maxMenuHeight={190}
options={workflowStepAction}
/>
</div>
I got the answer. I think the following is the minimal setting. I could able to reduce the hight of the react select.
This is the code, I used TypeScript for this code.
const targetHeight = 30;
const styles = {
control: (base: any) => ({
...base,
minHeight: 'initial',
}),
valueContainer: (base: any) => ({
...base,
height: `${targetHeight - 1 - 1}px`,
padding: '0 8px',
}),
clearIndicator: (base: any) => ({
...base,
padding: `${(targetHeight - 20 - 1 - 1) / 2}px`,
}),
dropdownIndicator: (base: any) => ({
...base,
padding: `${(targetHeight - 20 - 1 - 1) / 2}px`,
}),
};
<Select
styles={styles}
/>
I used styles prop:
<Select
defaultValue={selectedOption}
onChange={setSelectedOption}
options={options}
menuPosition='fixed'
menuPlacement='auto'
styles={{
control: (baseStyles, state) => ({
...baseStyles,
minHeight: '25px',
fontSize: '15px',
}),
dropdownIndicator: (base) => ({
...base,
paddingTop: 0,
paddingBottom: 0,
}),
menuList: (base) => ({
...base,
fontSize: '12px',
}),
}}
/>
You can find the component's names to select here: https://react-select.com/components
dropdownIndicator default padding is 8px, so to reduce the height, you have to put the top/bottom padding to 0.
I used fontSize on component menuList to reduce the font's size of the list, and attributes menuPosition and menuPlacement to bring closer the menu near the reduced select.
I want to remove the blue outline and box-shadow when the input tag is active.
You need to pass custom styles prop.
Something like this
const customStyles = {
control: (base, state) => ({
...base,
height: "100%",
minHeight: "100%",
border: 0,
boxShadow: "none",
}),
dropdownIndicator: (base, state) => {
return {
...base,
};
},
placeholder: (base, state) => ({
...base,
}),
singleValue: (base, state) => ({
...base,
}),
option: (base, state) => ({
...base,
}),
};
return (
<Select
//REST OF YOUR PROPS
styles={customStyles}
isSearchable={false} //This gets rid of the default cursor
/>
)
Try playing around with the customStyles object to style it further :)
The default styles are derived from a theme object, which you can mutate like styles.
The theme object is available for the styles functions as well.
<Select
label="Single select"
options={user}
theme={theme => ({
...theme,
borderRadius: 'none',
colors: {
...theme.colors,
primary25: 'primary',
primary: 'neutral5',
},
})}
/>
const style = {
control: base => ({
...base,
border: 0,
boxShadow: 'none'
})
};
Old question but the blue outline is a drop-shadow on the input field itself (at least was in my case), I ended up just adding a custom class to the select field like
<ReactSelect
title = { __( 'Title', 'lang' ) }
className = { 'your-custom-class' }
...
and then styling it out with
.your-custom-class input {
box-shadow: none;
}
Is there a way to increase the menu height? I can decrease the height of menu with maxMenuHeight property. But i can't find a way to increase its height. I even tried minMenuHeight property but that couldn't do the trick. Here's my code along with custom styles:
const defaultStyles = {
control: (base, state) => ({
...base,
}),
menu: base => ({
...base,
}),
menuList: base => ({
...base,
})
}
const customStyles = {
control: (base, state) => ({
...base,
background: "#000000",
// match with the menu
borderRadius: state.isFocused ? "3px 3px 0 0" : 3,
// Overwrittes the different states of border
// Removes weird border around container
boxShadow: state.isFocused ? null : null,
}),
menu: base => ({
...base,
// override border radius to match the box
borderRadius: 0,
backgroundColor: 'black',
// kill the gap
marginTop: 0
}),
menuList: base => ({
...base,
// kill the white space on first and last option
padding: 0
})
}
<AsyncSelect
className="basic-single"
classNamePrefix="select"
loadOptions={loadOptions}
maxMenuHeight={500}
isMulti
styles={localStorage.getItem('theme') === 'dark' ? customStyles : defaultStyles}
cacheOptions
onChange={(e) => setSelect(e)}
defaultOptions />
You can do it with styles.
Change the
menuList: base => ({
...base,
})
with
menuList: base => ({
...base,
minHeight: "300px" // your desired height
})
Working demo at CodeSandbox.
how to remove padding-top in menu drop-down react-select?
const customStyles = {
indicatorSeparator: styles => ({ ...styles, display: "none" }),
option: (provided, state) => ({
...provided,
fontSize: 16,
height:"40px",
paddingLeft: "11px",
":firstChild": {
margin: "10px",
padding: "10px",
borderRadius: "10px 10px 10px 10px"
}),
<Select
styles={customStyles}
defaultValue={[colourOptions[2], colourOptions[3]]}
isMulti
name="colors"
options={colourOptions}
className="basic-multi-select"
classNamePrefix="select"
/>
enter image description here
https://codesandbox.io/s/react-codesandboxer-example-90zz6
The default margin-top between the menu list and the select box can be removed easily with the props styles like this:
const styles = {
menu: base => ({
...base,
marginTop: 0
})
}
Live example here.
You should set the styles for the menuList style key according to react-select docs.
menuList: (provided, state) => ({
...provided,
paddingTop: 0,
paddingBottom: 0,
}),
use this use multi inline style by using {[firststyle,secandstyle]}
and define the second style bellow the first style as shape following
`const nopadinng={
paddingTop:0};`
and remove the classname
// remove the className
className="basic-multi-select"
const nopadinng={
paddingTop:0};
styles={[customStyles,nopadinng]}
I am trying to improve my UI for the react-select. I did some researches online, but I still cannot figure out how to remove the bar in the select.
Can I style the control component to remove the bar? How？
import React from 'react';
import chroma from 'chroma-js';
import { colourOptions } from './docs/data';
import Select from 'react-select';
const dot = (color = '#ccc') => ({
alignItems: 'center',
display: 'flex',
':before': {
backgroundColor: color,
borderRadius: 10,
content: ' ',
display: 'block',
marginRight: 8,
height: 10,
width: 10,
},
});
const colourStyles = {
control: styles => ({ ...styles, backgroundColor: 'white' }),
option: (styles, { data, isDisabled, isFocused, isSelected }) => {
const color = chroma(data.color);
return {
...styles,
backgroundColor: isDisabled
? null
: isSelected ? data.color : isFocused ? color.alpha(0.1).css() : null,
color: isDisabled
? '#ccc'
: isSelected
? chroma.contrast(color, 'white') > 2 ? 'white' : 'black'
: data.color,
cursor: isDisabled ? 'not-allowed' : 'default',
};
},
input: styles => ({ ...styles, ...dot() }),
placeholder: styles => ({ ...styles, ...dot() }),
singleValue: (styles, { data }) => ({ ...styles, ...dot(data.color) }),
};
export default () => (
<Select
defaultValue={colourOptions[2]}
label="Single select"
options={colourOptions}
styles={colourStyles}
/>
);
react-select allows us to control components by doing
components={{
IndicatorSeparator: () => null
}}
For example:
<Select
id="search-commodity"
options={comodityOptions}
components={{
IndicatorSeparator: () => null
}}
/>
The component you are looking to style is indicatorSeparator. For instance, add this to your styles:
indicatorSeparator: (styles) => ({display:'none'})
How did I find this out? I added classNamePrefix to the react-select properties and then used the inspector to see what the class name of the element was.
import Select from "react-select";
export default () => (
<Select
styles={{
indicatorSeparator: () => ({ display: "none" }),
}}
/>
)
You can hide indicatorSeparator with styles prop.
Be aware! Not IndicatorSeparator but indicatorSeparator.