Question 418530 in Html Question posted in
Some basic documentation can be found here.

Html – Summary arrow is not centered with the content

I’m using summary/details html gadget for show a series of events.
Here is a simplified code (removed all rails/erb logic)

.eventscreen {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 1em;
  padding: 1em;
  gap: 1em;
  details {
    justify-self: center;
    table {
      display: inline;
      table-layout: auto;
      width: 70%;
    }
    td {
      border-right: 1px solid;
      text-align: center;
    }
  }
  summary {
    font-style: italic;
  }
  details[open] {
    padding: 0.5em;
  }
  details[open] summary {
    border-bottom: 1px solid #733030;
    margin-bottom: 0.5em;
  }
}
<div class="eventscreen">
  <details class="box">
    <summary>
      <table>
        <tr>
          <th>name</th>
          <td>address</td>
          <td>date</td>
        </tr>
      </table>
    </summary>
    <div>
      descr
    </div>
  </details>
  <details class="box">
    <summary>
      <table>
        <tr>
          <th>name</th>
          <td>address</td>
          <td>date</td>
        </tr>
      </table>
    </summary>
    <div>
      descr
    </div>
  </details>
</div>

Also I want to replace the arrow with a PNG icon. I tried removing it with this, but it has no affect (in Chrome):

summary::-webkit-details-marker {display: none;}
Tags:

3

Answers


  1. 0

    To center the arrow on the line, you can just give your tr element display:flex;

    .eventscreen {
 ...

    tr {
      display: flex;
    
    }td {
        border-right: 1px solid;
        text-align: center;
    }}
}

    To remove the details marker in Chrome you can set the list-style to none (your definition works for safari). Or use list-style-type to replace it with a custom character.

    summary {
    font-style: italic;
    list-style: none;
    /* or: list-style-type: "+"; */
}

    If you want to replace the marker with an image, you can define a background-image for the summary.

    Login or Signup to reply.
  2. 0

    In reality the marker is centered vertically to the element:

    browser measuring before

    but the display property is not correct. Changing it to inline-block and setting vertical-align: middle in the same selector will make the marker centered vertically:

    browser measuring after

    .eventscreen {
    & details {
        table {
            display: inline-block; /* changed from inline */
            vertical-align: middle; /* added */
            table-layout: auto;
            width: 70%;
        }
    }
}

    To hide the marker and replace it with an image you can do the following:

    summary {
  font-style: italic;
  list-style: none;
}

summary::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  background: url(https://www.gravatar.com/avatar/b94f537e4af21b0458d60f69003c7d58?s=48&d=identicon&r=PG);
  background-size: contain;
}

    .eventscreen {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 1em;
  padding: 1em;
  gap: 1em;
  details {
    justify-self: center;
    table {
      display: inline-block;
      vertical-align: middle;
      table-layout: auto;
      width: 70%;
    }
    td {
      border-right: 1px solid;
      text-align: center;
    }
  }
  summary {
    font-style: italic;
    list-style: none;
  }
  summary::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    background: url(https://www.gravatar.com/avatar/b94f537e4af21b0458d60f69003c7d58?s=48&d=identicon&r=PG);
    background-size: contain;
  }
  details[open] {
    padding: 0.5em;
  }
  details[open] summary {
    border-bottom: 1px solid #733030;
    margin-bottom: 0.5em;
  }
}
    <div class="eventscreen">
  <details class="box">
    <summary>
      <table>
        <tr>
          <th>name</th>
          <td>address</td>
          <td>date</td>
        </tr>
      </table>
    </summary>
    <div>
      descr
    </div>
  </details>
  <details class="box">
    <summary>
      <table>
        <tr>
          <th>name</th>
          <td>address</td>
          <td>date</td>
        </tr>
      </table>
    </summary>
    <div>
      descr
    </div>
  </details>
</div>
    Login or Signup to reply.
  3. 0
    1. You current issue is related to font-size of marker. To solve the issue, you can adjust the marker size to center the arrow relative to the surrounding text content like the below.
    .eventscreen {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 1em;
  padding: 1em;
  gap: 1em;
  details {
    justify-self: center;
    table {
      display: inline;
      table-layout: auto;
      width: 70%;
    }
    td {
      border-right: 1px solid;
      text-align: center;
    }
  }
  summary {
    font-style: italic;

    &::marker {
      font-size: 1.5em;
    }
  }
  details[open] {
    padding: 0.5em;
  }
  details[open] summary {
    border-bottom: 1px solid #733030;
    margin-bottom: 0.5em;
  }
}
    <div class="eventscreen">
  <details class="box">
    <summary>
      <table>
        <tr>
          <th>name</th>
          <td>address</td>
          <td>date</td>
        </tr>
      </table>
    </summary>
    <div>
      descr
    </div>
  </details>
  <details class="box">
    <summary>
      <table>
        <tr>
          <th>name</th>
          <td>address</td>
          <td>date</td>
        </tr>
      </table>
    </summary>
    <div>
      descr
    </div>
  </details>
</div>
    1. You can remove the default marker and use a png file or before instead of the marker.
    .eventscreen {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 1em;
  padding: 1em;
  gap: 1em;
  details {
    justify-self: center;
    table {
      display: inline;
      table-layout: auto;
      width: 70%;
    }
    td {
      border-right: 1px solid;
      text-align: center;
    }
  }
  summary {
    list-style: none;
    display: flex;
    align-items: center;
  }
  summary::before {
    content: "▶";
    margin-right: 0.5em;
    transition: transform 0.3s ease;
    font-style: normal;
  }
  details[open] {
    padding: 0.5em;
  }
  details[open] summary::before {
    content: "▼";
  }
  details[open] summary {
    border-bottom: 1px solid #733030;
    margin-bottom: 0.5em;
  }
  details[open] summary::before {
    content: "▼";
  }
}
    <div class="eventscreen">
  <details class="box">
    <summary>
      <table>
        <tr>
          <th>name</th>
          <td>address</td>
          <td>date</td>
        </tr>
      </table>
    </summary>
    <div>
      descr
    </div>
  </details>
  <details class="box">
    <summary>
      <table>
        <tr>
          <th>name</th>
          <td>address</td>
          <td>date</td>
        </tr>
      </table>
    </summary>
    <div>
      descr
    </div>
  </details>
</div>

    Note: To remove the default marker, you can use list-style: none;

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search