使父元素“调整大小".等于最大的子项的宽度(响应开关) [英] Make parent element "resize" to equal the width of the biggest of the children (responsive switch-toggle)

问题描述

我为拨动开关提出了以下解决方案:

I've come up with the following solution for the toggle switch:

.cookiemanagement__switchWrapper {
  display: flex;
  align-items: center;
}
.cookiemanagement__switchWrapper:last-of-type {
  margin-top: 15px;
}
.cookiemanagement__switch {
  display: inline-block;
  position: relative;
}
.cookiemanagement__switchInput {
  cursor: pointer;
  height: 100%;
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}
.cookiemanagement__switchToggle {
  align-items: center;
  background-color: #9a3d37;
  border-radius: 50px;
  display: flex;
  height: 24px;
  justify-content: space-between;
  position: relative;
  transition: background-color ease-out 0.3s;
  z-index: 0;
}
.cookiemanagement__switchToggle:before {
  background: #fff;
  box-shadow: 1px 0 2px #646464;
  border-radius: 50%;
  border: 1px solid #aaaaaa;
  content: "";
  display: block;
  height: 24px;
  left: 0;
  position: absolute;
  top: 0;
  transition: 0.2s ease-out;
  width: 24px;
  z-index: 2;
}
.cookiemanagement__switchToggleValue {
  text-transform: uppercase;
  line-height: normal;
  transition: opacity 0.2s ease-out 0.1s;
}
.cookiemanagement__switchToggleValue--on {
  margin: 0 4px 0 8px;
  opacity: 0;
}
.cookiemanagement__switchToggleValue--off {
  margin: 0 8px 0 4px;
  opacity: 1;
}
.cookiemanagement__switchInput:checked ~ .cookiemanagement__switchToggle {
  background-color: #6a7d39;
}
.cookiemanagement__switchInput:checked ~ .cookiemanagement__switchToggle:before {
  left: calc(100% - 24px);
  box-shadow: -1px 0 2px #646464;
}
.cookiemanagement__switchInput:checked ~ .cookiemanagement__switchToggle .cookiemanagement__switchToggleValue--on {
  opacity: 1;
}
.cookiemanagement__switchInput:checked ~ .cookiemanagement__switchToggle .cookiemanagement__switchToggleValue--off {
  opacity: 0;
}
.cookiemanagement__switchLabel {
  margin-left: 15px;
}

<div class="cookiemanagement__switch">
    <input class="cookiemanagement__switchInput" id="id1140334900" role="switch" type="checkbox" value="3" name="analytics3">
    <div class="cookiemanagement__switchToggle">
        <span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--on">yes</span>
        <span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--off">no</span>
    </div>
</div>



<div class="cookiemanagement__switch">
    <input class="cookiemanagement__switchInput" id="id1140334900" role="switch" type="checkbox" value="3" name="analytics3">
    <div class="cookiemanagement__switchToggle">
        <span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--on">diakh</span>
        <span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--off">ara</span>
    </div>
</div>

但是，我在支持价值观的国际化方面存在一些问题.现在，整个元素的宽度是由两个子元素的宽度生成的，即"YES"而不是"NO".

However, I have some issues with supporting the internationalization of the values. Since right now the width of the whole element is generated from the width of two children which is "YES" and not "NO" text.

但是，如果使用更长的值，例如"DIAKH"和"ARA"(乔治亚州)，则该元素看起来会很宽.

But if longer values are used like "DIAKH" and "ARA" (Georgian) the element looks very wide.

所以我正在研究使整个组件宽度相等的方法:
最大子项的宽度(文本长度)+ 8px + 26px

So I am investigating the way to make the whole component width to equal:
width of the biggest children (text length) + 8px + 26px

8px -圆和文本之间的边距(红色矩形部分)
26px -圆的宽度/高度(橙色矩形部分)

8px - margin between circle and text (red rectangle part)
26px - width/height of the circle (orange rectangle part)

下面是要描述的内容的图解，其中DIAKH文本表示最大的子代.

Below is the illustration of what is being intended to describe, where DIAKH text represents the biggest child.

推荐答案

可能的解决方案之一是使用负的 margin-top 放置 yes 和不一个接一个，同时将它们都保留在流中，以便较大的一个将其 width 分配给父对象:

One of the possible solutions is using a negative margin-top to put yes and no one behind another, while keeping them both in the flow so the bigger one would give its width to the parent:

p * {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

label {
  position: relative;
  display: inline-block;
  margin: 0 0 0 .5em;
  color: #fff;
}

input {
  display: none
}

.key {
  position: absolute;
  z-index: 1;
  top: -.2em;
  left: -.05em;
  width: 2em;
  height: 2em;
  border: solid 1px rgba(0, 0, 0, .3);
  border-radius: 55%;
  box-shadow: .1em .1em .1em -.05em rgba(0, 0, 0, .5);
  background: ivory;
  transition: .3s;
}

.yes,
.no {
  display: block;
  margin: 0;
  border-radius: .8em;
  line-height: 1.6;
  box-shadow: inset .1em .1em .1em -.05em rgba(0, 0, 0, .3);
  transition: opacity .3s;
}

.yes {
  padding: 0 2.5em 0 .5em;
  background: forestgreen;
  opacity: 0;
}

.no {
  margin-top: -1.6em;
  padding: 0 .5em 0 2.5em;
  text-align: right;
  background: firebrick;
  opacity: 1;
}

:checked~.key {
  left: calc(100% - 2em);
}

:checked~.yes {
  opacity: 1
}

:checked~.no {
  opacity: 0
}

<p>English:
  <label>
    <input type="checkbox" checked>
    <span class="key"></span>
    <span class="yes">YES</span>
    <span class="no">NO</span>
  </label>
</p>

<p>Georgian:
  <label>
    <input type="checkbox">
    <span class="key"></span>
    <span class="yes">DIAKH</span>
    <span class="no">ARA</span>
  </label>
</p>

<p>Scots Gaelic:
  <label>
    <input type="checkbox" checked>
    <span class="key"></span>
    <span class="yes">THA</span>
    <span class="no">CHAN EIL</span>
  </label>
</p>

这篇关于使父元素“调整大小".等于最大的子项的宽度(响应开关)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！