Input overflow not visible

user_1406849 0
Viewed 97

I'm trying to create a tool to change margin/padding, that would look something like this

enter image description here

And I was able to get this far

enter image description here

I'm failing completely on showing the full inputs, overflow is not really working so I'm kind of lost now.

I did 2 boxes with each side has a label + input combination, to make the shape, I've used clip-path with poligon() function on the label, everything is pretty much aligned manually with position: absolute, and the input looks something like this:

input {
  height: 1.5rem;
  width: 3rem;
  border: 1px solid #c0c0c0;
  border-radius: 0.125rem;
  text-align: center;

  /* it's not working work  */
  overflow: visible;
}

Does anyone know what am I missing?

:root {
  font-size: 16px;
}

.wrapper {
  --initial-height: 10rem;
  --initial-width: 24rem;
  --deviation: 2px;
  --thickness: 1rem;
  position: relative;
  margin: 2rem;
}

.box.outer {
  --height: var(--initial-height);
  --width: var(--initial-width);
  height: var(--height);
  width: var(--width);
  position: absolute;
  top: 0;
  left: 0;
}

.box-border {
  --padding: 0.125rem;
  --height: calc(var(--initial-height) - 2 * var(--thickness) - 3 * var(--padding));
  --width: calc(var(--initial-width) - 2 * var(--thickness) - 3 * var(--padding));
  height: var(--height);
  width: var(--width);
  position: absolute;
  top: calc(var(--thickness) + var(--padding));
  left: calc(var(--thickness) + var(--padding));
  border: 1px solid #808080;
}

.box.inner {
  --height: calc(var(--initial-height) - 2 * var(--thickness) - 5 * var(--padding));
  --width: calc(var(--initial-width) - 2 * var(--thickness) - 5 * var(--padding));
  height: var(--height);
  width: var(--width);
  position: absolute;
  top: var(--padding);
  left: var(--padding);
}

.box h3 {
  position: absolute;
  top: 0.125rem;
  left: calc(var(--thickness) * 1.2);
  font-size: calc(var(--thickness) / 1.5);
  z-index: 10;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-family: Helvetica;
  font-weight: 400;
}

.side {
  background-color: #facc99;
}

label {
  margin: 0;
  padding: 0;
}

input {
  height: 1.5rem;
  width: 3rem;
  border: 1px solid #c0c0c0;
  border-radius: 0.125rem;
  text-align: center;
  /* @TODO fix - doesn't work  */
  overflow: visible;
}

