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.
Related
I wonder how do I remove the orange box encapsulating the checkbox. I couldn't find a way to remove it? It does appear when my mouse is clicking on that part.
StyledGrid
export const StyledDataGrid = styled(DataGridPro)(({ theme }) => ({
backgroundColor: theme.palette.common.white,
border: 0,
"& .MuiDataGrid-columnHeader, .MuiDataGrid-cell, .MuiDataGrid-cellCheckbox":
{
border: 0,
":focus": {
outline: "none",
},
},
"& .MuiDataGrid-columnHeaders": {
borderTopLeftRadius: "8px",
borderTopRightRadius: "8px",
backgroundColor: "#fbfbfc",
textTransform: "uppercase",
"& .MuiDataGrid-menuIcon": {
display: "none",
},
"& .MuiDataGrid-columnHeaderTitle": {
color: theme.palette.text.secondary,
},
"& .MuiDataGrid-columnHeader--sorted .MuiDataGrid-columnHeaderTitle": {
color: theme.palette.text.primary,
},
},
"& .MuiDataGrid-row, & .MuiDataGrid-cell": {
maxHeight: "initial !important",
minHeight: "initial !important",
},
}));
Component
<StyledDataGrid
columns={supplierColumns}
rows={rows}
loading={rows.length === 0}
disableSelectionOnClick
checkboxSelection
onSelectionModelChange={(ids) => setSelectedRowIds(ids)}
pageSize={pageSize}
onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
rowsPerPageOptions={[5, 10, 20]}
pagination
/>
I think you have to add outline directly , or try pesudo focus-within selector
export const StyledDataGrid = styled(DataGridPro)(({ theme }) => ({
backgroundColor: theme.palette.common.white,
border: 0,
"& .MuiDataGrid-columnHeader, .MuiDataGrid-cell, .MuiDataGrid-cellCheckbox":
{
border: 0,
outline: "none"
},
}));
export const StyledDataGrid = styled(DataGridPro)(({ theme }) => ({
backgroundColor: theme.palette.common.white,
border: 0,
"& .MuiDataGrid-columnHeader, .MuiDataGrid-cell, .MuiDataGrid-cellCheckbox":
{
border: 0,
"& :focus-within": {
outline: "none"
}
},
}));
im using the MUI Data Grid Pro, and trying removing the animations.
currently i managed to remove the open animation but when closing the closing animation remains.
for example: the column menu on closing has a delay/disappearing-effect which i try to get rid off.
Attempts:
i used the prop componentProps to set all the css related to animation to unset or none.
i used the components prop to replace the columnMenu with custom menu.
Table Column Menu Component
const StyledGridColumnMenuContainer = styled(GridColumnMenuContainer)(() => ({
background: 'var(--neutral-element-dark)',
color: 'white',
borderRadius: '5px',
transition: 'none !important',
transformOrigin: 'unset !important',
}));
export const TableMenu = ({
hideMenu,
currentColumn,
color,
open,
...rest
}) => {
return (
<StyledGridColumnMenuContainer
open={open}
hideMenu={hideMenu}
currentColumn={currentColumn}
{...rest}
>
<SortGridMenuItems onClick={hideMenu} column={currentColumn} />
<GridFilterMenuItem onClick={hideMenu} column={currentColumn} />
</StyledGridColumnMenuContainer>
);
};
MUI Table
const componentProps = {
basePopper: {
sx: {
backgroundColor: 'var(--neutral-element-dark)',
borderRadius: '5px',
fontFamily: 'Open Sans',
fontWeight: 300,
transformOrigin: 'unset !important',
'& .MuiPaper-root': {
backgroundColor: 'var(--neutral-element-dark)',
borderRadius: '5px',
transition: 'none !important',
animationDuration: '0s !important',
transitionDuration: '0s !important',
fontFamily: 'Open Sans',
fontWeight: 300,
transformOrigin: 'unset !important',
},
'& .MuiInputLabel-formControl, .MuiInput-input, .MuiButtonBase-root': {
color: 'white !important',
transitionDuration: '0s !important',
},
'& .MuiInput-underline::after': {
// transitionDuration: '0s !important',
borderColor: 'black !important',
},
},
},
columnMenu: {
transition: 'none !important',
},
};
const MUITable = (props: DataGridProProps) => {
return (
<StyledTableContainer>
<StyledTable
components={{
Pagination,
ColumnMenu: TableMenu,
}}
componentsProps={componentProps}
{...props}
/>
</StyledTableContainer>
);
};
I have a Select component like this:
<Select
className="multiple-select"
closeMenuOnSelect={false}
blurInputOnSelect={false}
hideSelectedOptions={false}
isMulti
autoFocus
isSearchable
/>
I have also other props for handle de data, options etc, but that's not the case here, i think.
Why my component is closing every time i select an option? even with this props.
There's something related to the component re-render when I select an option? And what can I do to fix this?
UPDATE
Giving more context to the code...
I have a custom style:
const customStyles = {
control: (base, state) => ({
...base,
boxShadow: state.isFocused ? 0 : 0,
borderColor: state.isFocused ? '#FFC600' : '#9CAEC1',
'&:hover': {
borderColor: state.isFocused ? '#FFC600' : base.borderColor,
},
}),
placeholder: (base) => ({
...base,
font: 'normal 15px/24px Montserrat',
color: '#9CAEC1',
}),
option: (base, state) => ({
...base,
minHeight: '62px',
maxHeight: '62px',
width: '270px',
minWidth: '270px',
maxWidth: '270px',
lineHeight: '48px !important',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
display: 'inline-block',
verticalAlign: 'middle',
cursor: 'pointer',
font: 'normal 15px/24px Montserrat',
color: state.isSelected ? '#fff' : '#6D839A',
backgroundColor: state.isSelected ? '#029619' : null,
':hover': {
background: '#029619',
color: '#fff',
},
}),
menuList: (base) => ({
...base,
minHeight: 'auto',
maxHeight: '250px',
'::-webkit-scrollbar': {
width: '10px',
height: '10px',
},
'::-webkit-scrollbar-track': {
background: '#E4E8ED',
borderRadius: '5rem',
},
'::-webkit-scrollbar-thumb': {
background: '#6D839A',
borderRadius: '5rem',
},
}),
valueContainer: (provided, state) => ({
...provided,
textOverflow: 'ellipsis',
maxWidth: '90%',
whiteSpace: 'nowrap',
overflow: 'hidden',
display: 'initial',
font: 'normal 15px/24px Montserrat',
color: '#6D839A',
}),
};
I customized too the multivalue container:
const multiValueContainer = ({ selectProps, data }) => {
const label = data.value;
const val = `${label}, `;
return val;
};
My component looks like this: (the onClickHandler function that I receive by props just set a state in a reducer, where this state receive the options selected)
function MultipleSelect(props) {
const { onClickHandler, data, selected, label } = props;
function msg() {
if (data.length > 0) {
return `Sorry, no results :(`;
} else {
return 'Loading items...';
}
}
function onSelectHandler(e) {
if (e.length === 0) {
onClickHandler([], props);
} else {
const selected_ideas = [];
e.forEach((option_selected) => {
selected_ideas.push(
...data.filter((idea) => idea.value === option_selected.value),
);
});
if (selected_ideas.length) {
onClickHandler(selected_ideas, props);
} else {
console.warn('onSelectHandler received invalid argument -> ', e);
return;
}
}
}
return (
<Wrapper selected={selected}>
<Select
className="multiple-select"
components={{ MultiValueContainer: multiValueContainer }}
styles={customStyles}
options={data}
value={selected}
onChange={onSelectHandler}
placeholder={label}
noOptionsMessage={msg}
closeMenuOnSelect={false}
blurInputOnSelect={false}
hideSelectedOptions={false}
isMulti
autoFocus
isSearchable
/>
</Wrapper>
);
}
MultipleSelect.propTypes = {
onClickHandler: PropTypes.func.isRequired,
data: PropTypes.arrayOf(
PropTypes.shape({
value: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
}),
).isRequired,
label: PropTypes.string.isRequired,
};
export default MultipleSelect;
My Wrapper component:
const Wrapper = styled('div')`
position: relative;
width: 100%;
max-width: 280px;
height: fit-content;
display: flex;
flex-direction: column;
margin: 24px auto;
justify-content: center;
align-items: center;
.multiple-select {
width: 100%;
}
.multiple-select .css-tlfecz-indicatorContainer,
.multiple-select .css-1okebmr-indicatorSeparator {
color: ${(props) => props.theme.colors.gray300};
}
.multiple-select .css-b8ldur-Input {
font: normal 15px/24px Montserrat;
border-top: ${(props) =>
props.selected.length > 0 ? `1px solid #9CAEC1` : 'none'};
}
`;
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.
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