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
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>
))}
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
I am working on an app, where I have a screen, whose content is larger than the size of my screen (the height of the content depends on data from API). So I wrapped the content in a View and put this View inside ScrollView to make the screen scrollable. However it will not scroll, unless I specify the height of the content in contentContainerStyle.
To understand how it works, I put a single Text component with a long text and large font size (so that it exceeds my screen size) inside a ScrollView, and it is just normal scrollable even without setting contentContainerStyle. Could somebody explain, how does it work, and why my content is not scrollable in the first case?
Current working code:
<View style={{flex: 1}}>
<ScrollView contentContainerStyle={{height: contentHeight}}>
{renderContent()}
{/* <Text style={{fontSize: 300}}>AABABBABABABABABBAB</Text> */}
</ScrollView>
</View>
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
I am attempting to implement a responsive app with antd.
One of the things I have is a Sider menu as my main navigation. One of the things I would like to do is that on small screens this sider be collapsed (as the hamburguer icon preferrably). I have no idea how to even start this. My component with the sidebar looks something like this:
class App extends React.Component {
render() {
return (
<Layout>
<Sider width={200} collapsedWidth={500}>
<Menu
mode="inline"
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
style={{ height: '100%' }}
>
<Menu.Item key="1">option1</Menu.Item>
<Menu.Item key="2">option2</Menu.Item>
<Menu.Item key="3">option3</Menu.Item>
<Menu.Item key="4">option4</Menu.Item>
</Menu>
</Sider>
</Layout>
);
}
}
I should probably also point out that from the Layout docs, the following is said:
Note: You can get a responsive layout by setting breakpoint, the Sider will collapse to the width of collapsedWidth when window width is below the breakpoint. And a special trigger will appear if the collapsedWidth is set to 0.
However I could not get this to work. Perhaps I misunderstand it.
Unfortunately I am not able to embed my sample app in the editor here, so I here is my working sample app. All I would like to do is collapse my Sider navbar into a hamburguer icon or even an arrow like icon on small screens. Where do I go from here?
You have a collapsible sider official example.
From here you can choose whatever width \ icons you need based on state.
Also, you have a good example of antd components, especially a sidebar with the hamburger icon.