Creating 'Horizontal Scroll' on elements

Hi weweb community,

I can’t find a solution to creating ‘horizontal scroll’ on elements. Does this need to be done in Javascript? CSS? Or is there a native way of doing so using the

The example I am working on is the template of the CRM kanban from weweb. But this same functionality would apply to various UI elements such as image sliders, mobile specific blocks and an array of different examples.

Best,
Rhodri

Hi,
to add a scroll you need

  • Define a height or a max height on your element
  • Set the overflow property (i personally use the auto value)

image

Hope this helps :slight_smile:

1 Like

Hi aurielle,

Sorry, I used the wrong word in the brief. I am actually trying to achieve a ‘horizontal scroll’. From side to side.

I have tried using the overflow element in addition to playing around with element height and widths, but it’s not giving the desired effect. I have explained what I am trying to achieve in the video below for further clarification:

Hmm, the problem is for the Kanban, the element seems to be already responsive: if you set a width, the column are wrapping under each other (unless you forced the width to be larger than the screen, like in your exemple).
It’s for now a limitation of how the Kanban is working. I am letting the product team knows :slight_smile:

Ok, correction, from my coworker, it’s apparently possible if you wrap your kanban with a div, and then set the width and the overflow on the wrapping parent

On other (and better solution)
image
Disable the wrapping, set a width and an overflow and this should work :slight_smile:

1 Like