• Center DIV with out DIV on ipad

    From Andrew Poulos@21:1/5 to All on Wed Dec 23 09:34:37 2020
    With this HTML

    <div class="opt">
    <div class="optnum">
    <p>1.</p>
    </div>
    <div class="opttxt">
    <p>Continue</p>
    </div>
    </div>

    I have this CSS

    .opt {
    display: grid;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    align-items: center;
    grid-template-columns: min-content 1fr;
    grid-column-gap:6px;
    width: 10em;
    overflow: hidden;
    }
    .optnum {
    display:flex;
    justify-content:center;
    align-items: center;
    width:2.4em;
    height:2.4em;
    }
    .optnum p {
    font-weight: bold;
    }
    .optTxt {
    line-height: 2.5em;
    border-radius: 8px;
    }

    On Windows, with Chrome and Firefox, the outer DIV is about 32px high
    and the inner DIVs appear within it. With Safari on an ipad the outer
    div is again about 32px but the inner DIVs are somewhere below the outer
    DIV ie not visible.

    How does the CSS need to change to get the inner DIVs to appear?

    If I set a height for the outer DIV the inner DIVs appear but I'd need
    to know the height of the inner DIVs to avoid cutting them off or having
    too much space.

    Andrew Poulos

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Andrew Poulos@21:1/5 to Andrew Poulos on Wed Dec 23 11:41:08 2020
    On 23/12/2020 9:34 am, Andrew Poulos wrote:
    With this HTML

    <div class="opt">
      <div class="optnum">
        <p>1.</p>
      </div>
      <div class="opttxt">
        <p>Continue</p>
      </div>
    </div>

    I have this CSS

    .opt {
      display: grid;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
      align-items: center;
      grid-template-columns: min-content 1fr;
      grid-column-gap:6px;
      width: 10em;
      overflow: hidden;
    }

    On Windows, with Chrome and Firefox, the outer DIV is about 32px high
    and the inner DIVs appear within it. With Safari on an ipad  the outer
    div is again about 32px but the inner DIVs are somewhere below the outer
    DIV ie not visible.

    How does the CSS need to change to get the inner DIVs to appear?

    I set

    .opt {
    grid-template-rows: min-content;
    }

    and the inner DIVs now appear correctly.

    Andrew Poulos

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