CODEWITHSUNDEEP
javascriptreactjsmaterial-uilistitem
runnerpaul
runnerpaul

Reputation: 7236

Unable to align ListItem text

I have this material-ui list:

<List dense>
  {this.state.issues.map((item, i) => {
    return <Link target="_blank" to={item.issue_url} key={i}>
      <ListItem button>
        <ListItemText primary={item.issue_state}/>
        <ListItemSecondaryAction>
          <IconButton>
            <ArrowForward/>
          </IconButton>
        </ListItemSecondaryAction>
      </ListItem>
    </Link>
  })
  }
</List>

issue_state is obtained from MongoDB. Can I add another column to my list showing another field from the database? I tried:

<ListItemText primary={item.issue_state}/>
<ListItemText primary={item.issue_title}/>

This displays what I want but the issue_title test is centered. I'd like it left aligned. Can this be done?

Upvotes: 2

Views: 7498

Answers (1)

Oluwafemi Sule
Oluwafemi Sule

Reputation: 38982

ListItemText component renders with the following CSS style that allows it to be flexible to grow and shrink according as the width and height of its content.

flex: 1 1 auto;

Its ancestor ListItem component renders as an inline-flex. AFAICT, the results you're looking to achieve can't be done without overriding these styles. Not to worry, there are other ways to go that uses available APIs exposed in the component.

Never mind that the name for the component seems to be misleading that its usage is specific for rendering text in the list item. A closer look in the ListItemText component API documentation shows that the primary property is of the node type.

That implies that the ListItemText can be used to render string, function, and React.Element in a manner similar to the snippet below.

<ListItemText primary={<div>Foo<br/>Bar<br/>Baz</div>} />

Foo Bar Baz

There is also the secondary property that renders the elements with textual emphasis.

<ListItemText primary="Foo" secondary={<div>Bar<br/>Baz</div>} />

Foo Bar Baz

If you need more control over the children of the ListItemText, the API allows for the flexibility to write it this way

      <ListItemText>
        <Typography variant="subheading">Foo</Typography>
        <Typography variant="body1" color="textSecondary">Bar</Typography>
        <Typography variant="body1" color="textSecondary">Baz</Typography>
      </ListItemText>

Foo Bar Baz

Upvotes: 4

Related Questions