I have a parent element with a display of table-cell, and a child dropdown element that I want to stretch to fill the available space within the parent element. I've tried setting the child element's width to 100%, or playing with the display/positioning but it's not filling the entire space.
Here's a sandbox of what I'm trying to do:
https://codesandbox.io/s/serene-hermann-b61vwr?file=/src/App.js
as you can see the dropdown size is not the same as the table cell and it looks weird, how can I fix it?
The issue is the table header cells have padding which doesn't work well with your dropdowns. You essentially need to apply a different style to the table cell headers that contain dropdowns.
You may find a more elegant solution with your code but this should help you get started. Now the dropdowns will take the full-width of their cells. Here's an example:
Cloned from StyledTableCell:
const StyledTableDropdownCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.common.white,
borderBottom: 0,
border: "1px solid black",
align: "center",
padding: 0 // <--- No more table header cell padding
},
[`&.${tableCellClasses.body}`]: {
fontSize: 14
}
}));
table.js
<StyledTableRow>
{tableHeadData.map(({ label, align, rowSpan, colSpan }, index) => {
console.log({ label, index });
if ([0,1].includes(index)) { // <--- this could be done better
return (
<StyledTableDropdownCell
key={index}
align={align}
rowSpan={rowSpan}
colSpan={colSpan}
>
{label}
</StyledTableDropdownCell>
);
}
return (
<StyledTableCell
key={index}
align={align}
rowSpan={rowSpan}
colSpan={colSpan}
>
{label}
</StyledTableCell>
);
})}
</StyledTableRow>
Related
I am using MUI for UI.
I have some options, given in image below:
It is perfect till now. But I want to move options container to more bottom. (Currently it is set as top: 64px which is default).
I want to set it as top : 100px. After setting, it will look like :
I have tried to achieve this, but css didn't apply.
const useStyles = makeStyles((theme) => ({
userAge: {
"& .Mui-focused": {
"body .MuiPaper-root": {
top: "100px !important" // 64px is default
}
}
}
}));
//jsx return
<FormControl fullWidth className={classes.userAge}>
// more code here
</FormControl>
You can also try here : https://codesandbox.io/s/funny-shannon-h6flch?file=/demo.tsx
Note :
I don't want to set top : 100px globally.
Made some changes to your codesandbox. Hope it helps ;)
Styles need to be applied to menu via MenuProps and then applying class based styles to paper
https://codesandbox.io/s/change-the-default-position-of-options-in-mui-stackoverflow-lm9mxn?file=/demo.tsx
I'm having some trouble with the Tabs/SwipeableViews from React.
I copied this: MaterialUI Tabs.
Which overall works fine! I just have a small issue with padding in the content.
My result:
Current Result
Overall buttons work all fine and dandy, + the animation aswell. But when I inspect the page there is a 24px padding on the content (It was previously on the buttons aswell, I was able to fix this with just overriding the style. But the content of the *Swipeablev
Wanted result:
Wanted result
I've tried a few different things, even dirty tricks as doing -24px margin. But that broke the tabs.. Any help would be much appreciated and hopefully I gave enough information on the matter!
Have a nice day.
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`full-width-tabpanel-${index}`}
aria-labelledby={`full-width-tab-${index}`}
{...other}
>
{value === index && (
<Box style={{ padding: 0 }} p={3}>
<Typography>{children}</Typography>
</Box>
)}
</div>
);
}
your issue was in the above function. you needed to remove the padding from the Box within the TabPanel function.
I believe the issue was you were giving it the prop of p={3} which gives it default padding
I've successfully implemented the Semantic UI React Dropdown like this:
<div>
<Form.Label>Search and Select Company</Form.Label>
<Dropdown
name='company'
data-testid='companiesDropdown'
placeholder='Ex. Goodyear'
className={classes.errorState}
fluid
search
searchInput={{autoFocus: true}}
selection
options={companies
? companies.map((company, key) => {
return (
{key: key, value: company.company_id, text: company.company_name}
)})
: null}
value={(companyId > 0) ? companyId: null}
onChange={handleDropdownChange}
/>
{determineErrorMessage('companyId')}
</div>
Now I'd like to change the border color if the element is in an error state such as the user hasn't picked an item yet. To do this with any other HTML element, I can just set the className but it doesn't seem to work with this element.
In the example above, I'm just hardcoding the className={classes.errorState} where errorState: { borderColor: 'red' } but doing so doesn't work.
Any ideas on how to get this working properly?
P.S. As a temporary fix I added a <div> wrapper around it which kind of works except you can clearly see the border of the <div> and the border of the <Dropdown> element.
HI i reworked the semantic example for you
As it's a div and not a true HTML list try it like this
CSS
.dropdownRed {
border: 1px solid red !important;
}
JSX
<Dropdown.Menu className={errClass}>
Link to working codesandbox demo
I would like to change react-select option box width.
example here=>
If my content is larger than the option, its show horizontal scroll but I don't want horizontal scroll. How can I change the size of option box width?
Another thing is How can I show the selected value as CscID one even option box is showing CscID + CscDesc? Now when I select the option, its CscID + CscDesc is showing in the selected box.
Here is my Select =>
const formatOptionLabel = ({ CscID, CscDesc }) => (
<div style={{ display: "flex"}}>
<div>{CscID}</div>
<div>{CscDesc}</div>
</div>
);
const customStyles = {
control: styles => ({ ...styles, }),
option: (styles) => {
return {
...styles,
width: '10000px', //For testing
};
},
};
<Select
styles={customStyles}
formatOptionLabel={formatOptionLabel}
getOptionValue={option =>
`${option.CscID}`
}
options={datasource}
/>
Yes, I can edit the width of option box.
const customStyles = {
control: styles => ({ ...styles,
}),
option: styles => ({ ...styles,
}),
menu: styles => ({ ...styles,
width: '500px'
})
};
According to the documentation, Its called menu. If you want to update the other style, check here=> Style Keys
And this option is super helpful for inspecting the menu box => menuIsOpen={true}
You normally don't change width of the wrapping element in your use case. As the text limit can be any so you wont set the width of select according to the text but the text according to your select's width. Meaning the select will have a fixed width and the text exceeding the the fixed width must be converted to ellipsis through css like
.options-select {
overflow: ellipsis
}
Ellipsis on hover must show the fullname in a tooltip for better UX.
For re-size problem, you may refer to this existing answer: React Select auto size width
For second problem, I don't think it is possible by using react-Select.
If you go to github and look further into the source code of react-Select, you may find that the ValueType of value property is expected to be same as OptionsType of options.
To be precise, the code is "export type ValueType = OptionType | OptionsType | null | void;", which could be found in react-select/packages/react-select/src/types.js
For your convenience, this is the link towards its source code, which can help you figure out more hidden behaviors: https://github.com/JedWatson/react-select/tree/master/packages/react-select/src
If you want to jump into live code i prepared this CodeSandBox here:
https://codesandbox.io/s/0j99m3m50
Here's what I am doing:
I have React component with state object having two properties (users, gradient) with values
this.state = {
users: "programmer",
gradient: "linear-gradient(120deg, #f093fb 0%, #f5576c 100%)"
};
And I am rendering user on an h1 JSX tag, but I should see the text clipped to each random gradient background, however it is not working, why?
render() {
const gradually = this.state.gradient;
const userGradient = {
background: `${gradually}`,
WebkitBackgroundClip: "text !important",
backgroundClip: "text !important",
color: "transparent"
};
return (
<div>
<h1 style={userGradient} className="text">
{this.state.users}
</h1>
</div>
);
}
You need to add a unique key on your h1 tag to force a repaint. The key could be the same value as your gradually var. You can also get rid of the !important on your clips.
Here's a link to working changes to your sandbox: https://codesandbox.io/s/css-background-clip-not-being-applied-n34o0
const gradually = this.state.gradient;
const userGradient = {
background: `${gradually}`,
WebkitBackgroundClip: "text", // Removed !important
backgroundClip: "text", // Removed !important
color: "transparent"
};
return (
<div>
<h1
style={userGradient}
className="text"
key={gradually} // Add key
>
{this.state.users}
</h1>
</div>
);
The problem is not in JavaScript and/or React. The problem is in style.
const userGradient = {
background: `${gradually}`,
WebkitBackgroundClip: "text !important",
backgroundClip: "text !important",
color: "transparent" // <------------------ HERE
};
You have set your color to "transparent" so you can't see it cause it is errrrr fully transparent. But it is here. You can find it in your live example (right click, inspect element). So just remove it. Or change it to whatever you want. For example "#f00".
https://developer.mozilla.org/en-US/docs/Web/CSS/color