очищаемое заполнение метки перезаписи ввода - PullRequest
Новая
       29

очищаемое заполнение метки перезаписи ввода

0 голосов
/ 10 июля 2019

Попробуйте сделать ввод с помощью кнопки закрытия, <input type=search>, но мне нужно больше стилей, поэтому я решил сделать это самостоятельно, но проблема в том, что позиция ввода и метка также немного сдвинулись, когда требуется очистить ввод.

overwrite input and label padding

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%;
 }

это то, что я пробовал до сих пор, очищаемая демоверсия ввода . нужен совет как это решить,

1 Ответ

0 голосов
/ 10 июля 2019

Проблема в том, что кнопка не существует, когда ввод пуст и когда вводится некоторый текст, кнопка вставляется в DOM, занимая некоторое пространство, которое заставляет метку двигаться. Один из способов поместить кнопку на другой слой - использовать position: absolute для элемента.

Попробуйте что-то вроде этого:

Устраняемые-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>

Устраняемые-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;
}

Рабочая демо

...