The essence of my problem is that when the screen changes, not all components are resized. And thus the page looks ugly. And I would like all the components to change accordingly.
Now more....On the page I have four components (Breadcrumbs, FilterMethod, Filter, LinkedTable).
Styles are applied to them as follows (all this can be seen in the code, but I will explain for a better understanding):
sx={ContainerStyle} --> Breadcrumbs
sx={StyleSideBar} --> FilterMethod
sx={StyleFilterAndLinkedTable} --> Filter and LinkedTable
Thus, when I resize the page, the ContainerStyle and StyleFilterAndLinkedTable styles work out well (their components resize to match the page size). But the style component StyleSideBar remains static, that is, it does not change in width, and with any size changes, the page remains the same. I would like it to also change according to page size changes.
Yes, I understand that I wrote the minWidth: '350px' and maxWidth: '300px' parameters. But otherwise I don't know how to set the width of this component.
Please tell me how can I solve this issue.
Its code:
return(
<Grid sx={ContainerStyle}>
<Grid container spacing={1} sx={{ width: '100vw', height: '10vh' }}>
<Grid sx={StyleSideBar} >
<CardContent>
<Table>
<TableBody>
<TableRow>
<TableCell>
<FilterMethod
isExpanded={isFilterMethodExpanded}
setIsExpanded={setIsFilterMethodExpanded}
setMethods={props.setMethods}
/>
</TableCell>
</TableRow>
</TableBody>
</Table>
</CardContent>
</Grid>
<Grid container xs={12} sm={7} lg={9} sx={StyleFilterAndLinkedTable}>
<Filter
pageName='Device list'
showBackToButton={false}
showFilter={true}
/>
{!isNaN(amountOfPages) && !isNaN(amountOfItems)?
<LinkedTable
filterData={filterData}
applyFilter={applyFilter}
cursor='device'
/>
: ''}
</Grid>
</Grid>
</Grid>
);
I suggest you use width percentages or a flex box layout. When using width percentages, your component will take up x% of the screen, when using flex, it will automatically calculate each component's width in order to take the maximum available space, I suggest you read this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and for percentages https://www.w3schools.com/cssref/pr_dim_width.asp
Related
I'm having a problem with Next/image, I can't get my head around how the sizing works.
I'm trying to get the images without whitespace around them, but I want it to be responsive without hardcoded image sizes. I used a purple background color to make it clear what I'm trying to get rid of. For some reason the images always show up as a square.
I set the images to 100% width and height so that it takes the size of the parent Box, but it seems like the size of the Box doesn't make a difference. Can anyone explain to me how this works?
I used objectFit=contain so that it retains the correct aspect ratio. And I used layout=responsive for the variable image size.
{images.map((image, index) => (
<Box key={index}>
<Box sx={{ mb: 1, bgcolor: "purple" }}>
{image.url.startsWith("http") && (
<Image
src={image.url}
width="100%"
height="100%"
layout="responsive"
objectFit="contain"
alt="myimage"
/>
)}
</Box>
{textfield and buttons}
</Box>
))}
My site has a sidebar (FiltersSideBar in my code) that contains filters. When the browser is expanded to full screen, the sidebar is in open mode on the left. If the screen width becomes less than 600, the sidebar is hidden and a button (ArrowBackIosNewIcon in my code) appears that can open the sidebar (as if overlaying the home page).
The problem with my code is that when the sidebar changes position (opens/closes), its state is not saved - all sidebar elements return to their original state. Although the applied filters continue to work.
That is, if the user selected any filters in the full-screen mode (for example, checked some categories), they were applied. But after that the browser window shrinks, the filters themselves remain applied, but the sidebar is displayed in the default mode (i.e. the checkboxes are empty again).
I would like to make it so that regardless of the size of the page the sidebar retains its appearance.
FiltersSideBar.jsx
export default function FiltersSideBar(props) {
return (
<CardContent className={props.className}>
<Table>
<TableBody>
<TableRow>
<TableCell>
<Filter1 />
</TableCell>
</TableRow>
<TableRow>
<TableCell>
<Filter2 />
</TableCell>
</TableRow>
</TableBody>
</Table>
</CardContent>
);
}
I don't see how you pass the filters to the sidebar.
But this issue happens because you completely destroy the sidebar to hide which resets its state to default, it would be better to just manipulate the style with display and transition without destroying the sidebar.
like here.
https://codesandbox.io/s/zealous-hodgkin-lf7qwt
Another solution is to make the filters state in the parent component of the sidebar and pass props to it.
Edit: This is the only page with problems. Other pages of the same website display correctly.
I've made a web page with React and Material-UI. The top components are Grid and Container. It looks good in desktop, but in mobile.. well.. this is the side of the screen:
There's extra space created (light grey) and the Pictures and cards venture outside the screen max width. The header (blue) and the background (light blue) have the correct width (the width of the screen).
i'm using Grid and Container.
This is the root component that contains the cards:
<Grid
container
spacing={0}
direction="row"
justify="space-around"
alignItems="center"
style={{ minHeight: "20vh" }}
> ....
This is another container that scapes the width:
<Container maxWidth="lg" style={{ marginBottom: "5vh" }}>
<Paper style={{ padding: 20 }}>
<Grid
container
spacing={0}
direction="column"
justify="flex-start"
alignItems="center"
> ....
The Header that displays correctly it's just an AppBar.
The image at the top that overflows returns:
<div className={classes.heroContent}>
<Container maxWidth="md" align="center">
<Grid
container
direction="column"
justify="flex-end"
alignItems="center"
> ...
And the classes.heroContent is:
heroContent: {
backgroundImage: `url(${grupo})`,
backgroundSize: "cover",
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
padding: theme.spacing(8, 0, 8),
minHeight: "20vh",
}, ...
What could be the reason of this overflow thing? I've been reading the documentation and I can't find the bug.
I`ve solve it. There where two problems.
Problem 1:
One grid component that was the root component of the cards was designated as container but not as item.
Explanation of problem 1:
As the cards are inside the Grid of the parent component, there are also an item. After I designated all Grid components that had at least one Grid inside as a container, and all the Grid that where inside a Grid container directly or indirectly as a parent component as item it almost worked.
Problem 2:
The combination of media sizes inside the cards and margins of the cards where too big for the screen. The solution is to change the margin and width units.
Explanation problem 2:
the cards have this css now:
cards: {
margin: "5vw",
marginBottom: "0vh",
},
media: {
height: "35vh",
width: "45vw",
},
The problem was the units. I was using margin: '5vh' so the margins where calculated according to the height of the vierport. In viewports with bigger heights than widths (mobile) a fraction of the height was still bigger than the width.
I have a GridList with a bunch of images that I am retrieving from an external service. This is used to create an image gallery. These images are updated regularly so the image gallery looks different every time.
How do I turn the image gallery into grayscale or even make it transparent and then use it as a background so that I can put content on top of the image gallery? I want to be able to put text boxes, images on top of the image gallery.
This is what I have so far
<GridList cols={3}>
{
this.state.images.map(image => (
<GridListTile
rows={1}
ref={this.imageRef}
key={image.id}
style={{ padding: 0 }}
>
<img src={image.urls.regular} alt={image.alt_description} />
</GridListTile>
))
}
</GridList>
This is what my UI looks like at the moment:
My issue is with the Hello World text. As you can see from the image, it is at the bottom left. I'd like to put that text in the center and turn the GridList of the image into the background that either transparent or grey scaled.
My end goal is to be able to add other Material UI components on top of the GridList of images. Essentially I wand the GrdList of images to act as background so that I can place other content o top of it.
I've tried adding z-index to the components with no look
Keep both GridList and "Hello world" in same Box container provided by material-ui, and by using Box container's props you can center "Hello World".
Try This
<Box position="relative" >
<GridList cols={3}>
{
this.state.images.map(image => (
<GridListTile
rows={1}
ref={this.imageRef}
key={image.id}
style={{ padding: 0 }}
>
<img src={image.urls.regular} alt={image.alt_description} />
</GridListTile>
))
}
</GridList>
<Box position="absolute" top="50%" align="center" width="100%" zIndex={1}>
<Typography>Hello World</Typography>
</Box>
</Box>
I hope it helps
I am currently trying to make a page with a map on one half and a list on the other. I want to make the list height fill the entire page but I can't seem to find the right way to do so. I am using the react-virtualized list codebase as a starting point and in that code you specify the height dimension by passing in listHeight. But I want the listHeight to be dynamic based on your screen size.
I've tried doing flex: 1, height: 100%, but it doesn't seem to affect the code. I need to somehow make the height value equal to the dimension of the screen size.
<div style={{flex: 1}}>
<AutoSizer>
{({width}) => (
<List
ref="List"
className={styles.List}
height={listHeight}
overscanRowCount={overscanRowCount}
noRowsRenderer={this._noRowsRenderer}
rowCount={rowCount}
rowHeight={
useDynamicRowHeight ? this._getRowHeight : listRowHeight
}
rowRenderer={this._rowRenderer}
scrollToIndex={scrollToIndex}
width={width}
/>
)}
</AutoSizer>
</div>
do style = {{height: "100vh"}}
this will take the entire vertical height of the window