How to display content and sidebar?

Question

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:

Garvit Khamesra · Accepted Answer · 2018-12-16 16:53:19Z

1

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

answered Dec 16, 2018 at 16:53

Garvit Khamesra

4053 silver badges10 bronze badges

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

5 Comments

fun joker Over a year ago

I have added overflow: scroll; in styles content but now I am getting 2 scroll windows see screenshot -> imgur.com/a/7ya8BRL

Garvit Khamesra Over a year ago

Are you using an iframe? Or some 3rd party library?

fun joker Over a year ago

I am using react semantic ui and I am using grids. See the code in question.

Garvit Khamesra Over a year ago

The problem is with the dashboard component. 2 scroll bars are coming because the overflow scroll is added to some other component. If you can share your dashboard code. I'll have a look at it.

fun joker Over a year ago

Check this code -> jsfiddle.net/yxbq2zw9 (Navigation bar) and dashboard code -> jsfiddle.net/5dfq7Lbe

Preeti Aggarwal · Accepted Answer · 2018-12-16 18:49:14Z

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>

Collectives™ on Stack Overflow

How to display content and sidebar?

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related