Semantic UI scrollable Segment

Question

I´m using Semantic UI together with ReactJS using the official semantic-ui-react.

I want to build a Trello like app and put cards on it. The cards are going to be stacked for one Topic and shall be scrollable vertically inside one topic and horizontally on all topics.

I´m using the code below and naturally I´m getting stacked segments, with large width, and no scroll controls.

import React, { Component } from 'react';
import { Segment, Card, Header } from 'semantic-ui-react';


class TestPanel extends Component {

    getCards = () => {

        let i = 0;
        let cards = [];

        for (i = 0; i < 10; i++) {

            let card = (
                    <Card key={i}>
                        <Card.Header>
                            Item {i}
                        </Card.Header>
                        <Card.Meta>
                            ItemMeta {i}
                        </Card.Meta>
                    </Card>
                );
            cards.push(card);
        }

        return cards;
    };

    render () {

        let cards = this.getCards();

        return (
            <div>
                <Segment>
                    <Segment>
                        <Header>Segment 1</Header>
                        {cards}
                    </Segment>
                    <Segment>
                        <Header>Segment 2</Header>
                        {cards}
                    </Segment>
                </Segment>
            </div>
            );
    }

}

export default TestPanel;

I´ve checked segment and there is no scrollable option on any commands.

So, how can I make the outer segment to scroll horizontally and each card segment scroll vertically. Thanks for helping.

Solution 1

Try this, works for me:

  <Segment style={{overflow: 'auto', maxHeight: 200 }}>
  </Segment>

Solution 2

Since 3rd July 2017 (just after your question) there is a "scrolling content" style available. See closing note in https://github.com/Semantic-Org/Semantic-UI/issues/4335

Modal example:

<div class="ui modal">
  <div class="header">Header</div>
  <div class="scrolling content">
    <p>Very long content goes here</p>
  </div>
</div>

Solution 3

probably forever later, but i was looking too.

this worked easy for me.

<Segment color="teal" raised style={{ overflow: 'auto', maxHeight: '27em' }}>

that was with color and a specific height i wanted. but you could actually nest segments inside segments.... so if you set

<Segment style={{ overflow: 'auto', maxHeight: '50vh' }}>
  <Segment.Group horizontal>
    <Segment style={{ overflow: 'auto' }}> segment 1 </Segment>
    <Segment style={{ overflow: 'auto' }}> segment 2 </Segment>
    <Segment style={{ overflow: 'auto' }}> segment 3 </Segment>
  </Segment.Group>
</Segment>

that should put 3 segments next to each other inside a parent segment that's 50% the viewport height at most, constraining the segments inside to a max height, forcing them to overflow mode, which they've all been set to auto, which will add scrollbars if they overflow.. and, with the segments all scrollable.. you can add in minWidth if you need to have specific widths or if you want the parent segment to be really damned wide.'' should work, in theory.

Comments

[Chris]

this worked for me: style={{ overflow: 'auto', maxHeight: '98vh'}}