Как выровнять 2 поля mat-slide-toggle на разных строках

Question

У меня есть форма, которая имеет 2 переключателя ползунка в отдельных строках.Требуется, чтобы метка была слева от слайда, поэтому я устанавливаю свойство labelPosition = "before" для каждого элемента управления.Однако из-за разницы в количестве символов надписей ползунки не выровнены друг с другом.Есть ли способ, которым это может быть достигнуто.

Я пытался посмотреть, есть ли какие-либо стили, которые могут быть переопределены в CSS, или любые подходящие атрибуты элемента.

Вот HTML-код, который я использую:

<div class="form-group row">
        <div class="col-sm-3">
          <mat-slide-toggle labelPosition="before" color="primary">Automated Balance Check Enabled</mat-slide-toggle>
      </div>
      </div>
      <div class="form-group row">
        <div class="col-sm-3">
          <mat-slide-toggle labelPosition="before" color="primary">Balance Threshold Enabled</mat-slide-toggle>
        </div>
      </div>

Я бы хотел выровнять оба ползунка, но они не такие, как показано на этом скриншоте .

На втором мат-слайд-переключателе должно быть больше места между текстом метки и фактическим ползунком.Я могу обойти эту покупку, добавив несколько пробелов после текста «Порог баланса включен».

Answer 1

Вы можете попытаться определить класс .mat-slide-toggle-content в вашем CSS при фиксированном размере.Этот класс применяется к диапазону с текстом метки, чтобы он мог работать, но я не проверял.

Answer 2

попробуйте код ниже для вашего решения

    <div fxLayout="row"><mat-label fxFlex="40%">Automated Balance Check Enabled</mat-label>
<mat-slide-toggle fxFlex="60%" labelPosition="before" color="primary"></mat-slide-toggle></div>
  <div fxLayout="row">
<mat-label fxFlex="40%">Balance Threshold Enabled</mat-label>
<mat-slide-toggle fxFlex="60%" labelPosition="before" color="primary"></mat-slide-toggle></div>```