i' tryin the react-select library, and i like it.
I'm playing with it but i dont' understand how to change the width of the options container.
i tried to saw the documentation at official react select but i didn't find the right section about the width of the options container.
could someone kindly help me :) ?
this is my custom style right now :
const customStyles = {
option: (provided, state) => ({
...provided,
borderBottom: '1px solid #979797',
width: 219,
borderRadius: 5,
}),
control: () => ({
// none of react-select's styles are passed to <Control />
width: 219,
border: '1px solid #979797',
display: 'flex',
borderRadius: '5px',
}),
valueContainer: (provided) => ({
...provided,
width: 219,
}),
}
The Menu component is the one you want to modify:
menu: (provided, state) => ({
...provided,
width: 50,
}),
You can pass a selector for container like
const colourStyles = {
control: styles => ({ ...styles, backgroundColor: 'white' }),
container: styles => ({ ...styles, width: 200 })
};
<Select
defaultValue={colourOptions[2]}
label="Single select"
options={colourOptions}
styles={colourStyles}
/>
Demo
Related
I want to change the size of react-select icon and tried to make a bigger input field. I tried this code but it didn't change the size of react-select icon. How can I make the input field bigger and size of the icon smaller?
const customStyles = {
control: base => ({
...base,
height: 22,
minHeight: 20,
width: 57,
}),
indicatorSeparator: base => ({
...base,
minHeight: '1px',
height: '2px',
}),
indicatorsContainer: base => ({
...base,
height: 20,
minHeight: 10,
width:24,
}),
You can use container for container styling and menu for menu styling
styles={{
container: () => ({
width: 150,
paddingRight: 2,
}),
menu: (provided, state) => ({
...provided,
width: 150,
}),
}}
I have given the select component some bootstrap classes, but I have noticed that the menu isn't the same width as the component see this image:
This is how my select component is build up:
<Select
className="col-sm-4 offset-sm-2 filter"
classNamePrefix="select"
placeholder="Options"
options={options}
styles={customStyles}
/>
I would like to make use of the bootstrap classes in my menu so it will be responsive the same way. I would expect width:100% to be the same width as the component but this isn't the case.
const customStyles = {
control: provided => ({
...provided,
height: '55px',
borderRadius: 0,
borderWidth: 0,
boxShadow: 'none'
}),
group: provided => ({
...provided,
paddingTop: 0,
paddingBottom: 0
}),
groupHeading: provided => ({
...provided,
display: 'none'
}),
menu: provided => ({
...provided,
marginTop: '-1px',
borderRadius: '0px',
}),
menuList: (provided, state) => ({
...provided,
padding: '0px',
overflow: 'hidden',
}),
option: (provided, state) => ({
...provided,
borderBottom: '1px solid #b0b0b0',
color: state.isSelected ? 'white' : '#000000',
background: state.isSelected ? '#e3155c' : 'white',
fontFamily: 'Qanelas-Regular',
fontSize: '16px',
padding: '15px',
':hover': {
...provided[':active'],
backgroundColor: '#e3155c',
color: 'white'
},
}),
}
I just added width: 'calc(100% - 30px)' on menu, I forgot about the gutter width which comes with Bootstrap.
I have a react-select Select component that renders a searchable dropdown menu.
Here is a Sandbox: https://codesandbox.io/s/lingering-paper-eb4lr?fontsize=14&hidenavigation=1&theme=dark
For some reason, I can't seem to get the cursor to display. The search functionality works fine. I can type in the field but the cursor does not display at all. When looking at the example snippets on the website, the cursor shows appropriately.
In my code, I have a blue dropdown background with white text. I also made the cursor white in the styles object.
<Select
value={currentValue}
placeholder="N/A"
components={{ IndicatorSeparator: () => null }}
onChange={(val: any) => { // do stuff }}
isSearchable={true}
autoBlur={true}
openMenuOnFocus={true}
options={options}
styles={getStyles()}
/>
getStyles():
{
control: (provided: any, state: any) => ({
...provided,
color: 'white',
backgroundColor: 'blue',
fontSize: '1rem',
width: '250px',
borderRadius: '0px',
borderStyle: 'none',
padding: '0 0.5rem 0 0.5rem',
cursor: 'text',
}),
option: (provided: any, state: any) => ({
...provided,
fontWeight: '400',
color: 'black',
backgroundColor: 'white',
fontSize: '1rem',
padding: '0.25rem 0.5rem 0.25rem 0.5rem',
cursor: 'pointer',
'&:hover': { backgroundColor: '#F5F5F5' },
}),
menu: (provided: any, state: any) => ({
...provided,
fontWeight: '400',
color: MEDICAL_BLUE,
backgroundColor: 'white',
fontSize: '1rem',
padding: '0.25rem 0.5rem 0.25rem 0.5rem',
borderRadius: '0px',
borderStyle: 'none',
}),
singleValue: (provided: any, state: any) => ({
...provided,
color: 'white',
backgroundColor: MEDICAL_BLUE,
fontSize: '1rem',
}),
input: (provided: any, state: any) => {
return {
...provided,
color: 'white',
};
},
placeholder: (provided: any, state: any) => {
return {
...provided,
color: 'white',
};
},
dropdownIndicator: (provided: any, state: any) => {
return {
...provided,
color: 'white',
'&:hover': { color: '#F5F5F5' },
};
},
};
Any help is greatly appreciated.
Edit: Here is a Sandbox showing the behavior I'm seeing. As you can see, without anything selected, I can see the cursor when clicking in the dropdown. However, once I select a value, clicking on the menu again shows no cursor.
It looks like the main issue is because of the background color of the value selected on the dropdown. In fact, if you give it transparent as value, it works. It's probably covering the cursor. Primarily addressing the OP that you can still retain the background color of blue for your dropdown but just remove the background color of the value selected
singleValue: (provided: any, state: any) => ({
...provided,
color: "white",
// backgroundColor: "#004080", // comment this out
fontSize: "1rem"
}),
I was able to figure out my own issue, so I'm writing this to help out future souls.
Turns out that the singleValue style key styles the selected value for the dropdown input which removes any cursor. I haven't discovered any way to workaround it but removing the singleValue style key and re-styling my dropdown to have a white background instead of a dark blue background worked for me.
This is how I am calling the component and I am passing the props here and want to use it but don't know to use these props in the code.
<Selector
key={index}
placeholder={"Select an option."}
defaultMenuIsOpen={true}
isSearchable={false}
options={options}
width={"600px"} //this is the props i want to use for width
color={"red"} // this props I want to use for color
onChange={(e: string | any) => {
const { value } = e;
this.handleCondition(value, index, "condition");
}}
/>
Here is a styling part for the react-select and I want to use the props here
export const customStyles: StylesConfig = {
indicatorSeparator: () => ({ display: 'none' }),
menu: () => ({
width: '250px',
marginTop: '4px',
border: 'solid 1px #dfe3e9',
borderRadius: '4px!important',
boxShadow: '0 0 8px 0 #e5e5ea',
position: 'absolute',
zIndex: 999999,
backgroundColor: 'white',
}),
control: (props) => ({
display: 'flex',
// width: props.width ? `${props.width}` : '250px',
width: props.width ? props.width : '250px',
height: '49px!important',
borderRadius: '4px!important',
border: 'solid 1px #dfe3e9',
color: '#1e58c9',
}),
singleValue: () => ({
color: '#1e58c9',
flexWrap: 'nowrap'
})
}
This is React part, this is what I am rendering
<ReactSelect
options={this.props.options}
styles={customStyles}
{...this.props}
/>
{allowClosing && (
<CloseWidget place={dpdown} allowClosing={allowClosing} id={id} />
)}
You could e.g. keep that config object as the class variable to have access to props as well as to state:
state = {
width: 250,
}
customStyles: StylesConfig = {
indicatorSeparator: () => ({ display: 'none' }),
menu: () => ({
width: this.state.width + 'px',
}),
}
You will also have to check if props have changed:
static getDerivedStateFromProps(props, state) {
if (state.width !== props.width)
return {
width: props.width,
};
}
};
And then in your component:
<ReactSelect
options={this.props.options}
styles={this.customStyles}
{...this.props}
/>
The text is currently grey, and hard to see, I want to make it black so it is noticeable. Whenever I change the select value it changes, but when I try to set the default color of the control text to black it doesn't do anything. My other settings work, such as backgroundColor, fontfamily works.
I am setting the placeholder value to my state when rendered.
const colourStyles = {
control: styles => ({ ...styles, fontFamily: 'Times new roman, sans-serif !important', color: 'black', backgroundColor: this.state.selectedOption.value || this.state.statusLiveOff, fontSize: 23, paddingLeft: 'center', height:46})
}
<Select
onChange={this.handleChange}
options={optionsStatus}
styles={colourStyles}
placeholder= {this.state.statusColor}
/>
You can change the color of the text by changing singleValue styles in your styles object
const colourStyles = {
control: styles => ({ ...styles, fontFamily: 'Times new roman, sans-serif !important', color: 'black', backgroundColor: this.state.selectedOption.value || this.state.statusLiveOff, fontSize: 23, paddingLeft: 'center', height:46}),
singleValue: styles => ({...styles, color: 'black'})
}