I am using Material UI with React and wherever I put <Typography> element it gives itself too much height or it is not vertically aligning text inside of it properly. Here are some pictures as examples:
Here is a usage example from one of my screens:
<Typography onClick={() => _redirect("/")} variant="h6" className={classes.title}>
Boardee
</Typography>
classes.title only has a cursor: pointer inside of it.
It is a pretty weird "error". Not sure what to do with it.
Related
I'm trying to get the chart to extend to the bottom only. I tried using a column flex box with height="100vh". However, it's overflowing the screen.
<Flex direction="column" height="100vh">
<Flex flex="1" direction="row">
<div>123456789010 </div>
<Box flex="1">
<div>| 123</div>
<div>| 123</div>
<div>| 123</div>
<div>| 123</div>
<div>| 123</div>
<ThreeDataPoint />
</Box>
</Flex>
</Flex>
I notice that it'll work if I don't have any text above the chart. However, when I put anything above, it will cause it to overflow. It seems to be because the flexbox doesn't notice there's anything above, and is sizing the chart as if there's nothing there.
What could be occurring?
CODESANDBOX HERE
Try configuring the props of your react-financial-charts components.
The auto-sizing behavior of your react-financial-charts package seems to be causing this issue.
When inspecting the page in the browser, you’ll notice that your .react-financial-charts element has a hardcoded height equal to the height of the browser viewport. I had a look at this component with React Developer Tools in Chrome, and it seems to contain an AutoSizer component that may be causing this issue.
You export your BasicLineSeries component this way:
export default withSize({ style: { minHeight: 0 } })(
withDeviceRatio()(BasicLineSeries)
);
So my guess would be that withSize creates AutoSizer, which by default will resize the component to the size of the browser viewport.
The solution would then be to check the documentation for this package and figure out which props you need to use to tell it not to resize automatically.
One solution is to simply add overflow="hidden" prop to your Flex component like this : <Flex direction="column" height="100vh" overflow="hidden">
I am working with Material-UI tabs. Thanks for the help of others in the threat at Creating a Material-UI tab with image tabs instead of text labels, I was able to get images working for my tabs but I cannot control the width of the tabs no matter how small I make the images - the tabs do grow in width if I make the images larger.
I have a Code SandBox at https://codesandbox.io/s/lucid-stonebraker-q1r4v?file=/src/App.js that demonstrates the problem.
I did manage to set the width of the tabs using inline styles but it just clipped the content to the right rather than centering the image in the narrower tab.
Without the inline style, there is a responsive breakpoint at about 600 pixels. Below the breakpoint, the tab width is about 72 pixels. Larger than the breakpoint, the tab width is about 160. I just guessed these numbers by measuring a different browser window and overlying this app on it. If I do manually force the width with the inline style, I can see that the image location still moves at the breakpoint as though the underlying width that the images are centering to is the original tab width as though I hadn't forced the width.
I settled on these exact numbers of width because the visual measurement matched very close to two min-width numbers in the Material-UI tab.js source code. It could be coincidence. I actually did try changing those in the source code and testing again but they had no effect on the breakpoint behavior so I put the file back to original.
If it's at all possible, I'd like to be able to set the width to my own needs, set margins/padding to my own needs, and still have the images centered in the result.
Ciao, to center the image on Tab you have to pass a style to flexContainerVertical class on Tabs in this way:
<Tabs
orientation="vertical"
value={value}
onChange={handleChange}
aria-label="Vertical tabs example"
className={classes.tabs}
classes={{
flexContainerVertical: classes.flexContainerVertical // pass the class flexContainerVertical
}}
>
Then on your makeStyles:
const useStyles = makeStyles((theme) => ({
...
flexContainerVertical: {
display: "flex",
alignItems: "center",
}
}));
And Tab images will appear on center of the Tab.
Here your codesandbox modified.
When I am using the Material UI grid system with a project I am doing using create-react-app. I have two grid items that are adjacent to each other. That look like so:
This is exactly what I want. For some reason; however, when the page loads for a split second the text on the right side gets pushed upward and flashes unstyled like so:
I suspect it is because the image hasn't fully loaded, so the text sits higher up until the image loads. Any advice on how to prevent this or suggestions would be greatly appreciated!!
here is a code sandbox to recreate https://codesandbox.io/s/nifty-jang-kbbty?file=/src/pages/Home.js
if you go from the home page to /portfolio when the code sandbox is in full screen, you will see the flash of unstyled content i am talking about.
<Grid container justify='center' alignItems='center'>
<Grid item xs={12} sm={9} md={9} lg={6} xl={6}>
<img src={JobTracker} alt='jobtracker' style={{ width: '100%' }} />
</Grid>
<Grid item xs={12} sm={9} md={9} lg={6} xl={6}>
<Container maxWidth='xs'>
<Typography variant='h3' style={{ textAlign: 'center' }}>
JobTracker
</Typography>
<br />
<Typography variant='body2'>
A platform that allows recent graduates from Wyncode Academy to
track job applications. Technologies used: ReactJS, NodeJS, Google
Cloud Functions, and Google Firestore.
</Typography>
</Container>
</Grid>
</Grid>
In my experience, I usually wrap images in a wrapper has fixed ratio (usually golden ratio for me) to prevent this behavior. This is because, as long as image has not been loaded, the image container (in your case is Grid component) has zero height.
If you use fixed ratio wrapper approach, the image wrapper always have a height. That's it.
You can read more about that technique here: https://css-tricks.com/aspect-ratio-boxes/
This question already has answers here:
CSS text-overflow in a table cell?
(14 answers)
Closed 3 years ago.
EDIT:
I've attached a screenshot. I'd like the text to use only the available space of the grid non scrolling horizontally.
I've this table on React Material-UI library:
<TableRow>
<TableCell component="th" scope="row">
<Grid container wrap="nowrap" direction="row" alignItems="center">
<Grid item>
<img src="https://images-eu.ssl-images-amazon.com/images/I/41pGDPBowuL._SL75_.jpg" alt="NZXT h200i" />
</Grid>
<Grid item xs zeroMinWidth>
<Typography noWrap>This is a very long text to try the x overflow on the table cell that is not working as expected. Can you help me with this?</Typography>
</Grid>
</Grid>
</TableCell>
</TableRow>
Following this tutorial: https://material-ui.com/components/grid/#white-space-nowrap, I'd like to avoid long text wrapping fulfilling the available space and then ellipsizing. Problem is that the text is overflowing x-axis and scroll bars appear. What am I doing wrong? Many thanks in advance.
I made an example on stackblitz.
The problem is that you are using Tables and that is messing up with the Grid style, I tried to identify where to change the style but with no success. Of course it worked with a inline style like style={{maxWidth:"number_in_pixels"}}, but you application would not be responsive.
What I did in the example was remove the Table, and it work like intended:
function YourComponent() {
return (
<Grid container wrap="nowrap" direction="row" alignItems="center">
<Grid item>
<img src="https://images-eu.ssl-images-amazon.com/images/I/41pGDPBowuL._SL75_.jpg" alt="NZXT h200i" />
</Grid>
<Grid item xs zeroMinWidth>
<Typography noWrap>This is a very long text to try the x overflow on the table cell that is not working as expected. Can you help me with this?</Typography>
</Grid>
</Grid>
);
}
If you really need to organize in a list kind of way, I would suggest using a simple list, I used once with cards and it did not messed up the style for me. Or even use pure Grid or Flex Boxes
I am having a little problem using Grid Component in React JS Project, I will start by writing some code and explain after what I want to achieve using images :
let say that this is the code rendered :
<div style="margin:100px 20%; width:80%" >
<Grid container>
<Grid item xs={6}>
<MyElement
contentLeft="Something displayed in the left"
contentRight="Something displayed in the right"
>
</Grid>
<Grid item xs={6}>
<MyElement
contentLeft="Something displayed in the left"
contentRight="Something displayed in the right"
>
</Grid>
</Grid>
</div>
And here is how it looks let's say ( My Grids in Red and the big div in black ) :
When I resize my window and make it smaller this is how it looks :
I know there is a problem in my proper Element and it is easy because I made its CSS, but I dont know how to control Grids attribute now, because I want that the xs changes from 6 to 12 at a certain position.
How to do so ? if it is not possible, is there a better solution ?
Any help would be much appreciated.
Depends on what size you want it to break from 6 to 12, but it's as simple as putting the right prop values in:
<Grid item xs={12} sm={6}>
Be sure to read the full use case here: https://material-ui.com/layout/grid/