CODEWITHSUNDEEP
htmlcsssemantic-ui
Mendes
Mendes

Reputation: 18451

Semantic UI table inside card width

I'm trying to build a vertical panel of cards that will open the vertical scrollbar if greater than screen using Semantic-UI:

I've come to the following HTML code:

<div className="ui fluid container">
  <div className="Panel">
        <div className="ui card">
          <div className="content">
            <div className="header">CARD 1
            </div>
            <div className="content">
              <table className="ui celled striped compact table">
                <thead>
                  <tr>
                    <th>Ref</th>
                    <th>Item</th>
                    <th>Qty</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td className="center aligned">ABC123</td>
                    <td className="left aligned">Item ABC123 Description 1</td>
                    <td className="center aligned">86</td>
                  </tr>
                  <tr>
                    <td className="center aligned">DEF456</td>
                    <td className="left aligned">Item DEF456 Description 2</td>
                    <td className="center aligned">222</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
  </div>
</div>

My .css file:

.Panel {
  min-width: 800px;
  max-height: calc(100vh - 70px); 
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

Due to my Panel settings, the table is horizontally overflowing the card, as the picture below:

Overflowing table

If I remove my Panel settings everything work fine, but I need these settings for the container of cards (Panel).

What is causing my table to overflow?

Upvotes: 1

Views: 1144

Answers (1)

Saad
Saad

Reputation: 1087

Try using ui segment instead of ui card , this can solve the overflowing without changing your Panel settings . for vertical scrollbar change your css to this :

.Panel {
  max-height: calc(100vh - 70px); 
  overflow-x: hidden;
  overflow-y: auto;
  white-space: nowrap;
  max-width:350px
}

Here is a working Demo

PS: Sometimes segments won't go vertical unless a you change ui segment to ui vertical segment docs

Upvotes: 1

Related Questions