Моя проблема
Я использую Cakephp 4 FormHelper для создания некоторых переключателей на моей странице. Он создаст переключатели, однако будет отображать их горизонтально, как на изображении ниже, но я хочу, чтобы они отображались вертикально.
Мой код
индекс.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;
}
Мне удалось правильно выровнять его по вертикали, но проблема в том, что работает только нижний переключатель, и когда я выбираю верхний вариант перед отправкой запроса, в моем контроллере пусто
нефункциональный 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 поддерживает ссылки (гиперссылки) для перехода с одной страницы на другую.
Добавьте класс 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