.side {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.side.left {
  top: 0;
  left: 0;
  width: var(--thickness);
  height: var(--height);
  clip-path: polygon( 0 var(--deviation), 100% calc(var(--thickness) + var(--deviation)), 100% calc(100% - var(--thickness) - var(--deviation)), 0 calc(100% - var(--deviation)));
}

.side.right {
  top: 0;
  right: 0;
  width: var(--thickness);
  height: var(--height);
  clip-path: polygon( 100% var(--deviation), 100% calc(100% - var(--deviation)), 0 calc(100% - var(--thickness) - var(--deviation)), 0 calc(var(--thickness) + var(--deviation)));
}

.side.top {
  top: 0;
  left: 0;
  width: var(--width);
  height: var(--thickness);
  clip-path: polygon( var(--deviation) 0, calc(100% - var(--deviation)) 0, calc(100% - var(--thickness) - var(--deviation)) 100%, calc(var(--thickness) + var(--deviation)) 100%);
}

.side.bottom {
  bottom: 0;
  left: 0;
  width: var(--width);
  height: var(--thickness);
  clip-path: polygon( var(--deviation) 100%, calc(100% - var(--deviation)) 100%, calc(100% - var(--thickness) - var(--deviation)) 0, calc(var(--thickness) + var(--deviation)) 0);
}
<div class="wrapper">
  <div class="box outer">
    <h3>Margin</h3>
    <label class="side top">
            <input type="text" aria-label="margin top" />
        </label>
    <label class="side left">
            <input type="text" aria-label="margin left" />
        </label>
    <label class="side right">
            <input type="text" aria-label="margin right" />
        </label>
    <label class="side bottom">
            <input type="text" aria-label="margin bottom" />
        </label>
  </div>

  <div class="box-border">
    <div class="box inner">
      <h3>Padding</h3>
      <label class="side top">
                <input type="text" aria-label="padding top" />
            </label>
      <label class="side left">
                <input type="text" aria-label="padding left" />
            </label>
      <label class="side right">
                <input type="text" aria-label="padding right" />
            </label>
      <label class="side bottom">
                <input type="text" aria-label="padding bottom" />
            </label>
    </div>
  </div>
</div>

clip-path css
1 Answers

You can increase the area of the clip-path to keep the overflow visible. Clip-path doesn't need to fit the element dimension:

:root {
  font-size: 16px;
}

.wrapper {
  --initial-height: 10rem;
  --initial-width: 24rem;
  --deviation: 2px;
  --thickness: 1rem;
  position: relative;
  margin: 2rem;
}

.box.outer {
  --height: var(--initial-height);
  --width: var(--initial-width);
  height: var(--height);
  width: var(--width);
  position: absolute;
  top: 0;
  left: 0;
}

.box-border {
  --padding: 0.125rem;
  --height: calc(var(--initial-height) - 2 * var(--thickness) - 3 * var(--padding));
  --width: calc(var(--initial-width) - 2 * var(--thickness) - 3 * var(--padding));
  height: var(--height);
  width: var(--width);
  position: absolute;
  top: calc(var(--thickness) + var(--padding));
  left: calc(var(--thickness) + var(--padding));
  border: 1px solid #808080;
}

.box.inner {
  --height: calc(var(--initial-height) - 2 * var(--thickness) - 5 * var(--padding));
  --width: calc(var(--initial-width) - 2 * var(--thickness) - 5 * var(--padding));
  height: var(--height);
  width: var(--width);
  position: absolute;
  top: var(--padding);
  left: var(--padding);
}

.box h3 {
  position: absolute;
  top: 0.125rem;
  left: calc(var(--thickness) * 1.2);
  font-size: calc(var(--thickness) / 1.5);
  z-index: 10;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-family: Helvetica;
  font-weight: 400;
}

.side {
  background-color: #facc99;
}

label {
  margin: 0;
  padding: 0;
}

input {
  height: 1.5rem;
  width: 3rem;
  border: 1px solid #c0c0c0;
  border-radius: 0.125rem;
  text-align: center;
}

.side {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.side.left {
  top: 0;
  left: 0;
  width: var(--thickness);
  height: var(--height);
  clip-path: polygon(-100px calc(-100px + var(--deviation)),-100px calc(100% + 100px - var(--deviation)) ,calc(100px - var(--deviation)) calc(100% - 100px),calc(101px - var(--deviation)) 100px );
}

.side.right {
  top: 0;
  right: 0;
  width: var(--thickness);
  height: var(--height);
  clip-path: polygon(calc(100% + 100px) calc(var(--deviation) - 100px), calc(100% - 100px + var(--deviation))  100px,calc(100% - 100px + var(--deviation))  calc(100% - 100px),calc(100px + 100%) calc(100% + 100px - var(--deviation)));
}

.side.top {
  top: 0;
  left: 0;
  width: var(--width);
  height: var(--thickness);
  clip-path: polygon( calc(var(--deviation) - 100px) -100px, calc(100% - var(--deviation) + 100px) -100px, calc(100% - 100px - var(--deviation)) 100px,  calc(100px + var(--deviation)) 100px);
}

.side.bottom {
  bottom: 0;
  left: 0;
  width: var(--width);
  height: var(--thickness);
  clip-path:polygon(calc(var(--deviation) - 100px) calc(99px + 100%), calc(100% + 100px - var(--deviation)) calc(100px + 100%), calc(100% - 100px - var(--deviation)) calc(100% - 100px),  calc(100px + var(--deviation)) calc(100% - 100px));
}
<div class="wrapper">
  <div class="box outer">
    <h3>Margin</h3>
    <label class="side top">
            <input type="text" aria-label="margin top" />
        </label>
    <label class="side left">
            <input type="text" aria-label="margin left" />
        </label>
    <label class="side right">
            <input type="text" aria-label="margin right" />
        </label>
    <label class="side bottom">
            <input type="text" aria-label="margin bottom" />
        </label>
  </div>

  <div class="box-border">
    <div class="box inner">
      <h3>Padding</h3>
      <label class="side top">
                <input type="text" aria-label="padding top" />
            </label>
      <label class="side left">
                <input type="text" aria-label="padding left" />
            </label>
      <label class="side right">
                <input type="text" aria-label="padding right" />
            </label>
      <label class="side bottom">
                <input type="text" aria-label="padding bottom" />
            </label>
    </div>
  </div>
</div>

To understand the trick, add a big box-shadow to see the new shape:

:root {
  font-size: 16px;
}

.wrapper {
  --initial-height: 10rem;
  --initial-width: 24rem;
  --deviation: 10px;
  --thickness: 1rem;
  position: relative;
  margin: 2rem;
}

.box.outer {
  --height: var(--initial-height);
  --width: var(--initial-width);
  height: var(--height);
  width: var(--width);
  position: absolute;
  top: 0;
  left: 0;
}

.box-border {
  --padding: 0.125rem;
  --height: calc(var(--initial-height) - 2 * var(--thickness) - 3 * var(--padding));
  --width: calc(var(--initial-width) - 2 * var(--thickness) - 3 * var(--padding));
  height: var(--height);
  width: var(--width);
  position: absolute;
  top: calc(var(--thickness) + var(--padding));
  left: calc(var(--thickness) + var(--padding));
  border: 1px solid #808080;
}

.box.inner {
  --height: calc(var(--initial-height) - 2 * var(--thickness) - 5 * var(--padding));
  --width: calc(var(--initial-width) - 2 * var(--thickness) - 5 * var(--padding));
  height: var(--height);
  width: var(--width);
  position: absolute;
  top: var(--padding);
  left: var(--padding);
}

.box h3 {
  position: absolute;
  top: 0.125rem;
  left: calc(var(--thickness) * 1.2);
  font-size: calc(var(--thickness) / 1.5);
  z-index: 10;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-family: Helvetica;
  font-weight: 400;
}

.side {
  background-color: #facc99;
}

label {
  margin: 0;
  padding: 0;
}

input {
  height: 1.5rem;
  width: 3rem;
  border: 1px solid #c0c0c0;
  border-radius: 0.125rem;
  text-align: center;
}

.side {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow:0 0 0 200px red;
}

.side.left {
  top: 0;
  left: 0;
  width: var(--thickness);
  height: var(--height);
  clip-path: polygon(-100px calc(-100px + var(--deviation)),-100px calc(100% + 100px - var(--deviation)) ,calc(100px - var(--deviation)) calc(100% - 100px),calc(101px - var(--deviation)) 100px );
}

.side.right {
  top: 0;
  right: 0;
  width: var(--thickness);
  height: var(--height);
  clip-path: polygon(calc(100% + 100px) calc(var(--deviation) - 100px), calc(100% - 100px + var(--deviation))  100px,calc(100% - 100px + var(--deviation))  calc(100% - 100px),calc(100px + 100%) calc(100% + 100px - var(--deviation)));
}

.side.top {
  top: 0;
  left: 0;
  width: var(--width);
  height: var(--thickness);
  clip-path: polygon( calc(var(--deviation) - 100px) -100px, calc(100% - var(--deviation) + 100px) -100px, calc(100% - 100px - var(--deviation)) 100px,  calc(100px + var(--deviation)) 100px);
}

.side.bottom {
  bottom: 0;
  left: 0;
  width: var(--width);
  height: var(--thickness);
  clip-path: polygon(calc(var(--deviation) - 100px) calc(99px + 100%), calc(100% + 100px - var(--deviation)) calc(100px + 100%), calc(100% - 100px - var(--deviation)) calc(100% - 100px),  calc(100px + var(--deviation)) calc(100% - 100px));
}
<div class="wrapper">
  <div class="box outer">
    <h3>Margin</h3>
    <label class="side top">
            <input type="text" aria-label="margin top" />
        </label>
    <label class="side left">
            <input type="text" aria-label="margin left" />
        </label>
    <label class="side right">
            <input type="text" aria-label="margin right" />
        </label>
    <label class="side bottom">
            <input type="text" aria-label="margin bottom" />
        </label>
  </div>

  <div class="box-border">
    <div class="box inner">
      <h3>Padding</h3>
      <label class="side top">
                <input type="text" aria-label="padding top" />
            </label>
      <label class="side left">
                <input type="text" aria-label="padding left" />
            </label>
      <label class="side right">
                <input type="text" aria-label="padding right" />
            </label>
      <label class="side bottom">
                <input type="text" aria-label="padding bottom" />
            </label>
    </div>
  </div>
</div>

You can consider any kind of shape you want. Simply make sure it will cut the sides like you want, otherwise you don't have any restriction.

You can optimize your code like below. It will better for responsive where you only need to change the wrapper dimension.

:root {
  font-size: 16px;
}

.wrapper {
  --deviation: 2px;
  --thickness: 1rem;
  --padding: 0.125rem;
  position: relative;
  width: 24rem;
  height: 10rem;
  margin: 2rem;
}

.box.outer {
  height: 100%;
}

.box-border {
  margin: calc(var(--thickness) + var(--padding));
  position: absolute;
  border: 1px solid;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.box.inner {
  margin: var(--padding);
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
}

.box h3 {
  display:inline-block;
  margin: 0.125rem 0 0 calc(var(--thickness) * 1.2);
  font-size: calc(var(--thickness) / 1.5);
  line-height: 1;
  font-family: Helvetica;
  font-weight: 400;
  position: relative;
  z-index: 2;
}
.side {
  background-color: #facc99;
}
input {
  height: 1.5rem;
  width: 3rem;
  border: 1px solid #c0c0c0;
  border-radius: 0.125rem;
  text-align: center;
}
.side {
  position: absolute;
  display: flex;
  justify-content:center;
  align-items:center;
}
.side.left,
.side.right {
  top: 0;
  bottom: 0;
  width: var(--thickness);
}
.side.top,
.side.bottom {
  left: 0;
  right: 0;
  height: var(--thickness);
}
.side.left {
  left: 0;
  clip-path: polygon(-100px calc(-100px + var(--deviation)), -100px calc(100% + 100px - var(--deviation)), calc(100px - var(--deviation)) calc(100% - 100px), calc(101px - var(--deviation)) 100px);
}
.side.right {
  right: 0;
  clip-path: polygon(calc(100% + 100px) calc(var(--deviation) - 100px), calc(100% - 100px + var(--deviation)) 100px, calc(100% - 100px + var(--deviation)) calc(100% - 100px), calc(100px + 100%) calc(100% + 100px - var(--deviation)));
}
.side.top {
  top: 0;
  clip-path: polygon( calc(var(--deviation) - 100px) -100px, calc(100% - var(--deviation) + 100px) -100px, calc(100% - 100px - var(--deviation)) 100px, calc(100px + var(--deviation)) 100px);
}
.side.bottom {
  bottom: 0;
  clip-path: polygon(calc(var(--deviation) - 100px) calc(99px + 100%), calc(100% + 100px - var(--deviation)) calc(100px + 100%), calc(100% - 100px - var(--deviation)) calc(100% - 100px), calc(100px + var(--deviation)) calc(100% - 100px));
}
<div class="wrapper">
  <div class="box outer">
    <h3>Margin</h3>
    <label class="side top">
            <input type="text" aria-label="margin top" />
        </label>
    <label class="side left">
            <input type="text" aria-label="margin left" />
        </label>
    <label class="side right">
            <input type="text" aria-label="margin right" />
        </label>
    <label class="side bottom">
            <input type="text" aria-label="margin bottom" />
        </label>
  </div>

  <div class="box-border">
    <div class="box inner">
      <h3>Padding</h3>
      <label class="side top">
                <input type="text" aria-label="padding top" />
            </label>
      <label class="side left">
                <input type="text" aria-label="padding left" />
            </label>
      <label class="side right">
                <input type="text" aria-label="padding right" />
            </label>
      <label class="side bottom">
                <input type="text" aria-label="padding bottom" />
            </label>
    </div>
  </div>
</div>

user_86203330
Related