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

  • Nesting fieldset set to grid

    From Andrew Poulos@21:1/5 to All on Wed Sep 2 17:18:39 2020
    Within a form I've nested a fieldsets within a fieldsets. I have the
    nesting because I need to be able to disable individual groups of inputs
    as well as "all" the inputs.

    <form>
    <fieldset class="top">
    <!-- a number of inputs and their labels here -->
    <fieldset class="nested">
    <!-- a number of inputs and their labels here -->
    </fieldset>
    </fieldset>

    <fieldset...
    </form>

    with this CSS

    .top {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    width: 360px;
    padding: 2px;
    }

    .nested {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 8px;
    grid-row-gap: 4px;
    margin-bottom: 12px;
    }

    The trouble I'm having is that "nested" doesn't seem to display as a
    grid. DevTools tells me it's a grid with all the associated columns etc
    but the grid's content displays vertically (one under the other) each
    item 100% wide (instead of honouring their column and row settings).

    If I changed the nested fieldset to a div the gird displays as expected.

    What could be the issue with the nested fieldset grid not "working".

    Andrew Poulos

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Andrew Poulos@21:1/5 to Andrew Poulos on Wed Sep 2 17:21:44 2020
    On 2/09/2020 5:18 pm, Andrew Poulos wrote:
    Within a form I've nested a fieldsets within a fieldsets. I have the
    nesting because I need to be able to disable individual groups of inputs
    as well as "all" the inputs.

    <form>
      <fieldset class="top">
        <!-- a number of inputs and their labels here -->
        <fieldset class="nested">
          <!-- a number of inputs and their labels here -->
        </fieldset>
      </fieldset>

      <fieldset...
    </form>

    with this CSS

    .top {
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      width: 360px;
      padding: 2px;
    }

    .nested {
      display: grid;
      width: 100%;
      grid-template-columns: repeat(5, 1fr);
      grid-column-gap: 8px;
      grid-row-gap: 4px;
      margin-bottom: 12px;
    }

    The trouble I'm having is that "nested" doesn't seem to display as a
    grid. DevTools tells me it's a grid with all the associated columns etc
    but the grid's content displays vertically (one under the other) each
    item 100% wide (instead of honouring their column and row settings).

    If I changed the nested fieldset to a div the gird displays as expected.

    What could be the issue with the nested fieldset grid not "working".

    I've been testing using Chrome. A quick test with Firefox has the
    fieldset displaying correctly as a grid...

    Andrew Poulos

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Andrew Poulos@21:1/5 to Andrew Poulos on Wed Sep 2 17:34:14 2020
    On 2/09/2020 5:21 pm, Andrew Poulos wrote:
    On 2/09/2020 5:18 pm, Andrew Poulos wrote:
    Within a form I've nested a fieldsets within a fieldsets. I have the
    nesting because I need to be able to disable individual groups of
    inputs as well as "all" the inputs.

    Here's a complete, simple example which fails to display as a grid in
    Chrome but works in Firefox


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Nested Fieldsets</title>
    <style>
    .top {
    border: 0;
    margin:0;
    padding:0;
    width:480px;
    }
    .nested {
    border: 0;
    margin:0;
    margin-top:4px;
    padding:0;
    display: grid;
    width:100%;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    }
    input {
    width:100%;
    }
    </style>
    </head>
    <body>
    <form>
    <fieldset class="top">
    <input type="text">
    <input type="text">
    <fieldset class="nested">
    <input style="grid-column:1; grid-row:1;" type="text">
    <input style="grid-column:2; grid-row:1;" type="text">
    <input style="grid-column:1; grid-row:2;" type="text">
    <input style="grid-column:2; grid-row:2;" type="text">
    <input style="grid-column:1; grid-row:3;" type="text">
    <input style="grid-column:2; grid-row:3;" type="text">
    <input style="grid-column:1; grid-row:4;" type="text">
    </fieldset>
    </fieldset>
    </form>
    </body>
    </html>

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From James Kirk@21:1/5 to Andrew Poulos on Wed Sep 2 13:41:10 2020
    In Message: <VoadnRuQXrHN2tLCnZ2dnUU7-L3NnZ2d@westnet.com.au>
    Andrew Poulos <ap_prog@hotmail.com> wrote:

    [snip]

    If I changed the nested fieldset to a div the gird displays as
    expected.

    What could be the issue with the nested fieldset grid not "working".

    https://stackoverflow.com/questions/51076747/grid-layout-on-fieldset-bug-on-chrome


    --
    J𝕒𝕞𝕖𝕤 𝕂𝕚𝕣𝕜

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Andrew Poulos@21:1/5 to James Kirk on Thu Sep 3 11:07:19 2020
    On 3/09/2020 3:41 am, James Kirk wrote:
    In Message: <VoadnRuQXrHN2tLCnZ2dnUU7-L3NnZ2d@westnet.com.au>
    Andrew Poulos <ap_prog@hotmail.com> wrote:

    [snip]

    If I changed the nested fieldset to a div the gird displays as
    expected.

    What could be the issue with the nested fieldset grid not "working".

    https://stackoverflow.com/questions/51076747/grid-layout-on-fieldset-bug-on-chrome

    That was from 2 years ago and the issue hasn't been fixed :-(

    Andrew Poulos

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Evertjan.@21:1/5 to Andrew Poulos on Thu Sep 3 10:55:10 2020
    Andrew Poulos <ap_prog@hotmail.com> wrote on 03 Sep 2020 in comp.infosystems.www.authoring.stylesheets:

    On 3/09/2020 3:41 am, James Kirk wrote:
    In Message: <VoadnRuQXrHN2tLCnZ2dnUU7-L3NnZ2d@westnet.com.au>
    Andrew Poulos <ap_prog@hotmail.com> wrote:

    [snip]

    If I changed the nested fieldset to a div the gird displays as
    expected.

    What could be the issue with the nested fieldset grid not "working".

    https://stackoverflow.com/questions/51076747/grid-layout-on-fieldset-bug
    -on-chrome

    That was from 2 years ago and the issue hasn't been fixed :-(

    See also more recent:

    <https://stackoverflow.com/questions/62692452/cant-position-html-legend-tag- with-css-grid>



    --
    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 Evertjan.@21:1/5 to Evertjan. on Thu Sep 3 10:57:05 2020
    "Evertjan." <exxjxw.hannivoort@inter.nl.net> wrote on 03 Sep 2020 in comp.infosystems.www.authoring.stylesheets:

    Andrew Poulos <ap_prog@hotmail.com> wrote on 03 Sep 2020 in comp.infosystems.www.authoring.stylesheets:

    On 3/09/2020 3:41 am, James Kirk wrote:
    In Message: <VoadnRuQXrHN2tLCnZ2dnUU7-L3NnZ2d@westnet.com.au>
    Andrew Poulos <ap_prog@hotmail.com> wrote:

    [snip]

    If I changed the nested fieldset to a div the gird displays as
    expected.

    What could be the issue with the nested fieldset grid not "working".

    https://stackoverflow.com/questions/51076747/grid-layout-on-fieldset-bu
    g -on-chrome

    That was from 2 years ago and the issue hasn't been fixed :-(

    See also more recent:

    <https://stackoverflow.com/questions/62692452/cant-position-html-legend-t
    ag- with-css-grid>

    and:

    <https://codepen.io/davatron5000/pen/LLdYBm>



    --
    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 Stan Brown@21:1/5 to Andrew Poulos on Thu Sep 3 14:14:43 2020
    On Thu, 3 Sep 2020 11:07:19 +1000, Andrew Poulos wrote:

    On 3/09/2020 3:41 am, James Kirk wrote:
    In Message: <VoadnRuQXrHN2tLCnZ2dnUU7-L3NnZ2d@westnet.com.au>
    Andrew Poulos <ap_prog@hotmail.com> wrote:

    [snip]

    If I changed the nested fieldset to a div the gird displays as
    expected.

    What could be the issue with the nested fieldset grid not "working".

    https://stackoverflow.com/questions/51076747/grid-layout-on-fieldset-bug-on-chrome

    That was from 2 years ago and the issue hasn't been fixed :-(

    Googlke seems to be about new features (chiefly tracking and eye
    candy) and not really interested n fixing bugs.



    --
    Stan Brown, Tehachapi, California, USA
    https://BrownMath.com/
    https://OakRoadSystems.com/
    HTML 4.01 spec: http://www.w3.org/TR/html401/
    validator: http://validator.w3.org/
    CSS 2.1 spec: http://www.w3.org/TR/CSS21/
    validator: http://jigsaw.w3.org/css-validator/
    Why We Won't Help You: http://preview.tinyurl.com/WhyWont

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