CODEWITHSUNDEEP
reactjsweb-applicationssemantic-uisemantic-ui-react
Parzival Faraday
Parzival Faraday

Reputation: 11

Grid Columns Prop Not Working Semantic UI

I'm trying to only have one column in a grid. But the prop columns={1} is not working. And the columns are not taking the whole width of the window.

This is the code where I return the component. 

return (
        <Grid columns={1} textAlign='center' container divided='vertically'>
            <Grid.Column width={6}>
                <Search fluid size='huge'
                    loading = {isLoading}
                    onResultSelect = {this.handleResultSelect}
                    onSearchChange = {this.handleSearchChange}
                    results = {results}
                    value = {value} />
                {this.state.rides}
            </Grid.Column>
            <Grid.Column width={10}>
                <Image src={faker.image.avatar()} style={{ backgroundSize: 'cover' }} />
            </Grid.Column> 
        </Grid>
    );

Image of how it looks at present.

enter image description here

Upvotes: 1

Views: 2024

Answers (2)

Oleksandr Fediashov
Oleksandr Fediashov

Reputation: 4335

In fact, it's wrong usage of props, columns and width can't be combined. Take a look on this issue on Github, it contains more info about Grid. Also, you can check official docs of SUI.

Upvotes: 2

chipit24
chipit24

Reputation: 6987

This is because of the width prop you have on your Grid.Column sub-components. The width for each child column should add up to the total number of columns you have specified.

You could add multiple Grid.Column components to the following layout and they will all appear in a single column:

<Grid
  columns={1}
  textAlign="center"
  container
  divided="vertically"
>
    <Grid.Column>
      ...
    </Grid.Column>
    <Grid.Column>
      ...
    </Grid.Column>
</Grid>

What is the result you are trying to achieve?

I set up an example to play around with at the following URL: https://codesandbox.io/s/pyvqv1k01m

Upvotes: 0

Related Questions