CODEWITHSUNDEEP
htmlcssreactjs
fun joker
fun joker

Reputation: 1727

How to display content and sidebar?

I have added sidebar in react semantic but the content which is inside Sidebar.Pusher is not getting displayed completely even after scroll it doesn't get displayed properly. 

<Sidebar.Pusher dimmed={visible}>
            <Segment basic className={styles.content}>
              <DashBoard/>
            </Segment>
          </Sidebar.Pusher>

Entire code:

export default class NavBar extends Component {
  state = { visible: false }

  handleHideClick = () => this.setState({ visible: false })
  handleShowClick = () => this.setState({ visible: true })
  handleSidebarHide = () => this.setState({ visible: false })

  render() {
    const { visible } = this.state

    return (
      <div>
      <Grid>
      <Grid.Row>
        <Grid.Column width={16}>
            <Icon name='content' disabled={visible} onClick={this.handleShowClick} size='big'/>
            <div className={styles.header}>
              <img
                src={require('../images/rccg_transparent_logo.png')}
                width="80"
                height="80"
                alt="logo"
              />
              <Header as="h2" className={styles.headerTitle}>
                RCCG Europe Mainland Region 3
              </Header>
            </div>
          </Grid.Column>
      </Grid.Row>
      </Grid>
        <Sidebar.Pushable as={Segment} className={styles.content} >
          <Sidebar
            as={Menu}
            animation='overlay'
            icon='labeled'
            inverted
            onHide={this.handleSidebarHide}
            vertical
            visible={visible}
            width='thin'
          >
            <Menu.Item as='a'>
              <Icon name='home' />
              Home
            </Menu.Item>
            <Menu.Item as='a'>
              <Icon name='gamepad' />
              Games
            </Menu.Item>
            <Menu.Item as='a'>
              <Icon name='camera' />
              Channels
            </Menu.Item>
          </Sidebar>

          <Sidebar.Pusher dimmed={visible}>
            <Segment basic className={styles.content}>
              <DashBoard/>
            </Segment>
          </Sidebar.Pusher>
        </Sidebar.Pushable>
      </div>
    )
  }
}

CSS:

.header {
    display: flex;
    margin-left: 500px;
    border-bottom: 2px;
    border-bottom-color: black;
}

.headerTitle {
    float: left;
    justify-content: center;
    margin-left: 50px !important;
}

.content {
    min-height: 100vh;
    overflow: scroll;
}

In below screenshot the charts are not displayed properly only half section is visible why so ? Screenshot:

enter image description here

enter image description here

Upvotes: 1

Views: 444

Answers (2)

Preeti Aggarwal
Preeti Aggarwal

Reputation: 131

You need to put overflow:auto; property to the right side section not on full section.

<div class="app">
<div class="menu"></div>
<div class="content"></div>
</div>

<style>
.app{
height: 100vh;
}
.content{
overflow:auto;
}
</style>

Upvotes: 0

Garvit Khamesra
Garvit Khamesra

Reputation: 395

You need to change the overflow property of the dashboard. overflow: scroll

Upvotes: 1

Related Questions