I need some help. I use material-ui Grid system, and my full page is responsive like a charm, but i need at grid components overflowX with fixed header, so only the Grid container should be a horizontal scrollbar, but i tried a lot of things but nothing works.
I have this gird system. So i would like horizontal scrolling when im generated more grid item.
This is my code-snippet for this part.
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="droppable" direction={windowInnerWidth > 1280 ? 'horizontal' : 'vertical'} type="droppableItem">
{(provided, snapshot) => (
<div>
{windowInnerWidth > 1280 ? (
<Grid container spacing={6} ref={provided.innerRef} {...provided.droppableProps} >
{mergedData &&
mergedData.map((section, index) => (
<Grid item xs={12} xl="auto" lg="auto" key={section.uid} >
<Draggable
key={section.id}
draggableId={section.id}
index={index}
// isDragDisabled={false}
>
{(provided, snapshot) => (
<Card ref={provided.innerRef} {...provided.draggableProps} style={provided.draggableProps.style}>
<CardContent key={section.uid} index={props.index}>
<MyWorkoutSectionListItem
type={section.id} // type
key={section.id}
section={section}
provided={provided}
index={index}
workouts={section.workouts.filter((workout) => {
return workout.title.toLowerCase().includes(props.search.toLowerCase());
})} // subItems
workoutSections={props.workoutSections}
sectionName={props.sectionName}
defaultSectionId={defaultSectionId}
deleteSection={props.deleteSection}
handleWorkoutChange={props.handleWorkoutChange}
handleSectionChange={props.handleSectionChange}
changeMergeData={props.changeMergeData}
/>
{provided.placeholder}
</CardContent>
</Card>
)}
</Draggable>
</Grid>
))}
{provided.placeholder}
It would be great if somebody has idea for this problem.
You need to Use wrap={"nowrap"} prop on container Grid component and also need to provide the overflowX="auto".
Something like this
....
<Grid container spacing={2} wrap={"nowrap"} style={{ overflowX: "auto" }}>
<Grid item>Hello</Grid>
<Grid item>Hello</Grid>
</Grid>
...
I have created this Code sandbox project with the exact implementations
Related
This error shows in my dev tools when I load my app. I'm not sure how to go about changing it to fix the problem. I suspect it is a reason why when I deploy it to heroku it looks different that when I view it locally so I'm hoping if I fix this it will fix my problem with heroku as well.
Here is my code:
return (
<Container className="container" maxWidth="xl">
<CssBaseline />
{/* <Box sx={{ marginTop: 10, padding: 7, bgcolor: "#eeeeee", borderRadius: "0.3rem" }}> */}
<Grid className="homeContainer" container spacing={1}>
<Grid className="topGrid">
<Grid className="imageContainer" item xs={4} sx={{ }}>
<img className="cctLogoLarge" src={cctlogo1} alt="outline of horse with parliament buildings in background"></img>
</Grid>
<Grid className="introContainer" item xs={12}>
<p>Welcome to Cap City Trotters! The CCT was created in 2019 by KMAC, Lynch, Bruster, and Damarts. Our Routes include several loops in both Ottawa and Gatineau.
We are always looking for new members so if you want to join you can take a look at some of our main routes and signup if you like what you see!</p>
{/* Test Connect to Strava */}
</Grid>
</Grid>
<Grid >
<Grid className="postList-grid">
{/* {loggedIn && (
<div className="col-12 mb-3">
<PostForm />
</div>
)} */}
<Grid item xs={6} sx={{ bgcolor: ""}} className="recentPosts">
{loading ? (
<div>Loading...</div>
) : (
<PostList posts={posts}/>
)}
</Grid>
{loggedIn && userData ? (
<Grid>
{/* <FriendList
username={userData.me.username}
friendCount={userData.me.friendCount}
friends={userData.me.friends}
/> */}
</Grid>
) : null}
</Grid>
</Grid>
{/* </Box> */}
</Grid>
</Container>
)
I've looked at similar questions and answers but can't figure out how to solve this problem specifically.
Thanks in advance!
Whenever you add a prop without a value to React component, it evaluates to true:
<MyComponent boo />
Here, MyComponent receives a boo = true property. That's what you have in your code with item, while it shouldn't be a boolean value. Just pass some value to item:
<Grid item={somethingElse}>
I'm using MUI V.5 with React.
And I would like to display an image in my grid, when rows are empty (when the user search for a product into the grid and can't find any result).
But I don't know how to access to this part sin filas (img reference)
enter image description here
{products ? (
<Box component="div" style={{ width: '100%' }}>
<DataGrid
rows={rows}
columns={columns}
checkboxSelection={true}
autoHeight
density="comfortable"
/>
</Box>
) : (
<div>Loading</div>
)}
</>
You can define a new component and override NoRowsOverlay component of MUI datagrid like this:
const MyCustomNoRowsOverlay = () => (
<img src="/no-items-found.jpg" alt="no-item" />
);
<DataGrid
components={{
NoRowsOverlay: MyCustomNoRowsOverlay
}}
You can take a look at this sandbox for a live working example of this solution.
I am creating an emojipedia app where it is expected to open a Modal, which contains the description of the emoji, when an emoji is pressed. As far as I know, to do so, I need to map the description(contained in emojipedia.js file) of the emoji to the EmojiContainer component in Components folder.
Here comes my problem where when I press a emoji, it is getting hanged. Why is this happening and how to fix this???
THANKS IN ADVANCE.
You are using a single state on EmojiContainer to control all modals in your emoji list. As a consequence, when you try and open a modal, all modals open. A better option would be to encapsulate all logic relative to a single modal in a separate, reusable component:
export default function Emoji({ item }) {
const [open, setOpen] = useState(false);
return (
<Grid item lg={2} md={3} xs={6}>
<ImageButton onClick={() => setOpen(true)}>
<CardMedia
sx={{
"&:hover": {
transform: "scale(1.3)"
}
}}
component="img"
height="100"
image={item.link}
alt="emoji"
/>
</ImageButton>
<Modal
open={open}
onClose={() => setOpen(false)}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Typography sx={style} variant="p">
{item.desc}
</Typography>
</Modal>
</Grid>
);
}
As you see this component has its own state and controls its own modal. In your EmojiContainer you can use it like this:
export default function EmojiContainer() {
return (
<Grid>
{emojipedia.map((item, index) => (
<Grid key={index} container>
<Emoji item={item} />
</Grid>
))}
</Grid>
);
}
From what I see you'll also need to adjust the modal styling. Here's the updated codesandbox
i am trying to create a Dynamic Material UI Flex box that generate a new row based on backend . my idea is to close the current outer Box and create a new one based on a flag
so i write the following code
<Box p="1em">
<Box display="flex">
{tabs.map((t, index) => {
return (
<>
<Box flex={resourcesTabs[index][0] == null ? 1 : resourcesTabs[index][0]['width_class']} ml="1em">
<Typography variant="h6" gutterBottom>{t}</Typography>
{resourcesFields[index] && resourcesFields[index].map((f, index) =>
generateInputField(f, index)
)}
</Box>
{resourcesTabs[index][0]['new_line_after'] && </Box><Box display="flex">}
</>
);
})}
</Box>
</Box>
But i recive the following Error
Parsing error: Unexpected token
as it complain about close open tags dynamic for this line
{resourcesTabs[index][0]['new_line_after'] && (</Box><Box display="flex">}
any idea how to solve this ?
There is a sneaky parenthesis:
{resourcesTabs[index][0]['new_line_after'] && => ( <= </Box><Box display="flex">}
i fixed it by replace box with grid as the following code
<div style={{ padding: 10 }}>
<Grid container spacing={3}>
{tabs.map((t, index) => {
return (
<>
<Grid item xs={resourcesTabs[index][0] == null ? 6 : resourcesTabs[index][0]['width_class']} >
<Typography variant="h6" gutterBottom>{t}</Typography>
{resourcesFields[index] && resourcesFields[index].map((f, index) =>
generateInputField(f, index)
)}
</Grid>
</>
);
}
)}
</Grid>
</div>
I am new to both React and Grommet and have worked through the getting started tutorial. When I add a google map to the main container it renders and fills the whole screen. However, when I click the notification icon to load the sidebar it only renders in a tiny column on the side. Is there a way for me to edit the style to adjust the width automatically or do I need to have the container width as a property that changes when the button is clicked? (Please excuse any question format errors as this is my first post.)
I have tried looking through the Grommet box props and various CSS style settings without success.
App.js:
const { showSidebar } = this.state;
return (
<Grommet theme={theme} full>
<ResponsiveContext.Consumer>
{size => (
...
<Box direction='row' flex overflow={{ horizontal: 'hidden' }}>
<Box
align='start'
justify='start'
fill='horizontal'
responsive='true'
>
<MapContainer />
</Box>
{!showSidebar || size !== 'small' ? (
<Collapsible direction='horizontal' open={showSidebar}>
<Box
flex
width='medium'
background='light-2'
elevation='small'
align='center'
justify='center'
>
sidebar
</Box>
</Collapsible>
) : (
...
}
</Box>
</Box>
)}
</ResponsiveContext.Consumer>
</Grommet>
);
MapContainer.js:
return (
<Map google={this.props.google} zoom={14}/>
);
I would like the map to shrink to fill the container/the container to shrink when the sidebar loads.