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

  • Size div dynamically

    From Andrew Poulos@21:1/5 to All on Sun Oct 25 16:48:42 2020
    I have a div with this CSS

    #container {
    position: absolute;
    left: 360px;
    top: 100px;
    width:640px;
    overflow: hidden;
    }

    If the window's width is less than 1000 (360 + 640px) and greater than
    360px how do I get the width of the div to change so it doesn't exceed
    the window width?

    To add a wrinkle, the div will be draggable so I'd like the div to be
    able to grow to it's intrinsic width, if there' space for it.

    Andrew Poulos

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Philip Herlihy@21:1/5 to All on Sun Oct 25 12:59:08 2020
    In article <XoGdnTFwTr4hjAjCnZ2dnUU7-L3NnZ2d@westnet.com.au>, ap_prog@hotmail.com says...

    I have a div with this CSS

    #container {
    position: absolute;
    left: 360px;
    top: 100px;
    width:640px;
    overflow: hidden;
    }

    If the window's width is less than 1000 (360 + 640px) and greater than
    360px how do I get the width of the div to change so it doesn't exceed
    the window width?

    To add a wrinkle, the div will be draggable so I'd like the div to be
    able to grow to it's intrinsic width, if there' space for it.

    Andrew Poulos

    Would this be a good place to use CSS variables and the Calc function? Watch out for scrollbars, though.


    --

    Phil, London

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Evertjan.@21:1/5 to Philip Herlihy on Sun Oct 25 15:38:59 2020
    Philip Herlihy <thiswillbounceback@you.com> wrote on 25 Oct 2020 in comp.infosystems.www.authoring.stylesheets:

    In article ap_prog@hotmail.com says...

    I have a div with this CSS

    #container {
    position: absolute;
    left: 360px;
    top: 100px;
    width:640px;
    overflow: hidden;
    }

    If the window's width is less than 1000 (360 + 640px) and greater than
    360px how do I get the width of the div to change so it doesn't exceed
    the window width?

    To add a wrinkle, the div will be draggable so I'd like the div to be
    able to grow to it's intrinsic width, if there' space for it.

    Andrew Poulos

    Would this be a good place to use CSS variables and the Calc function?
    Watch out for scrollbars, though.

    Don't use absolute dimensions in variable viewports,
    try:

    vw
    1% of the viewport's width.

    vh
    1% of the viewport's height.

    vmin
    1% of the viewport's smaller dimension.

    vmax
    1% of the viewport's larger dimension.





    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Andrew Poulos@21:1/5 to Evertjan. on Mon Oct 26 16:44:29 2020
    On 26/10/2020 1:38 am, Evertjan. wrote:
    Philip Herlihy <thiswillbounceback@you.com> wrote on 25 Oct 2020 in comp.infosystems.www.authoring.stylesheets:

    In article ap_prog@hotmail.com says...

    I have a div with this CSS

    #container {
    position: absolute;
    left: 360px;
    top: 100px;
    width:640px;
    overflow: hidden;
    }

    If the window's width is less than 1000 (360 + 640px) and greater than
    360px how do I get the width of the div to change so it doesn't exceed
    the window width?

    To add a wrinkle, the div will be draggable so I'd like the div to be
    able to grow to it's intrinsic width, if there' space for it.

    Andrew Poulos

    Would this be a good place to use CSS variables and the Calc function?
    Watch out for scrollbars, though.

    Don't use absolute dimensions in variable viewports,
    try:

    vw
    1% of the viewport's width.

    vh
    1% of the viewport's height.

    vmin
    1% of the viewport's smaller dimension.

    vmax
    1% of the viewport's larger dimension.

    Ok, what I'll do is then to use relative dimensions but also allow the
    element to be user resizable.

    Andrew Poulos

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Evertjan.@21:1/5 to Andrew Poulos on Tue Oct 27 23:14:06 2020
    Andrew Poulos <ap_prog@hotmail.com> wrote on 26 Oct 2020 in comp.infosystems.www.authoring.stylesheets:

    Don't use absolute dimensions in variable viewports,
    try:

    vw
    1% of the viewport's width.

    vh
    1% of the viewport's height.

    vmin
    1% of the viewport's smaller dimension.

    vmax
    1% of the viewport's larger dimension.

    Ok, what I'll do is then to use relative dimensions but also allow the element to be user resizable.

    The latter has nothing to do with your problem, I presume.

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Andrew Poulos@21:1/5 to Evertjan. on Wed Oct 28 14:24:40 2020
    On 28/10/2020 9:14 am, Evertjan. wrote:
    Andrew Poulos <ap_prog@hotmail.com> wrote on 26 Oct 2020 in comp.infosystems.www.authoring.stylesheets:

    Don't use absolute dimensions in variable viewports,
    try:

    vw
    1% of the viewport's width.

    vh
    1% of the viewport's height.

    vmin
    1% of the viewport's smaller dimension.

    vmax
    1% of the viewport's larger dimension.

    Ok, what I'll do is then to use relative dimensions but also allow the
    element to be user resizable.

    The latter has nothing to do with your problem, I presume.

    The element was meant to change size depending on how close to the edge
    of the viewport it was (and the element's intrinsic size.) I'm dropping
    the auto-sizing but allowing the user to resize the element instead.

    Andrew Poulos

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