react + semantic ui: access column width

Question

I'm using the grid component, and according to the doc, the Row.Column component has a width attribute, that I'd like to access.

class MainGrid extends Component {
  render() {
    return (
      <Grid>
        <Grid.Row columns={2}>
          <Grid.Column>
            <JsonEditor
              width={???} // <---- I'd like to set the width property with the column's width property
            />
          </Grid.Column>
          <Grid.Column>
          </Grid.Column>
        </Grid.Row>

        <Grid.Row columns={1}>
        </Grid.Row>
      </Grid>
    );
  }
}

If I understand correctly, it's fine to use a Row.Column property for my JsonEditor component, because it's passing a property from a parent to a child. But I cannot figure out how to do that.

what about if you set the Grid.Column width and make JsonEditor width 100% ? — Kyaw Siesein
– Kyaw Siesein, Commented Aug 25, 2018 at 6:47
The JsonEditor's width property is in pixels unfortunately. — little-dude
– little-dude, Commented Aug 25, 2018 at 18:29

rjo · Accepted Answer · 2018-08-25 19:09:29Z

1

Assuming JsonEditor is a wrapper for the react-ace editor, you should be able to set width to 100% to get an editor the full width of the containing column. The value is passed to the style attribute verbatim.

This means @kyaw-siesein's suggestion is on the money!

answered Aug 25, 2018 at 19:09

rjo

261 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

react + semantic ui: access column width

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related