метка группы выражается в верхнем регистре, но я хочу, чтобы она была заглавной - PullRequest
Новая
       23

метка группы выражается в верхнем регистре, но я хочу, чтобы она была заглавной

0 голосов
/ 29 апреля 2020

У меня есть следующий angular шаблон. Я заметил, что даже когда метки находятся в заглавном регистре, когда страница отображается, они конвертируются в верхний регистр, и мне это не нравится. Поэтому я решил использовать трубу заглавных букв и заключить текст надписи в одинарные кавычки. Тем не менее, надписи все еще в верхнем регистре (изображение прилагается для справки)

Я думаю, это должно быть просто, но я не знаю, как заставить это работать. Есть идеи? 

<form [formGroup]="updateForm" (ngSubmit)="onSubmit(updateForm.value)">
    <div>
        <label for="total">
          {{'Total' | titlecase}}
        </label>
        <input id="total" type="text" formControlName="total">
      </div>

      <div>
        <label for="supporters">
          {{'Number of supporters' | titlecase}}
        </label>
        <input id="supporters" type="text" formControlName="supporters">
      </div>      
    <button class="button" type="submit">Save</button>

  </form>

enter image description here

1 Ответ

1 голос
/ 29 апреля 2020

Кажется, проблема с вашим CSS.

Возможно, вы используете библиотеку или css файл, который для <label> устанавливает свойство text-transform: uppercase;.

Вы можете попытаться изменить это с помощью пользовательских css правил, таких как:

HTML

<form [formGroup]="updateForm" (ngSubmit)="onSubmit(updateForm.value)">
    <div>
        <label class="custom-label-title" for="total">
          {{'Total'}}
        </label>
        <input id="total" type="text" formControlName="total">
      </div>

      <div>
        <label  class="custom-label-title" for="supporters">
          {{'Number of supporters' }}
        </label>
        <input id="supporters" type="text" formControlName="supporters">
      </div>      
    <button class="button" type="submit">Save</button>

  </form>

CSS 

.custom-label-title {
  text-transform: capitalize;
}

На всякий случай, если он не работает (только для целей тестирования), добавьте !important:

CSS

.custom-label-title {
  text-transform: capitalize !important;
}

Потому что может случиться так, что другие правила CSS имеют больший приоритет:

Каков порядок приоритета для CSS?

...