Aligning radio button's vertically with CakePHP 4

Question

My issue

I am using the cakephp 4 FormHelper to create some radio buttons on my page. It will create the radio buttons, however it will display them horizontally like in the image below but I want them to be displayed vertically.

My code

index.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>

index.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;
     }

what the html looks like when inspecting the page in chrome:

    <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>

What i have already tried

One other post i looked at was this one: Display CakePHP Radio Buttons vertically I tried to use the same solution in CakePHP 4 like below but this didn't work for me

    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>']
    );

I also tried adding an {display: block;} to my css but as you can see in the image below this only made it worse

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

after changing the css:

I did manage to make it align vertically correctly but the problem here is that only the bottem radio button works and when i select the top option before submitting the request in my controller is empty

non-functional 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>";

Any help is appreciated,

thanks!

Answer 1

Add css class to input label:

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']
        );

generate something like:

<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>

and css:

.label {
   display: block;
 }

read more https://book.cakephp.org/4/en/views/helpers/form.html#creating-radio-buttons