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

  • Size element from grandparent

    From Andrew Poulos@21:1/5 to All on Sun Jun 27 15:52:06 2021
    Is there a way to set the width and height of an element with respect to
    a great grandparent (or higher) element?

    The HTML looks a bit like this:

    <body>
    <div id="great-grandparent">
    <div></div>

    <div>
    <div>
    <div id="one"></div>
    </div>
    </div>
    </div>
    </body>

    Set the size of "one" with respect to "great-grandparent".

    Andrew Poulos

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?B?8J+YiSBHb29kIEd1eSDwn5iJ?@21:1/5 to Andrew Poulos on Sun Jun 27 19:09:21 2021
    This is a multi-part message in MIME format.
    On 27/06/2021 06:52, Andrew Poulos wrote:

    Set the size of "one" with respect to "great-grandparent".



    Just give it a size in percentage and see what happens.

            div#one {
                width: 50%;
                height: 20vh;
                background-color: tomato;
            }

    --

    With over 1.3 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">
    </head>
    <body text="#990000" bgcolor="#f5f1e4">
    <div class="moz-cite-prefix">On 27/06/2021 06:52, Andrew Poulos
    wrote:<br>
    </div>
    <blockquote type="cite"
    cite="mid:hfCdnXjhAsaaj0X9nZ2dnUU7-RPNnZ2d@westnet.com.au"><br>
    Set the size of "one" with respect to "great-grandparent".
    <br>
    <br>
    <br>
    </blockquote>
    <p><br>
    </p>
    <p>Just give it a size in percentage and see what happens.  <br>
    </p>
    <p>
    <blockquote type="cite">        div#one {<br>
                width: 50%;<br>
                height: 20vh;<br>
                background-color: tomato;<br>
            }</blockquote>
    <br>
    </p>
    <div class="moz-signature">-- <br>
    <div class="table" style="display: table;">
    <div class="tr" style="display: table-row;">
    <div class="td" style="display:table-cell;width:
    100vw;box-sizing:border-box;padding: 10px; vertical-align:
    middle; background-color: #003300;color:
    chartreuse;height:80px;font-size: 1.2em;text-align:
    center;font-weight: 900;border-radius: 5px;">
    <p>With over 1.3 billion devices now running Windows 10,
    customer satisfaction is higher than any previous version
    of windows. </p>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Andrew Poulos@21:1/5 to All on Mon Jun 28 10:17:04 2021
    On 28/06/2021 4:09 am, 😉 Good Guy 😉 wrote:
    On 27/06/2021 06:52, Andrew Poulos wrote:

    Set the size of "one" with respect to "great-grandparent".


    Just give it a size in percentage and see what happens.

            div#one {
                width: 50%;
                height: 20vh;
                background-color: tomato;
            }

    First, doing it that way means the width is set with respect to its
    parent and not it's great grand parent. Secondly, using vh for height
    bears no relation to the size of the parents(s).

    Andrew Poulos

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Philip Herlihy@21:1/5 to All on Mon Jun 28 10:58:15 2021
    In article <5YmdnYBYXcWfiET9nZ2dnUU7-eHNnZ2d@westnet.com.au>, ap_prog@hotmail.com says...

    On 28/06/2021 4:09 am, ? Good Guy ? wrote:
    On 27/06/2021 06:52, Andrew Poulos wrote:

    Set the size of "one" with respect to "great-grandparent".


    Just give it a size in percentage and see what happens.

    div#one {
    width: 50%;
    height: 20vh;
    background-color: tomato;
    }

    First, doing it that way means the width is set with respect to its
    parent and not it's great grand parent. Secondly, using vh for height
    bears no relation to the size of the parents(s).

    Andrew Poulos

    What you're looking for is "container queries". On the way, but not implemented yet in any mainstream browser version.

    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries https://css-tricks.com/say-hello-to-css-container-queries/ https://caniuse.com/css-container-queries -- NB!

    --

    Phil, London

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Dr.Kral@nyc.rr.com@21:1/5 to All on Mon Jun 28 14:58:47 2021
    On Sun, 27 Jun 2021 15:52:06 +1000, Andrew Poulos <ap_prog@hotmail.com>
    wrote in <hfCdnXjhAsaaj0X9nZ2dnUU7-RPNnZ2d@westnet.com.au>:

    Is there a way to set the width and height of an element with respect to
    a great grandparent (or higher) element?

    The HTML looks a bit like this:

    <body>
    <div id="great-grandparent">
    <div></div>

    <div>
    <div>
    <div id="one"></div>
    </div>
    </div>
    </div>
    </body>

    Set the size of "one" with respect to "great-grandparent".

    Andrew Poulos

    If the grand-parent's width has been set, then

    var w = document.getElementById('great-grandparent').style.width ;
    var w1 = Number( w.replace(/[^\d]/g, "") ) ; //size
    var w2 = w.replace(/\d/g, "") ; //unit
    document.getElementById('one').style.width = (w1) * adjustment +w2;

    If grand-parent's width has NOT been set, then create an invisible element
    with the wanted width inside and use that which does require all the above fussing.

    Similarly for height.

    K

    --
    This email has been checked for viruses by Avast antivirus software. https://www.avast.com/antivirus

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Dr.Kral@nyc.rr.com@21:1/5 to All on Mon Jun 28 15:17:59 2021
    On Sun, 27 Jun 2021 15:52:06 +1000, Andrew Poulos <ap_prog@hotmail.com>
    wrote in <hfCdnXjhAsaaj0X9nZ2dnUU7-RPNnZ2d@westnet.com.au>:

    Is there a way to set the width and height of an element with respect to
    a great grandparent (or higher) element?

    The HTML looks a bit like this:

    <body>
    <div id="great-grandparent">
    <div></div>

    <div>
    <div>
    <div id="one"></div>
    </div>
    </div>
    </div>
    </body>

    Set the size of "one" with respect to "great-grandparent".

    Andrew Poulos
    Corrected --

    If the grand-parent's width has been set, then

    var w = document.getElementById('great-grandparent').style.width ;
    var w1 = Number( w.replace(/[^\d]/g, "") ) ; //size
    var w2 = w.replace(/\d/g, "") ; //unit
    document.getElementById('one').style.width = (w1) * adjustment +w2;

    If grand-parent's width has NOT been set, then create an invisible element
    with the wanted width inside and use that which does not require all the
    above fussing.

    The width unit must be physical rather than percentage.

    Similarly for height.

    K

    --
    This email has been checked for viruses by Avast antivirus software. https://www.avast.com/antivirus

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?B?8J+YiSBHb29kIEd1eSDwn5iJ?@21:1/5 to Andrew Poulos on Mon Jun 28 20:35:10 2021
    This is a multi-part message in MIME format.
    On 28/06/2021 01:17, Andrew Poulos wrote:

    First, doing it that way means the width is set with respect to its
    parent and not it's great grand parent. Secondly, using vh for height
    bears no relation to the size of the parents(s).


    This one should work.  Try it (change the height to pixels if that is
    what you want):

            #great-grandparent div#one {
                width: 50%;
                height: 20vh;
                background-color: tomato;
            }
    You could also play with div:nth-child(?) but it can get tricky with
    nested divs unless all the divs have either classes or ids



    --

    With over 1.3 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">
    </head>
    <body text="#990000" bgcolor="#f5f1e4">
    <div class="moz-cite-prefix">On 28/06/2021 01:17, Andrew Poulos
    wrote:<br>
    </div>
    <blockquote type="cite"
    cite="mid:5YmdnYBYXcWfiET9nZ2dnUU7-eHNnZ2d@westnet.com.au"><br>
    First, doing it that way means the width is set with respect to
    its parent and not it's great grand parent. Secondly, using vh for
    height bears no relation to the size of the parents(s).
    <br>
    <br>
    <br>
    </blockquote>
    <p>This one should work.  Try it (change the height to pixels if
    that is what you want):</p>
    <p>
    <blockquote type="cite">        #great-grandparent div#one {<br>
                width: 50%;<br>
                height: 20vh;<br>
                background-color: tomato;<br>
            }</blockquote>
    You could also play with div:nth-child(?) but it can get tricky
    with nested divs unless all the divs have either classes or ids</p>
    <p><br>
    </p>
    <p><br>
    </p>
    <div class="moz-signature">-- <br>
    <div class="table" style="display: table;">
    <div class="tr" style="display: table-row;">
    <div class="td" style="display:table-cell;width:
    100vw;box-sizing:border-box;padding: 10px; vertical-align:
    middle; background-color: #003300;color:
    chartreuse;height:80px;font-size: 1.2em;text-align:
    center;font-weight: 900;border-radius: 5px;">
    <p>With over 1.3 billion devices now running Windows 10,
    customer satisfaction is higher than any previous version
    of windows. </p>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Dr.Kral@nyc.rr.com@21:1/5 to Dr.Kral@nyc.rr.com on Tue Jun 29 06:34:48 2021
    On Mon, 28 Jun 2021 15:17:59 -0400, Dr.Kral@nyc.rr.com wrote in <828kdgpg878pnqurt6g5vdgvq73c8qqc43@4ax.com>:

    On Sun, 27 Jun 2021 15:52:06 +1000, Andrew Poulos <ap_prog@hotmail.com>
    wrote in <hfCdnXjhAsaaj0X9nZ2dnUU7-RPNnZ2d@westnet.com.au>:

    Is there a way to set the width and height of an element with respect to
    a great grandparent (or higher) element?

    The HTML looks a bit like this:

    <body>
    <div id="great-grandparent">
    <div></div>

    <div>
    <div>
    <div id="one"></div>
    </div>
    </div>
    </div>
    </body>

    Set the size of "one" with respect to "great-grandparent".

    Andrew Poulos
    Corrected --

    If the grand-parent's width has been set, then

    var w = document.getElementById('great-grandparent').style.width ;
    var w1 = Number( w.replace(/[^\d]/g, "") ) ; //size
    var w2 = w.replace(/\d/g, "") ; //unit
    document.getElementById('one').style.width = (w1) * adjustment +w2;

    If grand-parent's width has NOT been set, then create an invisible element >with the wanted width inside and use that which does not require all the >above fussing.

    The width unit must be physical rather than percentage.

    Similarly for height.

    An even better way is to use getComputedStyle.

    Assuming that the unit is two characters (probably px) then

    var w = getComputedStyle ( document.getElementById('great-grandparent') ).
    getPropertyValue('width') ; document.getElementById('one').style.width =
    Number(w.substr(0,w.length-2)) * adjustment + w.substr(-2) ;

    which avoids two replaces using regexps. The number function is probably redundant.

    K

    --
    This email has been checked for viruses by Avast antivirus software. https://www.avast.com/antivirus

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Thomas 'PointedEars' Lahn@21:1/5 to Andrew Poulos on Thu Jul 1 20:04:15 2021
    Andrew Poulos wrote:

    Is there a way to set the width and height of an element with respect to
    a great grandparent (or higher) element?

    The HTML looks a bit like this:

    <body>
    <div id="great-grandparent">
    <div></div>

    <div>
    <div>
    <div id="one"></div>
    </div>
    </div>
    </div>
    </body>

    Set the size of "one" with respect to "great-grandparent".

    With standard CSS, an element with “position: absolute” will be sized based on the next ancestor with a “position” value other than “static”, or the
    viewport in the absence of such an ancestor. This applies at least to the properties “left”, “top”, “right”, “bottom”, “width”, and “height”. The
    “width” and “height” properties do not include the padding, though (except
    in MSHTML < 7).

    It can, of course, also be solved with scripting.

    However, you may be attempting to solve the wrong problem.

    --
    PointedEars
    FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix> <https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
    Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

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