CODEWITHSUNDEEP
cssangularjsangular-material
Dave Gööck
Dave Gööck

Reputation: 405

How can I make a md-card with a wide table scroll inside md-content

I have a wide table inside a md-card element. The screen is too narrow to display the whole table but it's necessary for the use-case to make the whole table visible at once. So I decided to put my card into a md-content element that implements the desired overflow behaviour.

My problem is, that the table is overflowing the card and I don't know how to make the card fit the content instead of fitting the with of its parent element. The md-content element is scrollable as expected. Only the card brame is not properly displayed.

I made a CodePen to showcase my problem: http://codepen.io/davemecha/pen/LkwAXd

I'd be glad for some suggestions on how to fix this and make the card applying to its content width.

Upvotes: 1

Views: 997

Answers (1)

Dave Gööck
Dave Gööck

Reputation: 405

I found a way to fix my problem. The problem was really no angular-material problem. It was just a simple CSS problem.

The solution is to set the wrapper (in this case md-card) to display: inline-block;

I made a codepen for this: https://codepen.io/davemecha/pen/qNZLYb

Upvotes: 1

Related Questions