How to add elements in a Semantic React UI grid?

Question

I am using react semantic UI. I want to add a search bar in a grid system. The search bar should take almost entire width (see screenshot 2).

The search bar should be adjacent to an existing sidebar. Currently, I am able to add search bar adjacent to the sidebar but the width is not increasing of sidebar why so? I want search bar to have full width i.e till the end of right side of the screen.

Code:

export default class DashBoard extends Component {

  render() {

    return (
      <div className={styles.container}>
        <Grid stackable columns={3}>
        <Grid.Row>
          <Grid.Column className={styles.sideBar} width={3}>
            <Segment className={styles.sideBarContent}>
                <Header as='h3' className={styles.sideBarHeader}>DashBoard</Header>
                <Header as='h3' className={styles.sideBarHeader}>Donations</Header>
                <Header as='h3' className={styles.sideBarHeader}>Events</Header>
                <Header as='h3' className={styles.sideBarHeader}>Reports</Header>
                <Header as='h3' className={styles.sideBarHeader}>Profile</Header>
                <Header as='h3' className={styles.sideBarHeader}>Donor Intelligence</Header>
            </Segment>
          </Grid.Column>
          <Grid.Column width={5}>
            <div className={styles.searchBar}>
               <Search size='big'/>
            </div>
            <Segment className={styles.piechartContent}>
              <PieChart width={250} height={300}/>
            </Segment>
            <Segment className={styles.multilinechartContent}>
              <MultilineChart width={350} height={325}/>
            </Segment>
          </Grid.Column>
          <Grid.Column width={5}>
            <Segment className={styles.barchartContent}>
              <BarChart width={475} height={375}/>
            </Segment>
            <Segment className={styles.donutchartContent}>
              <DonutChart width={375} height={325}/>
            </Segment>
          </Grid.Column>
          <Grid.Column width={2}>
            <Card className={styles.card1}>
              <Card.Content>
                <Card.Header className={styles.cardHeader1}>£93,300.56</Card.Header>
                <Card.Description className={styles.cardDescription1}>Remittances - All Time</Card.Description>
              </Card.Content>
            </Card>
            <Card className={styles.card2}>
              <Card.Content>
                <Card.Header className={styles.cardHeader2}>53</Card.Header>
                <Card.Description className={styles.cardDescription2}>Parishes / Churches</Card.Description>
              </Card.Content>
            </Card>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    </div>
    )
  }
}

Screenshots:

Screenshot 1:

@isherwood I have modified the code please check. How can I add search bar with full width adjacent to side bar ? Below search bar I want to display charts. — fun joker
– fun joker, Commented Dec 18, 2018 at 17:38
You have your search bar inside a 5-unit column. Shouldn't it be in a 10-unit column above the pair of smaller columns? — isherwood
– isherwood, Commented Dec 18, 2018 at 17:38
I suggest sketching out your layout to make it more clear what it should look like. react.semantic-ui.com/layouts/grid — isherwood
– isherwood, Commented Dec 18, 2018 at 17:39
@isherwood It should look like screenshot 2 but currently it is showing same as screenshot 1. How can I make it similar to screenshot 2 ? — fun joker
– fun joker, Commented Dec 18, 2018 at 17:40
I attempted to explain that above. Do you not understand my suggestion? Essentially the search bar should be in a row above a row containing your charts. — isherwood
– isherwood, Commented Dec 18, 2018 at 17:41

isherwood · Accepted Answer · 2018-12-18 17:47:21Z

3

You need two columns, and inside the main column you need two rows. (You many not need two actual row elements if things wrap properly, but it may help make the structure more clear to use rows.)

 _______________________________
|         | ___________________ |
|         || row w/ 1 col      ||
|         ||___________________||
|         | ___________________ |
|         ||         ||        ||
|         || row w/  ||        ||
|         || 2 cols  ||        ||
|         ||         ||        ||
|         ||         ||        ||
|         ||_________||________||
 _______________________________
    ^-- sidebar col
                     ^-- main col

answered Dec 18, 2018 at 17:47

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

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

1 Comment

fun joker Over a year ago

Thanks for pictorial view. Understood better :)

Collectives™ on Stack Overflow

How to add elements in a Semantic React UI grid?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related