Overflow-x scroll property works on Desktop but not in mobile phone

Question

The Froala editor toolbar icons are horizontally scrollable in the desktop but not in the mobile phone.

I did a research and found that by adding -webkit-overflow-scrolling: touch property, the div tag is scrollable in the mobile but that doesn't seem to be working.

   .fr-toolbar {
        position: fixed;
        display: flex;
        overflow: scroll;
        width: 100%;
        -webkit-overflow-scrolling: touch;
 }

Here is the jsfiddle link for better understanding and reference: http://jsfiddle.net/wc5c3jhk/381/

Here is the Codepen link: https://codepen.io/Dinesh_Madhanlal/pen/Gdvxqw

Could someone throw a light on what's happening?

Could you please explain how your fiddle works? It looks like a static page. — Dhaval Jardosh
– Dhaval Jardosh, Commented May 4, 2018 at 10:58
@DhavalJardosh, Click on run and the project will run. In the editor, we have toolbar icons like bold, italic, underline, etc... I want them to be horizontally scrollable in mobile. Now, it is horizontally scrollable in the desktop. Any suggestions? — Dinesh Madanlal
– Dinesh Madanlal, Commented May 4, 2018 at 11:09
In the editor, we have toolbar icons like bold, italic, underline, etc, I'm unable to see these. Please create a codepen for this. As it's more flexible or StackOverflow's fiddle. — Dhaval Jardosh
– Dhaval Jardosh, Commented May 4, 2018 at 11:22
Have updated the question with the Codepen link @DhavalJardosh. — Dinesh Madanlal
– Dinesh Madanlal, Commented May 4, 2018 at 11:38

Gaurav Khanna · Accepted Answer · 2019-12-18 12:44:11Z

1

Please check the JSFiddle as provided here - http://jsfiddle.net/m2f8pygq/

.fr-toolbar {
  min-width: 300PX;
    max-width: 100%;
    /* overflow-y: hidden; */
    /* overflow-x: scroll; */
    OVERFLOW: VISIBLE;
    display: flex;
    border: 1px solid black;
    FLEX-WRAP: wrap;
 }

This will help you understand how Froala has been implemented and how the toolbar buttons are being wrapped inside a DIV when opened in Desktop or in Mobile.

In short, this is not a good option to be achieved.

answered Dec 18, 2019 at 12:44

Gaurav Khanna

1015 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Overflow-x scroll property works on Desktop but not in mobile phone

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related