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.
Related
I am using material ui in react. I have a Popover component, which has a Grid component inside it. The size of the Grid component is dynamic, i.e. it's height can increase. The regular behavior of Popover is to make sure that it stays on the screen. But when I use a Grid component inside Popover , and when the height of the Grid increases, the Popover is overflowing and going below the screen.
return (
<Popover
open={Boolean(anchorEl)}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'top',
horizontal: 'left',
}}
transformOrigin={{
vertical: "top",
horizontal: "left"
}}
aria-labelledby="draggable-dialog-title"
>
<div>
<DemoGrid />
</div>
</Popover>
);
function DemoGrid(){
const [list,setList] = useState(["hi"]);
return <Grid container spacing={2} >
<button onClick={()=>setList(prev=>[...prev,"hi"])}>add new</button>
{list.map((i,j)=><Grid item xs={8} key={i+j}>
<p>{`${j} ${i}`}</p>
</Grid>)}
</Grid>;
}
So the DemoGrid component, basically is the component which consists of a button, whose on click will add a new Grid item and thereby increase the height of the Grid component, now when the Grid items are too many, the Popover overflows below the screen as shown below.
What can I do so that the Popover stays on the screen. And why isn't the Popover retaining its properties when I use a display:flex (Grid component) inside it?
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 have a button with a title that fits perfectly in my phone, but I received some issues from other people with bigger font sizes, where the text gets cropped because the button background is too small.
I thought this was because I used width and height with literals, so I changed it to percentages, but the error persists.
How can I adjust the button size to hold the text properly on any device?
This is my button
button: {
backgroundColor: blue,
justifyContent: 'center',
padding: 9,
borderRadius: 5,
marginTop: 10,
width: '40%',
height: '10%',
},
and this is how i use it
<View style={styles.button}>
<Ionicons.Button
name="alarm"
size={20}
color="white"
onPress={showTimepicker}
backgroundColor={'transparent'}>
<Text style={styles.notifsText}>Definir horario de Notificaciones</Text>
</Ionicons.Button>
</View>
This is how it looks on my phone
This is how it looks on my friend`s phone
Try this
<Text allowFontScaling={false}>example </Text>
width and height as percentages refer to a percentage of the inherited parent size, so the button will remain the same size, respective of the parent not changing its size. Try removing these attributes to allow the button to take on its full available size.
This happens because default value of allowFontScaling is true thats why its keeps different on different phone.You can pass allowFontScaling={false} as a prop to solve this issue
You could also use vw or vh as units for font size. With some calculations you'll get an appropriate solution.
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 would like to have a band over a component when the component is locked.
The Review component root is a Material UI Paper element that has a host of other elements inside this Paper. There are a half dozen of these particular elements on the page. When locked===true for each element, I want something to sit, centered (vert and horz), on top of the review element.
I found that a Popover element works fine as it can be moved to center/center. However, being a Modal, it doesn't allow interaction with the rest of the page.
<Popover
id={"id"}
open={Boolean(anchorEl)}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'center',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'center',
horizontal: 'center',
}}
>The content of the Popover.</Popover>
I then ensure that anchorEl points to the correct Paper. This works for a 'popover'... The popper element, which is one that isn't in the modal tree (and thus allows multiple and doesn't steal control of the entire app) doesn't have the positioning needed.
<Popper id={'popperID'} open={Boolean(anchorEl)} anchorEl={anchorEl} placement={'top'} transition>
{({ TransitionProps }) => (
<Fade {...TransitionProps}>
<div className={classes.busy}>The content of the Popper.</div>
</Fade>
)}
</Popper>
This puts the element vertically on top (y-axis) my anchorEl... which is not what I want.
I've also tried just putting another Paper in there, but it just ends up vertically 'below' my component.
EDIT: Worth noting I have also tried to position it with CSS. The problem is that absolute positioning (that should position it relative to the parent) seems to position it relative to the entire app instead of the JSX parent/component.
How can I do this?
Use absolute positioning as you said, but you have to give the parent component/element display: relative. Absolute positioning works from the closest ancestor that is not statically positioned. https://www.w3schools.com/cssref/pr_class_position.asp