Search code examples
cssfirefox-addon-webextensionsborder-box

box-sizing: border-box - Size not maintained if border is changed afterwards

I'm stuck with a problem using box-sizing: border-box: I've 3 div sized with min-height: 24px I'd like to maintain the height whatever it is when adding horizontal borders.

The problem is that if horizontal borders are added after the content height has been computed once, then the content height isn't changed, and the div grows by the value of the borders.

In my case, borders are added by CSS itself when the element is hovered.

enter image description here
Height of first div increases when hovered, increasing the height of the whole page ↑

In case this is relevant:

  • The page is actually used as a popup in a Firefox webextension.

  • I'm using two style sheets, one which I cannot modify (extension.css) and one I use to extent and overwrite the first one (page-small.css).

  • One style is applied to each of the div to overwrite height: 24px in the protected CSS by min-height: 24px; to allow for the elements to grow with the content.

How can I manage this growth without having the external size changing when the element is hovered?

.no-wrap {
  white-space: nowrap;
}
.addl-text {
  padding-left: 1em;
}
.start {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
#col-1 {
  max-width: 300px;
}
#pli-1,
#pli-2,
#pli-3 {
  height: unset;    /* Want to cancel effect of...        */
  min-height: 24px; /* ...'height: 24px' in extension.css */
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://hg.mozilla.org/mozilla-central/raw-file/4f41a072c0ca/browser/components/extensions/extension.css">
  <link rel="stylesheet" href="page-small.css">
</head>

<body>
  <div id="col-1" class="panel-section">
    <fieldset class="panel-section-list">
      <legend>Checkboxes</legend>
      <div id="pli-1" class="panel-list-item">
        <div class="start">
          <input id="c11" type="checkbox">
          <label class="no-wrap" for="c11">Test</label>
          <label class="addl-text" for="c11">Voluptate nisi expe tendis eiusmod firmissimum de cillum nam eiusmod firmis simum expetendis, ipsum offendit.</label>
        </div>
      </div>
      <div class="panel-section-separator"></div>
      <div id="pli-3" class="panel-list-item">
        <input id="c12" type="checkbox">
        <label class="no-wrap" for="c12">Test</label>
      </div>
      <div id="pli-2" class="panel-list-item">
        <input id="c13" type="checkbox">
        <label class="no-wrap" for="c13">Test</label>
      </div>
    </fieldset>
  </div>
</body>

</html>

Solution

  • you can achieve what you want by simply add a hidden border.

    Add hidden border (white colored) to items, so that height won't increase. like in the snippet.

    .panel-list-item:not(.disabled) {
    border: 1px solid #fff;
}

    You may want to tweak other styles too fix issues.

    .panel-list-item:not(.disabled) {
    border: 1px solid #fff;
}

.no-wrap {
  white-space: nowrap;
}
.addl-text {
  padding-left: 1em;
}
.start {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
#col-1 {
  max-width: 300px;
}
#pli-1,
#pli-2,
#pli-3 {
  height: unset;    /* Want to cancel effect of...        */
  min-height: 24px; /* ...'height: 24px' in extension.css */
}
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://hg.mozilla.org/mozilla-central/raw-file/4f41a072c0ca/browser/components/extensions/extension.css">
  <link rel="stylesheet" href="page-small.css">
</head>

<body>
  <div id="col-1" class="panel-section">
    <fieldset class="panel-section-list">
      <legend>Checkboxes</legend>
      <div id="pli-1" class="panel-list-item">
        <div class="start">
          <input id="c11" type="checkbox">
          <label class="no-wrap" for="c11">Test</label>
          <label class="addl-text" for="c11">Voluptate nisi expe tendis eiusmod firmissimum de cillum nam eiusmod firmis simum expetendis, ipsum offendit.</label>
        </div>
      </div>
      <div class="panel-section-separator"></div>
      <div id="pli-3" class="panel-list-item">
        <input id="c12" type="checkbox">
        <label class="no-wrap" for="c12">Test</label>
      </div>
      <div id="pli-2" class="panel-list-item">
        <input id="c13" type="checkbox">
        <label class="no-wrap" for="c13">Test</label>
      </div>
    </fieldset>
  </div>
</body>

</html>