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.
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;
}
Any suggestions why this code is not setting background color for the Select?
I have a sample created at following location
https://codesandbox.io/s/react-select-basic-forked-3z0kd?file=/src/index.js
Add this outside your class:
// BACKGROUND STYLES
const customStyles = {
control: (base, state) => ({
...base,
background: "#023950",
// match with the menu
borderRadius: state.isFocused ? "3px 3px 0 0" : 3,
// Overwrittes the different states of border
borderColor: state.isFocused ? "yellow" : "green",
// Removes weird border around container
boxShadow: state.isFocused ? null : null,
"&:hover": {
// Overwrittes the different states of border
borderColor: state.isFocused ? "red" : "blue"
}
}),
menu: (base) => ({
...base,
// override border radius to match the box
borderRadius: 0,
// kill the gap
marginTop: 0
}),
menuList: (base) => ({
...base,
// kill the white space on first and last option
padding: 0
})
};
And then implement it on your SELECT:
<Select
value={this.state.selectedOption}
onChange={this.handleChange}
options={this.options}
styles={customStyles}
/>
here is your code with background color working:
https://codesandbox.io/s/react-select-basic-forked-5uyfb?file=/src/index.js
Cheers!
Having a problem with using className prop.
What's happening for me is that only the parent div gets the class and the children divs don't. As a result, they end up having background color white instead of the override color.
<Select
className="games-dropdown-2"
defaultValue={colourOptions[0]}
name="color"
options={colourOptions}
/>
Below is the css class
.games-dropdown-2 {
background-color: #023950;
color: #FFFFFF;
padding-left: 15px;
width: 93%;
}
Another problem is that the child div seems to be inheriting border css from the grandparent div which is weird.
Attaching an image to give idea.
react-select-classname-issue
For v2 it's way easier to use style-in-JS in order to customize your select. So in your case you can try something like this:
const customStyles = {
control: (base, state) => ({
...base,
background: "#023950",
// match with the menu
borderRadius: state.isFocused ? "3px 3px 0 0" : 3,
// Overwrittes the different states of border
borderColor: state.isFocused ? "yellow" : "green",
// Removes weird border around container
boxShadow: state.isFocused ? null : null,
"&:hover": {
// Overwrittes the different states of border
borderColor: state.isFocused ? "red" : "blue"
}
}),
menu: base => ({
...base,
// override border radius to match the box
borderRadius: 0,
// kill the gap
marginTop: 0
}),
menuList: base => ({
...base,
// kill the white space on first and last option
padding: 0
})
};
<Select styles={customStyles} options={options} />
If you need to use thus select in different files I would recommend to create a custom component so you won't have to repeat the style everywhere.
By default the text will take the color define in your general CSS file.
Here the live example.
UPDATE
Following your request in comment I have updated the code above and here a new live example.
you can solve your background color issue like below and people have also faced some issue of z-index that also solved
const colourStyles = {
menuList: styles => ({
...styles,
background: 'papayawhip'
}),
option: (styles, {isFocused, isSelected}) => ({
...styles,
background: isFocused
? 'hsla(291, 64%, 42%, 0.5)'
: isSelected
? 'hsla(291, 64%, 42%, 1)'
: undefined,
zIndex: 1
}),
menu: base => ({
...base,
zIndex: 100
})
}
const options = [
{value: 'chocolate', label: 'Chocolate'},
{value: 'strawberry', label: 'Strawberry'},
]
<Select
// defaultValue={[colourOptions[2], colourOptions[3]]}
name="colors"
options={options}
className="basic-multi-select"
classNamePrefix="select"
styles={colourStyles}
/>
I wanted to use react-select and ran into a whole array of issues after I changed the page background color from white to custom. (The issues aren't so evident on the white background as on react-select's github page)
I'm doing the above through styles prop as the className prop wouldn't work properly.
Here is the styles prop.
const colourStyles = {
control: styles => ({ ...styles, backgroundColor: '#023950', color: 'white', border: 0 }),
option: (styles) => {
return {
backgroundColor: '#023950',
color: 'white'
};
},
singleValue: styles => ({ ...styles, color: 'white' }),
};
Here is a list of issues and if someone could help out on how to fix them. Please refer to attached image.
Notice the gap between the dropdown and the options (when you click on the dropdown to open the options)
If you see here, http://jedwatson.github.io/react-select/, there is no gap but you also can't see the source code. Clicking the source link gives a 404.
All demos here, https://react-select.com/styles, have this gap problem.
There is a white gap (within the options itself) at the top and bottom. This is different from the gap from the dropdown as mentioned in point 1. That gap is transparent showing what's behind. This one is white.
A long text resulted in options results in the whole options box having a weird whitespace issue. Is there a way to clip the text and turn it into ellipsis instead of making the options box wider and have horizontal scroll?
Related to the above problem. How to turn off horizontal scroll. Want text clipping instead.
Regarding the problem with using className prop, the class does get applied. However only to 1 of the topmost divs. It doesn't apply to the children div, which end up staying white in backgroundColor.
react-select-styling-issues
In the following live example you will find the answer to your different points.
The first 4 points you mentioned can be solved by editing the style-in-JS as following:
const customStyles = {
control: (base, state) => ({
...base,
background: "#023950",
// match with the menu
borderRadius: state.isFocused ? "3px 3px 0 0" : 3,
// Overwrittes the different states of border
borderColor: state.isFocused ? "yellow" : "green",
// Removes weird border around container
boxShadow: state.isFocused ? null : null,
"&:hover": {
// Overwrittes the different states of border
borderColor: state.isFocused ? "red" : "blue"
}
}),
menu: base => ({
...base,
// override border radius to match the box
borderRadius: 0,
// beautify the word cut by adding a dash see https://caniuse.com/#search=hyphens for the compatibility
hyphens: "auto",
// kill the gap
marginTop: 0,
textAlign: "left",
// prevent menu to scroll y
wordWrap: "break-word"
}),
menuList: base => ({
...base,
// kill the white space on first and last option
padding: 0
})
};
For the last one, as the select is supposed to be styled through JS using className props will only put a class on the outer container as mentioned here. If you really want you can still prefix the component with classNamePrefix but it won't really help you for styling.
you should try it
const colourStyles = {
menuList: styles => ({
...styles,
background: 'papayawhip'
}),
option: (styles, {isFocused, isSelected}) => ({
...styles,
background: isFocused
? 'hsla(291, 64%, 42%, 0.5)'
: isSelected
? 'hsla(291, 64%, 42%, 1)'
: undefined,
zIndex: 1
}),
menu: base => ({
...base,
zIndex: 100
})
}
const options = [
{value: 'chocolate', label: 'Chocolate'},
{value: 'strawberry', label: 'Strawberry'},
]
<Select
// defaultValue={[colourOptions[2], colourOptions[3]]}
name="colors"
options={options}
className="basic-multi-select"
classNamePrefix="select"
styles={colourStyles}
/>
This code solves my issue
const colourStyles = {
menuList: styles => ({
...styles,
background: 'papayawhip'
}),
option: (styles, {isFocused, isSelected}) => ({
...styles,
background: isFocused
? 'hsla(291, 64%, 42%, 0.5)'
: isSelected
? 'hsla(291, 64%, 42%, 1)'
: undefined,
zIndex: 1
}),
menu: base => ({
...base,
zIndex: 100
})
}
const options = [
{value: 'chocolate', label: 'Chocolate'},
{value: 'strawberry', label: 'Strawberry'},
]
<Select
// defaultValue={[colourOptions[2], colourOptions[3]]}
name="colors"
options={options}
className="basic-multi-select"
classNamePrefix="select"
styles={colourStyles}
/>
thanks..