q-scroll-area with <pre> tag



  • Hello,

    I have an issue with a q-scroll-area containing <pre>data…</pre>, the behavior that I expect would be to automatically create an horizontal scroll bar when the text overflow in x.

    Should I use the css’s property overflow-x: scroll ?
    Is there an option in the q-scroll-area component that would allow this behavior ?

    I have already tried horizontal option for q-scroll-area, but it remove the vertical scroll bar ; it is still possible to scroll with the mouse, but it is really painful for really long text to go directly on a desired scroll position.

    <q-scroll-area visible>
        <div id="source-code">
            <pre>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci ac auctor augue mauris augue neque gravida. Odio facilisis mauris sit amet massa vitae tortor condimentum. Ornare suspendisse sed nisi lacus. Fames ac turpis egestas maecenas pharetra convallis posuere. Adipiscing bibendum est ultricies integer quis. Commodo nulla facilisi nullam vehicula ipsum a arcu. Interdum varius sit amet mattis vulputate enim. Ac tincidunt vitae semper quis lectus nulla at volutpat. Enim blandit volutpat maecenas volutpat. Sed enim ut sem viverra aliquet eget sit. Bibendum neque egestas congue quisque egestas diam in arcu cursus. Velit ut tortor pretium viverra suspendisse.
                </p>
            </pre>
            <p>
                      Eget est lorem ipsum dolor. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Purus in mollis nunc sed id semper. Id aliquet risus feugiat in ante metus dictum at. Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat. Sed viverra ipsum nunc aliquet. Aliquam faucibus purus in massa tempor. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam. Nisi scelerisque eu ultrices vitae auctor. Euismod nisi porta lorem mollis aliquam ut porttitor. Faucibus turpis in eu mi. Lectus quam id leo in vitae turpis.
            </p>
        </div>
    </q-scroll-area>
    

Log in to reply