1. Forum
  2. Usenet
  3. COMP.INFO.WWW.AUTHORING.S

  • Increase width when scroll bar

    From Andrew Poulos@21:1/5 to All on Thu Feb 18 22:09:42 2021
    Say I have a div with

    display:flex
    flex-direction: column;
    width: 40px
    overflow-y: auto
    max-height: 100%
    box-sizing: border-box;

    containing a column of items. Once the number of items exceeds the
    max-height a scroll bar appears. The scroll bar takes some of the 40
    pixel width of the div.

    How can I code it so that if a scroll bar needs to appear the width of
    the div increases by at least the width of the scroll bar? As the div's
    items are relatively small I don't want nearly half their width covered
    by a scroll bar.

    Andrew Poulos

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?B?8J+YiSBHb29kIEd1eSDwn5iJ?@21:1/5 to All on Thu Feb 18 21:19:38 2021
    This is a multi-part message in MIME format.
    The main message is in HTML part of this post. Use a good quality newsreader such as Thunderbird to read it!!! I say so but you may not like it.


    --

    With over 1.2 billion devices now running Windows 10, customer
    satisfaction is higher than any previous version of windows.


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Brawler"
    rel="stylesheet">
    <style>
    *{box-sizing:border-box}@keyframes test{0%{border-color:#006400}50%{border-color:red}70%{border-color:#ff0}100%{border-color:grey}0%{border-color:#006400}0%{border-color:#006400}0%{border-color:#006400}}@keyframes newsgroups{0%{border-
    color:red}16.66666667%{border-color:orange}33.33333333%{border-color:#ff0}50%{border-color:green}66.66666667%{border-color:#00f}83.33333333%{border-color:indigo}100%{border-color:violet}}body{background-color:#d6cdab;font-family:system-ui,Brawler,
    Montserrat,Roboto,'Open+Sans',sans-serif,serif;margin:0;padding:0 0 20px 0}div.newsgroups{border:solid transparent 10px;background-color:#eee;animation-name:newsgroups;animation-duration:15s;animation-iteration-count:infinite;animation-direction:
    alternate-reverse;padding:10px;font-size:18px;width:80%;margin:auto}ul{list-style-type:square}img{width:100%;display:inline-block;border:12px solid #00f}div,img{box-sizing:border-box}p{text-align:justify;text-indent:2em}
    </style>
    </head>
    <body text="#008000" bgcolor="#faf0e6">
    <div class="newsgroups">
    <h2>Re: Increase width when scroll bar</h2>
    <div class="moz-cite-prefix">On 18/02/2021 11:09, Andrew Poulos
    wrote:<br>
    </div>
    <blockquote type="cite"
    cite="mid:Laydnf8n7cNk17P9nZ2dnUU7-W_NnZ2d@westnet.com.au"> <br>
    <br>
    How can I code it so that if a scroll bar needs to appear the
    width of the div increases by at least the width of the scroll
    bar? As the div's items are relatively small I don't want nearly
    half their width covered by a scroll bar. <br>
    </blockquote>
    <p>How about making the scroll-bar thin like so:</p>
    <pre> <code>
    .scroll {
    scrollbar-width: thin;
    }
    </code>
    </pre>
    <br>
    <br>
    <p>Then attach that style to the div.</p>
    <p>scroll-bar hasn't got a width and the committee is is still
    debating about it. So you are at the mercy of the browser used
    by the user/customer.</p>
    </div>
    <p><br>
    </p>
    <p><br>
    </p>
    <div class="moz-signature">-- <br>
    <div style="background-color: blue; color: yellow; font-weight:
    bolder; display: grid; align-items: center; justify-items:
    center; min-height: 80px; font-size: 1.2em; border-radius: 50px;
    ">
    <p>With over 1.2 billion devices now running Windows 10,
    customer satisfaction is higher than any previous version of
    windows.</p>
    </div>
    </div>
    </body>
    </html>

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Andrew Poulos@21:1/5 to Good Guy on Fri Feb 19 21:29:56 2021
    On 19/02/2021 8:19 am, Good Guy wrote:

    Re: Increase width when scroll bar

    On 18/02/2021 11:09, Andrew Poulos wrote:

    How can I code it so that if a scroll bar needs to appear the width of
    the div increases by at least the width of the scroll bar? As the
    div's items are relatively small I don't want nearly half their width
    covered by a scroll bar.

    How about making the scroll-bar thin like so:

    |.scroll { scrollbar-width: thin; } |


    Then attach that style to the div.

    scroll-bar hasn't got a width and the committee is is still debating
    about it. So you are at the mercy of the browser used by the user/customer.

    Google suggests my issue is not uncommon. A pity there isn't a style to
    show the scroll bar outside the boundary of a div but I guess it creates
    more issues than it solves.

    I've set a "thin" scroll bar and allowed for space to the side of the
    div's contents for a scroll bar to appear and not cover the contents
    and, to balance it, I've included the same size space on the opposite
    side. Not ideal but workable.

    Andrew Poulos

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)