I am creating a scrollable table with fixed table header and checkboxes. The table worked fine(no overlap of table head and body) without the checkbox. With the checkboxes, all rows scrolls just fine except that checkbox in table body would overlap with checkbox (or show up) in table head.
I tried setting backgrounds to white but won't work.
Issue Demo: https://codesandbox.io/s/vm6l0p1vly
<div
style={{
height: "500px",
width: "100%",
overflow: "auto",
borderStyle: "solid",
borderWidth: 1,
borderColor: "lightGray"
}}
>
<Table>
<TableHead>
<TableRow>
<TableCell
padding="checkbox"
style={{ position: "sticky", top: 0, backgroundColor: "white" }}
>
<Checkbox />
</TableCell>
<TableCell
style={{ position: "sticky", top: 0, backgroundColor: "white" }}
>
id
</TableCell>
<TableCell
style={{ position: "sticky", top: 0, backgroundColor: "white" }}
>
name
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map(row => (
<TableRow key={row.id} hover>
<TableCell padding="checkbox">
<Checkbox />
</TableCell>
<TableCell>{row.id}</TableCell>
<TableCell>{row.name}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
I expect the checkboxes to not overlap.
I don't have enough points to comment, but the answer is to set the z-index: 1 for the header containing the checkbox.
Related
I am currently trying to implemented a draggable re-orderable list with Framer Motion. I am trying to reproduce the following behaviour:
https://codesandbox.io/s/framer-motion-5-drag-to-reorder-lists-uonye?from-embed=&file=/src/Icon.tsx:49-54
I have an ingredientList that contains the create_index of the each of the ingredients created in my Formik form, which are accessible as values.ingredients.
The main issue I am having is that the list items are not behaving smoothly as they do in the code example and I'm not sure what I am doing wrong
This is my parent component in which I set the ingredientList
const IngredientTab = ({values}: any) => {
const [ingredientList, setIngredientList] = useState(values.ingredients.map((ingredient) => ingredient.create_index))
return (
<div css={IngredientTabStyles}>
<FieldArray name="ingredients">
{({ insert, remove, push }) => (
<div>
<Reorder.Group axis="y" values={ingredientList} onReorder={setIngredientList}>
<AnimatePresence>
{ingredientList.map((ingredientUniqueValue, index) => {
return (
<Ingredient
key={index}
index={index}
uniqueValue={ingredientUniqueValue}
ingredients={values.ingredients}
order={`${ingredientList.indexOf(ingredientUniqueValue) + 1}`}
/>
)
})}
</AnimatePresence>
</Reorder.Group>
<button
type="button"
className="add-ingredients"
onClick={() => {
setIngredientList([...ingredientList, values.ingredients.length])
push({ name: '', additional_info: '', quantity: '', unit_id: '', create_index: values.ingredients.length})
}}
>
Add Ingredient
</button>
</div>
)}
</FieldArray>
</div>
)
}
export default IngredientTab
const IngredientTabStyles = css`
.ingredient-fields {
margin-bottom: 2rem;
background-color: white;
}
`
And this is the Item component:
const Ingredient = ({ uniqueValue, ingredients, order, ingredient}: any) => {
const y = useMotionValue(0);
const boxShadow = useRaisedShadow(y);
const ingredientIndex = ingredients.findIndex(ingredient => ingredient.create_index==uniqueValue)
return (
<Reorder.Item
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
key={uniqueValue}
value={uniqueValue}
style={{boxShadow,y}}
>
{ingredient}
<div className="ingredient-fields" css={IngredientStyles}>
<div className="order">
<h6>{order}</h6>
</div>
<div className="ingredient-name">
<Field
name={`ingredients.${ingredientIndex}.name`}
type='text'
placeholder="Ingredient"
/>
<Field
name={`ingredients.${ingredientIndex}.additional_info`}
type='text'
placeholder="Description"
/>
</div>
<Field
name={`ingredients.${ingredientIndex}.quantity`}
type='number'
placeholder="Quantity"
/>
</div>
</Reorder.Item>
)
}
export default Ingredient
const IngredientStyles = css`
display: flex;
margin-bottom: 2rem;
.order {
display: flex;
align-items: center;
background-color: ${theme.components.grey};
padding: 1rem 2rem;
margin-right: 2rem;
border-radius: 0.4rem;
}
.ingredient-name {
display: flex;
}
input {
padding-bottom: 1rem;
border: none;
border-bottom: 1px solid ${theme.colors.lightGrey};
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
}
`
I tried to take screenshots of the behaviour that I currently have. If I try to drag the 'bonjour' to the first position, the 1st item 'hello' does not move downwards. Instead what happens onReorder, what you see in the second picture, the bonjour and hello abruptly switch and it looks as though I am dragging the 'hello' item
I have a MUI Accordion in my React project, and I would like for it to collapse when the user clicks somewhere else on the page.
I would like to do this via css, as I am doing the following via css:
.focus {
/* border: 2px solid red !important; */
background-color: white !important;
}
<Accordion>
<AccordionSummary
focusVisibleClassName='focus'
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<TextField
style={{ width: 350 }}
id="entityName"
value={entity.entityName}
onChange={(event) => {
setEntity({ ...entity, entityName: event.target.value });
}}
/>
</AccordionSummary>
<AccordionDetails sx={{ borderTop: '1px dashed black', width: 400 }}>
<Typography>
Source
</Typography>
<TextField sx={{ width: 350 }}></TextField>
<Typography>
Classification
</Typography>
<TextField sx={{ width: 350 }}></TextField>
</AccordionDetails>
</Accordion>
I appreciate your assistance.
I have searched on this requirement, and not found any results.
You can implement ClickAwayListener component to detect when a click event happens outside of its child element. And to get the current state of the expended prop you have to add onChange prop to your Accordion component, and finally make use of expanded prop to set its value (true/false). Please take a look at the code below for a better understanding. also, a working example was added as a link.
Import:
import ClickAwayListener from '#mui/material/ClickAwayListener';
And inside your function:
const [open, setOpen] = useState(false);
const handleClickAway = () => {
if(open){
setOpen(false);
}
};
return (
<ClickAwayListener onClickAway={handleClickAway}>
<Accordion expanded={open} onChange={(e,expanded)=>{setOpen(expanded)}}>
<AccordionSummary
focusVisibleClassName='focus'
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<TextField
style={{ width: 350 }}
id="entityName"
value={entity.entityName}
onChange={(event) => {
setEntity({ ...entity, entityName: event.target.value });
}}
/>
</AccordionSummary>
<AccordionDetails sx={{ borderTop: '1px dashed black', width: 400 }}>
<Typography>
Source
</Typography>
<TextField sx={{ width: 350 }}></TextField>
<Typography>
Classification
</Typography>
<TextField sx={{ width: 350 }}></TextField>
</AccordionDetails>
</Accordion>
</ClickAwayListener>
);
https://codesandbox.io/s/mui-accordion-clickoutside-kmg1eb?file=/demo.js
i am struggling with an issue when using <Dropdown.Toggle>, actually the arrow moves its position slightly up when clicked, i have spend quite a bit time and tweaked few things inorder to make its position fixed but it remains the same , any suggestions/thoughts please.
Update-1 the original issue is resolved when i set the height=0px under the <Dropdown.Toggle> but now the menu that apperas after i click it appears just after the arrow below but i was expecting it to start after some padding/margin, any thoughts please
-Snippet from ReactJS
return (
<nav className="header">
<ul>
<li>
<Dropdown id="dropdownbasic" as={ButtonGroup} style={{ marginTop: "5px", position: "relative", float: "left", top: "13px" }}>
<Button .......> </Button>
<Dropdown.Toggle
className="signinDropdown"
split
variant="success"
aria-expanded="false"
// below i added the height it solved my first issue and the arrow is now still all the time
style={{ "height":"0px", background: "none", borderStyle: "none", outline: "none !important" }}
/>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</li>
</ul>
</nav>
)
-Snippet from CSS file
```
// added the below css but still the menu starts just below the arrow
#dropdownbasic > :second-child{
top:158px;
padding-top: "13px";
}
.signinDropdown:focus,
signinDropdown.focus {
outline: none;
box-shadow: none;
background-color: none;
box-shadow: none !important;
}
Script :
<v-date-picker v-model="date" #input="changeHours" no-title>
<div class="flex-grow-1"></div>
<v-btn text color="primary" #click="modal = false">Cancel</v-btn>
<v-btn text color="primary" #click="$refs.dialog.save(date)">OK</v-btn>
</v-date-picker>
Demo and full codepen : https://codepen.io/positivethinking639/pen/RwwQpxm
I want to set height of scroll. So the scroll not past the footer or the time schedule displayed is 5 data
How can I do it?
Yes it is possible to set the height of scroll times nest to datepicker.
By default dialog box comes with the scroll that has to be disabled
first, the we can add scroll separately to date picker or time flex
box
Here in the below code, I've moved the datepicker footer buttons as a separate flex and added scroll only to the times, So that it can grow based on number fo time slots
Working codepen here: https://codepen.io/chansv/pen/vYYdKNJ
<div id="app">
<v-app>
<v-content>
<v-container>
<v-btn color="success" dark #click="openModal()">call date {{ date }}</v-btn>
<v-dialog
:return-value.sync="date"
v-model="modal"
content-class="dialog-class"
ref="dialog"
persistent
>
<v-card>
<div>
<v-container grid-list-md text-xs-cente style="padding: 0px;">
<v-layout row wrap>
<v-flex xs8 style="position: fixed;">
<v-date-picker v-model="date" #input="changeHours" no-title>
</v-date-picker>
</v-flex>
<v-flex xs4 style="position: relative; left: 300px;">
<div>
<p class="text-center mt-3 font-weight-bold">Select Time</p> </div>
<p class="text-center subtitle-2 mt-4" v-if="!allowedTimes.length">Please pick date first</p>
<p class="text-center" v-if="!allowedTimes.length"><v-icon>event</v-icon></p>
<div class="my-3" v-show="date !== null" :style="{'background-color':'white','text-align':'center', 'overflow-y': 'scroll', 'height': '220px'}">
<template v-for="(allowedTime, i) in allowedTimes">
<v-btn
:key="i"
#click="setTime(allowedTime)"
class="my-1"
:outlined="allowedTime !== time"
color="primary"
>{{ allowedTime }}</v-btn>
</template>
</div>
</v-flex>
<v-flex xs12>
<v-card>
<v-card-actions style="padding-top: 0px;">
<v-spacer></v-spacer>
<v-btn color="primary" #click="modal = false">Cancel</v-btn>
<v-btn color="primary" #click="$refs.dialog.save(date)">OK</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
</v-card>
</v-dialog>
</v-container>
</v-content>
</v-app>
</div>
css
.v-dialog { box-shadow: none!important; }
.row {
margin-right: 0 !important;
}
.v-picker__body {
flex: none !important;
}
.v-card{
box-shadow: none !important;
}
.dialog-class {
overflow: hidden;
max-height: 345px !important;
max-width: 470px;
}
.v-date-picker-table {
position: relative;
padding: 0 12px;
height: 220px;
}
script
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
date: new Date().toISOString().substr(0, 10),
modal: false,
footer: false,
time: null,
allowedTimes: ['13:00 - 14:00','14:00 - 15:00','15:00 - 16:00','16:00 - 17:00','17:00 - 18:00','18:00 - 19:00','19:00 - 20:00','20:00 - 21:00','21:00 - 22:00']
// allowedTimes: []
}),
methods: {
save(k) {
console.log(this.$refs.dialog);
},
allowedDates: val => parseInt(val.split('-')[2], 10) % 2 === 0,
setTime(time) {
this.time = time
},
changeHours(_val) {
console.log(_val)
this.allowedTimes = ['08:00 - 09:00','09:00 - 10:00']
},
openModal() {
this.modal = true
var self = this;
setTimeout(() =>{
self.setFooter()
}, 0);
},
setFooter() {
if (!this.footer) {
console.log('footer')
var div = document.createElement('div');
var html = "<span><div style='float:left; margin-top:4px; margin-left: 10px; height: 12px; width: 12px; border-radius: 10px; background-color: blue;'></div></span><span style='margin-left: 5px; float: left;font-size:14px'>Available</span><span><div style='float:left;height: 12px; width: 12px; border-radius: 10px; background-color: grey; margin-left:20px; margin-top:4px;'></div></span><span style='margin-left: 8px; float:left; font-size: 14px'>Unavailable</span>";
div.innerHTML = html;
document.querySelector('.v-date-picker-table').append(div);
this.footer = true;
}
}
},
})
By default Card component has a box-shadow style.
I would like to change the box-shadow color if the item is clicked. However I can't even change box-shadow color using styles (no click event).
Card Component render a Paper element, and this element define the styles like this:
function getStyles(props, context) {
const {
circle,
rounded,
transitionEnabled,
zDepth,
} = props;
const {
baseTheme,
paper,
} = context.muiTheme;
return {
root: {
color: paper.color,
backgroundColor: paper.backgroundColor,
transition: transitionEnabled && transitions.easeOut(),
boxSizing: 'border-box',
fontFamily: baseTheme.fontFamily,
WebkitTapHighlightColor: 'rgba(0,0,0,0)', // Remove mobile color flashing (deprecated)
boxShadow: paper.zDepthShadows[zDepth - 1], // No shadow for 0 depth papers
borderRadius: circle ? '50%' : rounded ? '2px' : '0px',
},
};
}
As paper is render using also styles sent as parameter:
<div {...other} style={prepareStyles(Object.assign(styles.root, style))}>
I try to send boxShadow as a parameter:
card: {
position: 'relative',
width: '350px',
color: 'red',
boxShadow: 'rgba(255, 0, 0, 0.117647) 0px 1px 6px, rgba(255, 0, 0, 0.117647) 0px 1px 4px'
},
but nothing happens. My Card component should change shadow value onHover and this effect stops working:
import React, {Component, PropTypes} from 'react'
import {Card, CardActions, CardHeader, CardMedia, CardText} from 'material-ui/Card'
import FlatButton from 'material-ui/FlatButton'
import PictogramMenu from './PictogramMenu'
const styles = {
card: {
position: 'relative',
width: '350px',
color: 'red'
//borderStyle: 'solid',
//borderColor: 'yellowgreen'
//boxShadow: 'rgba(255, 0, 0, 0.117647) 0px 1px 6px, rgba(255, 0, 0, 0.117647) 0px 1px 4px'
},
menu: {
position: 'absolute',
right: '10px',
top: '15px'
},
cardHeader: {
paddingBottom: '40px'
}
}
export default class PictogramCard extends Component {
static propTypes = {
title: PropTypes.string.isRequired,
img: PropTypes.string.isRequired
}
constructor(props) {
super(props)
this.state = {shadow: 1}
}
onMouseOver = () => this.setState({shadow: 3})
onMouseOut = () => this.setState({shadow: 1})
render() {
return (
<Card style={styles.card} containerStyle={{width: 300}} zDepth={this.state.shadow}
onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
<CardHeader />
<PictogramMenu style={styles.menu} />
<CardMedia>
<img src={this.props.img} />
</CardMedia>
<CardText>
{this.props.title}
</CardText>
<CardActions>
<FlatButton label='Tag1' />
<FlatButton label='Tag2' />
</CardActions>
</Card>
)
}
}
Any hint?
Even if the question is dated, I will try to answer it.
It's necessary to override the classes of the component card. These classes are used for theming.
how?
Add classes={{ root: classes.card }} to Card element:
<Card classes={{ root: classes.card }}>
<CardActionArea>
<Grid direction="row" item xs={12} sm={6}>
<CardContent>
<Typography noWrap gutterUp>
{title}
</Typography>
<Typography noWrap variant="body3" color="textPrimary" component="p">
{date} by {author}
</Typography>
<Typography variant="body3" color="textPrimary" component="p">
{body}
</Typography>
</CardContent>
</Grid>
</CardActionArea>
</Card>
Next add styling to your makeStyles like this:
const useStyles = makeStyles({
card: {
borderRadius: 0,
backgroundColor: theme.palette.primary.light,
color: theme.palette.primary.contrastText,
boxShadow: "none"
}
});
And that's it. For more details: go