Блог

Главная - Вопросы по программированию - Как я могу разместить требуемую звездочку и элемент управления в одной строке (HTML)?

Как я могу разместить требуемую звездочку и элемент управления в одной строке (HTML)?

#html #css #angular

Вопрос:

Я создал угловой раскрывающийся компонент "app-ec-dropdown" , используя https://www.npmjs.com/package/@ng-select/ng-select

 <div class="inline required">
  *
</div>
<div class="input-container inline">
  <ng-select 
    class="custom"
    [items]="items"
    bindLabel="Name"
    bindValue="Id"
    (focus)="focus()"
    (close)="close()"
    (clear)="clear()"
    (blur)="blur()"
    placeholder="Select"
    [(ngModel)]="selectedId"
    [required]="required"
  >
  </ng-select>

  <div *ngIf="!validatationPassed()">
    <div class="row alert alert-danger alert-div">
      <span>
        Required field
      </span>
    </div>
  </div>
</div>

CSS для вышеуказанного компонента

 .input-container {
  width: 95%;
}

.inline {
  display: inline;
}

.required {
  vertical-align: top;
  color: red;
  width: 2%;
}

Теперь я использую вышеуказанный компонент в родительском компоненте

 <div class="col-sm-4">
  <app-ec-dropdown 
    name="RegionId"
    [items]="regions"
    (onChange)="onRegionChange($event)"
    [selectedId]="state.RegionId"
    [required]="regionDropDownValidator.required"
    [ecDropDownValidator]="regionDropDownValidator"
    [(ngModel)]="regionDropDownValidator.selectedId"
    ngDefaultControl
  > </app-ec-dropdown>
</div>

для выпадающего списка региона я хочу, чтобы красная звездочка была размещена в текстовом поле «Название штата», а затем в раскрывающемся списке и сообщении о проверке в соседнем div.

Захват экрана:

Пожалуйста, нажмите здесь для захвата экрана

Комментарии:

1. что в классе div-управления?

2. @Smollet777, я удалил класс управления div. впрочем, никакой разницы. это .div-управление { заполнение слева: 5 пикселей; заполнение справа: 5 пикселей; выравнивание текста: слева; }

3. Не могли бы вы создать «Стекблитц» с рабочей частью вашего кода?

Ответ №1:

Поиграв с вашим кодом, я подумал о том, как бы я это сделал.

Я заметил, что фактическая метка не включена в ваш приведенный выше пример, поэтому я предполагаю, что она включена в столбец слева от <div class="col-sm-4"> элемента, в котором вы используете <app-ec-dropdown> компонент, который, как я предполагаю, вы определили с помощью первого блока кода.

Мой совет, который будет самым простым и правильным (на мой взгляд), состоял бы в том, чтобы добавить метку в качестве @Input свойства в ваш код для <app-ec-dropdown> компонента.

Затем вы можете поместить его ближе к символу звездочки.

Поэтому добавьте это в свой машинописный текст EcDropdownComponent:

 @Input()
public label: string = '';

Затем добавьте входной атрибут, в котором вы используете свой компонент:

 <app-ec-dropdown 
  name="RegionId"
  [items]="regions"
  label="State Name"
  (onChange)="onRegionChange($event)"
  [selectedId]="state.RegionId"
  [required]="regionDropDownValidator.required"
  [ecDropDownValidator]="regionDropDownValidator"
  [(ngModel)]="regionDropDownValidator.selectedId"
  ngDefaultControl>
</app-ec-dropdown>

Затем вы можете использовать сетку CSS для определения макета в вашем компоненте:

 <div class="row">
  <!-- Label -->
  <div class="col-sm-4">
    <div class="label">
      {{label}}
      <span class="inline required"> * </span>
    </div>
  </div>

  <!-- Select Input -->
  <div class="col-md-8">
    <div class="input-container inline">
      <ng-select
        class="custom"
        [items]="items"
        bindLabel="Name"
        bindValue="Id"
        (focus)="focus.emit()"
        (close)="close.emit()"
        (clear)="clear.emit()"
        (blur)="blur.emit()"
        placeholder="Select"
        [(ngModel)]="selectedId"
        [required]="required">
      </ng-select>

      <div *ngIf="!validatationPassed()">
        <div class="row alert alert-danger alert-div">
      <span>
        Required field
      </span>
        </div>
      </div>
    </div>
  </div>
</div>

Самое приятное в этом подходе то, что у вас есть полностью автономный компонент, которому не нужно беспокоиться ни о чем, выходящем за его рамки.

Если вас беспокоит переменная ширина, используйте Bootstrap и сеточную систему. Вы также можете передать стиль столбца сетки в качестве @Input свойства компоненту, чтобы предоставить больший контроль потребляющему компоненту.

Метки: