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.
Related
React Select, how to change the font size on on the dropdown menu
const customStyles = {
control: (base) => ({
...base,
fontSize: 13,
paddingTop: 3,
}),
};
You almost got it correct. Just change the fontSize int 13 to string '13px'/'13em'. This will change the font size of the option selected.
To change the font size of the menu option, add the below code in customStyles:
menuPortal: base => ({
...base,
fontSize: '13px'
}),
You could pass styles directly as props to react-select(hoping you're talking about the same)
<Select
styles={{ menuPortal: (base) => ({ ...base, zIndex: 9999 }) }}
menuPortalTarget={document.body}
isSearchable
name="color"
menuPlacement={menuPlacement}
options={colourOptions}
menuShouldScrollIntoView={false}
/>
For more help, you could also refer to the advanced docs in react-select
https://react-select.com/advanced#portaling
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;
}
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
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]}