Maxmya Maxmya - 17 days ago 11
CSS Question

How to make material design lite card scrollable only on X with overflow of imgs?

I have this page and i tried to make the card with title

Online
scrollable in the
supporting-text
area , but it fails with all kinds of tries , i tried many CSS like
overflow:auto;
and
overflow:scroll;
but nothing worked !

this is codepen link to try

:) any help ?

<style>
.repero.mdl-card {
width: 500px;
opacity: 0.6;
min-height: 150px;
max-height: 200px;
margin-bottom: 20px;
}

.middLoading.mdl-spinner {
position: absolute;
top: 50%;
left: 50%;
}


</style>

<div class="mdl-grid">

<div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--5-col
mdl-button--colored mdl-color--lime-400">

<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Dashboard</h2>
</div>


<div id="dashboard" class="mdl-card__supporting-text scrollable"
style="height: 400px; overflow-y: hidden">

<div id="loaderDash" class="mdl-spinner
mdl-spinner--single-color mdl-js-spinner is-active middLoading"
style="display: block"></div>

</div>


</div>


<div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--7-col">

<div class="mdl-card__title">
<h2 class="mdl-card__title-text">NEWS</h2>
</div>

<div class="mdl-card__supporting-text scrollable"
style="height:400px">


</div>


</div>




<div class="mdl-card mdl-shadow--6dp mdl-cell mdl-cell--12-col mdl- button--colored mdl-color--orange">

<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Online-Chat</h2>
</div>

<div class="mdl-card__supporting-text scrollable"
style=" overflow :auto; height: 10em;width: 150em; max-width: 150em">


<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
alt="img" style="width: 112px;height: 112px">

<img src="http://placehold.it/112x112/DC143C/FFFFFF">

</button>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
alt="img" style="width: 112px;height: 112px">

<img src="http://placehold.it/112x112/DC143C/FFFFFF">

</button>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
alt="img" style="width: 112px;height: 112px">

<img src="http://placehold.it/112x112/DC143C/FFFFFF">

</button>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
alt="img" style="width: 112px;height: 112px">

<img src="http://placehold.it/112x112/DC143C/FFFFFF">

</button>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
alt="img" style="width: 112px;height: 112px">

<img src="http://placehold.it/112x112/DC143C/FFFFFF">

</button>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
alt="img" style="width: 112px;height: 112px">

<img src="http://placehold.it/112x112/DC143C/FFFFFF">

</button>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
alt="img" style="width: 112px;height: 112px">

<img src="http://placehold.it/112x112/DC143C/FFFFFF">

</button>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
alt="img" style="width: 112px;height: 112px">

<img src="http://placehold.it/112x112/DC143C/FFFFFF">

</button>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
alt="img" style="width: 112px;height: 112px">

<img src="http://placehold.it/112x112/DC143C/FFFFFF">

</button>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
alt="img" style="width: 112px;height: 112px">

<img src="http://placehold.it/112x112/DC143C/FFFFFF">

</button>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
alt="img" style="width: 112px;height: 112px">

<img src="http://placehold.it/112x112/DC143C/FFFFFF">

</button>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
alt="img" style="width: 112px;height: 112px">

<img src="http://placehold.it/112x112/DC143C/FFFFFF">

</button>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
alt="img" style="width: 112px;height: 112px">

<img src="http://placehold.it/112x112/DC143C/FFFFFF">

</button>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
alt="img" style="width: 112px;height: 112px">

<img src="http://placehold.it/112x112/DC143C/FFFFFF">

</button>

</div>

</div>


</div>
<script>
$('.scrollable').on('mousewheel DOMMouseScroll', function (e) {
var e0 = e.originalEvent,
delta = e0.wheelDelta || -e0.detail;

this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
e.preventDefault();
});
</script>

Answer

Make the div scrollable changing the overflow value it has (hidden) to (auto):

.mdl-card {
  overflow:auto;
}