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 >
<?php
echo $this->Form->label('location', 'Location:', ['class' => 'meetingLabel']);
echo "</br>";
?>
<div ></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 >
<label for="location">Location:</label><br>
<div ></div>
<input type="hidden" name="location" value="">
<label for="location-locationa">
<input type="radio" name="location" value="LocationA" id="location-locationa" required="required" >
Location A
</label>
<label for="location-locationb">
<input type="radio" name="location" value="LocationB" id="location-locationb" required="required" >
Location B
</label>
<br>
</div>
What i have already tried
One other post i looked at was this one:
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!
CodePudding user response:
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 >
<label for="location">Location:</label><br>
<div ></div>
<input type="hidden" name="location" value="">
<label for="location-locationa">
<input type="radio" name="location" value="LocationA" id="location-locationa" required="required" >
Location A
</label>
<label for="location-locationb">
<input type="radio" name="location" value="LocationB" id="location-locationb" required="required" >
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