How To Create Scrollable Elements In Learnworlds | Scrollable Pricing Table Tutorial

Make sure you add the CSS code under the “Dynamic” Section so you can reuse the scrollable elements on all pages. Check the video scene from 6:02 8:32 to for reference.

ul.scroller {
  list-style-type:none!important;
  font-size:12px;
  line-height: 15px;
  
}


ul.scroller li {
  background:#5a5858;
  margin:10px 5% 10px 0px;
  padding:5px;
  color:#fff;
  border-radius:5px;
  
}
.scroller {
  margin-top:1em;
  display:block;
  background: #F1F1F1;
    width: 100%;
    height: 150px;
    overflow-y: scroll;
    border: 1px solid #ccc;

} 

 

Add the HTML code inside the widget to reflect the scrollable design (scene 4:25 – 6:03)

<ul class="scroller">
<li>Title 1</li>
<li>Title 2</li>
</ul>

I also created other tutorials specifically for Learnworlds, see the relevant blogs below.