I am trying to do MUI table which will have sticky headers when scrolling verticaly and also sticky first column when scrolling horizontally, but keep getting results as in demo:
demo.
I triead many styles but keep getting stuck with it :(
For sticky column you can create another style stickyHeader, add zIndex property and set to tablecell
stickyHeader: {
position: "sticky",
left: 0,
background: "white",
boxShadow: "5px 2px 5px grey",
borderRight: "2px solid black",
zIndex: "9999 !important"
}
<TableCell className={classes.stickyHeader}>
Dessert (100g serving)
</TableCell>
Also add maxHeight in TableContainer style for scrolling as added in mui table example.
<TableContainer style={{ maxWidth: 400, maxHeight: 200, border: "1px solid black" }}>
Working example
Related
I want this button to show boxShadow only at Hover. How to do that ?
Button code:
<CButton
style={{
float: 'right',
marginBottom: '15px',
marginRight: '30px',
backgroundColor: '#06ac06',
border: 'none',
boxShadow: '0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19)',
}}
</CButton>
Pseudo-classes like :hover are not available as inline style. You can implement the hover behavior in JS through a React state + onMouseEnter and onMouseLeave listeners (and then set the box-shadow value based on the state). But as you can see, this approach requires too much boilerplate. I would suggest using CSS-in-JS library like styled-components, utility class like Tailwind, or SCSS.
Try this code: https://codesandbox.io/s/kind-morning-s5sh64?file=/src/App.js
const [isHover, setIsHover] = useState(false)
//...
<CButton
onMouseEnter={() => setIsHover(true)}
onMouseLeave={() => setIsHover(false)}
style={{
float: 'right',
marginBottom: '15px',
marginRight: '30px',
backgroundColor: '#06ac06',
border: 'none',
transition: 'box-shadow .3s', //added for Smouth transition
boxShadow: `5px 5px 18px -3px rgba(0,0,0,${isHover ? 0.27 : 0})`,
}}
>
</CButton>
```
Before anyone removes this question and says it is similar to this one please hear me out. I am trying to do almost exactly what is being done in that post. The issue is the person who responded just gave some CSS which does not answer the question at hand. I am trying to do this FULLY in MUI. I would preferably want to be able to style my component using the makeStyles hook.
How would one implement an underline animation below a typography component such as the ones on the navigation bar here? I am really new to JS and MUI so I would appreciate something which is well explained and implemented so I can learn the terminology as well as the frameworks themselves.
This is my code so far. It's just like the one in the first link.
const useStyles = makeStyles({
link: {
color: "white",
position: "relative",
"&:before": {
content: "",
position: "absolute",
width: "0",
height: "2px",
bottom: "0",
left: "0",
backgroundColor: "#FFF",
visibility: "hidden",
transition: "all 0.3s ease-in-out",
},
"&:before:hover": {
visibility: "visible",
width: "100%"
}
}
});
function NavButton(props){
const classes = useStyles();
return (
<a href={`/#${props.text}`}>
<Link className={classes.link}>
<Typography>{props.text}</Typography>
</Link>
{/*<p className={"hover-underline-animation"}*/}
{/* {props.text}*/}
{/*</p>*/}
</a>
);
}
I am receptive to any other types of input. These questions are just as much a way for me to learn as a way to get an answer.
Working code
const useStyles = makeStyles({
link: {
color: 'white',
position: 'relative',
'&:before': {
content: "''",
position: 'absolute',
width: '0',
height: '2px',
bottom: '-3px',
left: '50%',
transform: 'translate(-50%,0%)',
backgroundColor: 'red',
visibility: 'hidden',
transition: 'all 0.3s ease-in-out',
},
'&:hover:before': {
visibility: 'visible',
width: '100%',
},
},
});
<Link underline="never" className={classes.link}>
<Typography component="span">link</Typography>
</Link>
Some explanation why your code didn't work:
Change content: "" to content: "''". Related answer.
Add underline="never" to Link to remove the built-in underline in the anchor element when hovering.
Change the Typography's root component to span or set its display to inline to make the container width and the underline width match the text content.
Change &:before:hover to &:hover:before: The former means hover the underline to run the animation, but its width is 0 so it can't be hovered, the latter means hover the link to run the line animation.
Add these 2 lines to make the underline expands from the middle:
left: '50%',
transform: 'translate(-50%,0%)',
I have spent hours trying to find the right combination to use Link and override the webkit underline to prevent the links in my navigation from having an underline without explicitly adding text-decoration: none to my global CSS. I had to add 'textDecoration: 'none' to the makeStyles function in this example and of course change red to blue but this works beautifully for my nav bar.
const useStyles = makeStyles({
link: {
color: 'white',
position: 'relative',
textDecoration: 'none',
'&:before': {
content: "''",
position: 'absolute',
width: '0',
height: '2px',
bottom: '-3px',
left: '50%',
transform: 'translate(-50%,0%)',
backgroundColor: 'blue',
visibility: 'hidden',
transition: 'all 0.3s ease-in-out',
},
'&:hover:before': {
visibility: 'visible',
width: '100%',
},
},
})
I am using popover and currently, it is a plain rectangle which sits right below the box. I want to add small triangles like a pointer to make it nicer to look at and maybe add margin or padding-top so it will sit a bit lower from the box, just like this.
This is how I called the popover
<Grid item xs={12} sm={3} ref={divToRef}>
<Box pl={2} pt={1}>
<Typography className={classes.weight} variant="caption" color="textSecondary">
{t('search to').toUpperCase()}
</Typography>
</Box>
<Box pl={1}>
<AutoCompleteInput //some codes here />
</Box>
<Popover id="tofield" open={openTo} anchorEl={divToRef.current} onClose={handleClose} anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}} transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}>
<Typography className={classes.popoverText}>
Please enter destination
</Typography>
</Popover>
</Grid>
and I used withStyles to modify the paper
const Popover = withStyles((theme) => ({
root: {},
paper: {
backgroundColor: '#e02020',
boxShadow: '0 20px 15px -20px rgba(0, 0, 0, 0.15)',
borderRadius: theme.spacing(1),
padding: theme.spacing(2),
},
}))(MuiPopover)
How can I add the small triangle and adjust the position of transformOrigin (maybe add padding/margin) of the popover?
You can do this with adding this to the CSS:
.tooltip-top::before {
content: '';
position: absolute;
display: block;
width: 0px;
left: 50%;
top: 0;
border: 15px solid transparent;
border-top: 0;
border-bottom: 15px solid #5494db;
transform: translate(-50%, calc(-100% - 5px));
}
You can play around with those fields to customize where you want the arrow to be, how wide you want it and how tall you want the arrow. Check out this CodePen
Hello Every body i'm using material table but i'm facing a styling issue which is the search fields not aligned like here
Layout view
and i don't know how to do it,
Any Clues ? Thanks In Advance.
there is a prop for styling search box that we can pass in options props like below in given code block
<MaterialTable
options={{
emptyRowsWhenPaging: false,
searchFieldStyle: {
padding: "5px 10px 5px 15px",
borderRadius: "9px",
fontWeight: 450,
disableUnderline: true,
border: "1px solid #707070",
}
}}
/>
I'm using React material-ui SelectField on my page. I'm not able to adjust the height of the select field. Here is my code snippet:
<SelectField
underlineStyle={{
display: 'none'
}}
style={{
width: '49%',
padding: '0 0 5em 5em',
border: '1px solid #ccc',
borderRadius: '5px',
backgroundColor: '#fff',
margin: '16px 0px 0px 28px',
}}
floatingLabelText="Select Stack*"
value={this.state.stack}
onChange={this.handleStackChange.bind(this)}
>
{this.state.dropDownStack}
</SelectField>
My UI is looking as below
I need to reduce the height of dropdown box, how can I do it?
You have to set it using following:
<SelectField
className="custom-selectfield"
underlineStyle={{
visibility: 'hidden',
}}
floatingLabelStyle={{
top: '14px',
}}
style={{
border: '1px solid #ccc',
height: '45px',
}}
floatingLabelText="Select Stack*"
value={this.state.stack}
onChange={this.handleStackChange.bind(this)}>
{this.state.dropDownStack}
</SelectField>
There is some internal CSS applied in material UI so in order to overwrite it added a custom class to SelectPicker component named custom-selectfield
Add following lines in your CSS file
.custom-selectfield > div:nth-child(2) {
margin-top: -6px !important;
}