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
Hope this helps 
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
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)
Disable the wrapping, set a width and an overflow and this should work
Hi @aurelie, I found this post when troubleshooting a similar issue and am hoping you can help.
I think my issue is even simpler - I have a div on my page that has a 1,000px minimum width. When the screen gets too small, I want the div to take up 1,000px but be horizontally scrollable.
I’ve tried your suggestion above and I’m obviously not doing it right as I’m getting strange behaviour as the screen shrinks. I think I’m getting tripped up on finding the right combination of what to apply to the parent/children divs in terms of the minimum width and overflow properties.
I would appreciate it if you could walk me through what attributes I should apply to the parent div, and then what I should/shouldn’t do to the children divs? Thanks in advance!
Hi @ilan,
We found success on simpler examples of horizontal scroll by starting the width control at the Section Level (parent), with further controls at the at the first div level (child). Using pixels vs percentages, and swapping the logic between desktop and mobile seems to do the trick 
The way we have it configured:
Desktop
Section: Max-width: 1400px
First Div: Width: 100%
Mobile
Section: Max-width: 100%
First Div: Width: 1800px
While going through this I found that we used another method so I created a screen recording to show you how everything is setup. Please forgive my naivety… Hope this helps.
Thanks so much @rhodri, I really appreciate the detail you went into here, and the screen recording.
Unfortunately I still haven’t been able to get it to work. I’ve always struggled with the interplay between sizing, position, min/max values, overflow, etc., and this just seems to have defeated me. Feels like it shouldn’t be that hard, but there must be something about the way I have structured my divs that’s influencing the behaviour.
In the meantime I have change the way the contents wrap vertically - there’s no horizontal scroll, but for the time being at least I have avoided the need for it.
Thanks again for your help, and the website looks amazing btw - I think I need to spend some time in those villas!
Hi @ilan,
Thanks for the kind words. I know how frustrating this can be… happy to jump on a call to see if we can fix it together if you like.
That’s so thoughtful, thanks @rhodri. To be honest I think I went down a bit of a rabbit hole here thinking it was going to be straightforward when what I actually should have done is made it more responsive with better wrapping and sizing properties. I ended up doing that instead (well, enough for it to be an acceptable solution), so I think it’s probably a better solution…
Thanks again, I really appreciate it 
