Вертикальное выравнивание переключателей с помощью CakePHP 4

Моя проблема

Я использую Cakephp 4 FormHelper для создания некоторых переключателей на моей странице. Он создаст переключатели, однако будет отображать их горизонтально, как на изображении ниже, но я хочу, чтобы они отображались вертикально.

Вертикальное выравнивание переключателей с помощью CakePHP 4

Мой код

индекс.php:

    <div class = "meetingRadioBox">
      <?php 
        echo $this->Form->label('location', 'Location:', ['class' => 'meetingLabel']);
        echo "</br>";
      ?>
      <div class = "separatorLine"></div> 
      <?php
        echo $this->Form->radio('location',
          [
            ['value' => 'LocationA', 'text' => 'Location A'],
            ['value' => 'LocationB', 'text' => 'Location B'],
          ],
          ['class' => 'meetingRadio', 'required' => 'true']
        );
        echo "</br>";
        echo $this->Form->label('host', 'Gesprek met:', ['class' => 'meetingLabel']);
        echo "</br>";
      ?>
    </div>

индекс.css:

    .meetingRadio{
      font-weight: normal;
      width: 40px;
      height: 20px;
      vertical-align: middle;
    }

    .meetingRadioBox{
      padding-bottom: 20px;
    }

    .meetingRadioBox{  
      border-top: 1px solid #C4C4C4;
      margin-bottom: 15px;
    }

    .meetingLabel{
       text-align: left;
       font: normal normal bold 16px/38px Open;
       font-family: sans-serif;
       letter-spacing: 0px;
       width: 50%;
       padding-top: 20px;
       color: #1D1D1B;
       opacity: 1;
     }

как выглядит html при проверке страницы в хроме:

    <div class = "meetingRadioBox">
      <label class = "meetingLabel" for = "location">Location:</label><br>
      <div class = "separatorLine"></div> 
      <input type = "hidden" name = "location" value = "">
      <label for = "location-locationa">
        <input type = "radio" name = "location" value = "LocationA" id = "location-locationa" required = "required" class = "meetingRadio">
          Location A
      </label>
      <label for = "location-locationb">
        <input type = "radio" name = "location" value = "LocationB" id = "location-locationb" required = "required" class = "meetingRadio">
          Location B
      </label>
      <br>
    </div>

Что я уже пробовал

Еще один пост, на который я посмотрел, был следующим: Отображение радиокнопок CakePHP вертикально Я пытался использовать то же решение в CakePHP 4, как показано ниже, но это не сработало для меня.

    echo $this->Form->radio('location',
      [
        ['value' => 'LocationA', 'text' => 'Location A'],
        ['value' => 'LocationB', 'text' => 'Location B'],
      ],
      ['class' => 'meetingRadio', 'required' => 'true', 'before' => '<div>', 'separator' => '</div><div>', 'after' => '</div>']
    );

Я также пытался добавить {display: block;} в свой css, но, как вы можете видеть на изображении ниже, это только ухудшило ситуацию.

    .meetingRadio{
      font-weight: normal;
      width: 40px;
      height: 20px;
      vertical-align: middle;
      display: block;
    }

после изменения css: Вертикальное выравнивание переключателей с помощью CakePHP 4

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

нефункциональный index.php:

    echo $this->Form->radio('location',
      [['value' => 'LocationA', 'text' => 'Location A'],],
      ['class' => 'meetingRadio', 'required' => 'true']
    );
    echo "</br>";
    echo $this->Form->radio('location',
      [['value' => 'LocationB', 'text' => 'Location B'],],
      ['class' => 'meetingRadio', 'required' => 'true']
    );
    echo "</br>";

Любая помощь приветствуется,

Спасибо!

🤔 А знаете ли вы, что...
HTML поддерживает ссылки (гиперссылки) для перехода с одной страницы на другую.


1
46
1

Ответ:

Решено

Добавьте класс css к входной метке:

php:

<?php
        echo $this->Form->radio('location',
          [
            ['value' => 'LocationA', 'text' => 'Location A', 'label' => ['class' => 'label']],
            ['value' => 'LocationB', 'text' => 'Location B', 'label' => ['class' => 'label']],
          ],
          ['class' => 'meetingRadio', 'required' => 'true']
        );

сгенерировать что-то вроде:

<div class = "meetingRadioBox">
  <label class = "meetingLabel" for = "location">Location:</label><br>
  <div class = "separatorLine"></div> 
  <input type = "hidden" name = "location" value = "">
  <label class = "label" for = "location-locationa">
    <input type = "radio" name = "location" value = "LocationA" id = "location-locationa" required = "required" class = "meetingRadio">
      Location A
  </label>
  <label class = "label" for = "location-locationb">
    <input type = "radio" name = "location" value = "LocationB" id = "location-locationb" required = "required" class = "meetingRadio">
      Location B
  </label>
  <br>
</div>

и CSS:

.label {
   display: block;
 }

читать дальше https://book.cakephp.org/4/en/views/helpers/form.html#creating-radio-buttons