search

creativetimofficial / material-kit

Free and Open Source UI Kit for Bootstrap 5, React, Vue.js, React Native and Sketch based on Google's Material Design
https://www.creative-tim.com/product/material-kit?ref=mk-creativetimofficial-github
MIT License
5.91k stars 1.35k forks source link

[Bug] Table doesn't wrap contents and runs off side of screen when placed inside a card #215

Closed MarkRadaba closed 2 years ago

MarkRadaba commented 2 years ago

Version

3.0.3

Reproduction link

https://manage.glendaleheights.org/temp/news-temp.aspx

Operating System

Windows 11

Device

PC

Browser & Version

Microsost Edge

Steps to reproduce

  1. Create page using Material Dashboard 2 UI Kit.
  2. Generate card element in page.
  3. Insert table in card, containing several columns.
  4. Insert large amounts of text in columns. Cell contents are not wrapped so text appears in one line, causing table to expend past the edge of the screen.

    What is expected?

    Contents of cells in table to wrap so table does now expand past side of card

    What is actually happening?

    Text in table cells does not wrap and table extends outside of card and beyond edge of screen.

Solution

Additional comments

Behavior works correctly in "vanilla" Bootstrap 5. Issue only happens when using Material Dashboard 2 UI kit.

groovemen commented 2 years ago

Hello @MarkRadaba, thank you for using our products, please try to wrap the <table class="table table-sm table-striped table-bordered">...</table> into a <div class=table-responsive></div>. Hope this information helps you. Please let us know if we can help you with anything else.

All the best, Stefan