Long Text inside Table Cell Overflow [duplicate]

Question

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 did not understand the desired behavior, you don't want the text to stack sentences over the other, creating an ellipse, but you don't want a horizontal scroll bar either? You want to truncate the text? — Pedro Vieira
– Pedro Vieira, Commented Jun 12, 2019 at 17:45
Sorry, I've edited the question. I want the text to stay inside the page width, not scrolling horizontally. — Jumpa
– Jumpa, Commented Jun 12, 2019 at 18:18
In the dupe link, this answer might be useful: stackoverflow.com/a/11004369/2827823 ... also check the question itself, it shows what more is needed. — Asons
– Asons, Commented Jun 12, 2019 at 19:01

Pedro Vieira · Accepted Answer · 2019-06-12 18:51:58Z

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

Collectives™ on Stack Overflow

Long Text inside Table Cell Overflow [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related