可清除的输入覆盖标签填充答案

【问题标题】：clearable input overwrite label padding可清除的输入覆盖标签填充
【发布时间】：2019-07-10 14:50:08
【问题描述】：

尝试使用关闭图标按钮进行输入，<input type=search> 但我需要更多样式，所以我决定自己制作，但问题是输入的位置和标签在想要清除输入时也略有移动。

form.component.html

<div class="flex-center ">
  <input class="input" [(ngModel)]="value">
  <button *ngIf="value" class="button-close" (click)="value=''">
  </button>
  <label class="desc">description</label>
</div>

form.component.css

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

.desc {
 padding-left: 16px;
 }

.button-close {
 margin-left: -5%;
 }

这是我迄今为止尝试过的，clereable input demo。需要建议如何解决这个问题，

【问题讨论】：

标签： css angular angular-ng-if bulma

【解决方案1】：

问题是当输入为空并且输入一些文本时按钮不存在，按钮被插入到DOM中占用一些空间，这使得标签移动。将按钮放在不同层的一种方法是在元素上使用position: absolute。

试试这样的：

clearable-input.component.html

<div class="input-wrapper">
  <input class="input" [(ngModel)]="value">
  <button *ngIf="value" class="button-close" (click)="value=''">X</button>
</div>
<label>Description</label>

clearable-input.component.ts

.input-wrapper {
  position: relative;
  display: inline-block;
}

button {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  border: none;
  background-color: transparent;
}

label {
  margin-left: 15px;
}

工作demo

【讨论】：