1

I have this radio button and I want the options to be displayed vertically.

$options = array(
    'LastMonth' => 'Last full month', 
    'Last30' => 'Last 30 days', 
    'LastYear' => 'Last full year', 
    'Last365' => 'Last 365 days', 
    'Custom' => 'Custom'
);
echo $this->Form->input('rank', array(
    'type' => 'radio',
    'legend' => false,
    'options' => $options,
    'selected' => 'LastMonth'
));

This is displaying all options in horizontal and i need them to be displayed in vertical. Thanks!!

EDITED: now it displays the options like this. enter image description here

HTML:

<div class="vertical-radio-buttons">
    <div class="input radio">
        <input type="hidden" name="data[StatsComponents][rank]" id="StatsComponentsRank_" value="">
        <input type="radio" name="data[StatsComponents][rank]" id="StatsComponentsRankLastMonth" value="LastMonth">
        <label for="StatsComponentsRankLastMonth">Last full month</label>
        <input type="radio" name="data[StatsComponents][rank]" id="StatsComponentsRankLast30" value="Last30">
        <label for="StatsComponentsRankLast30">Last 30 days</label>
        <input type="radio" name="data[StatsComponents][rank]" id="StatsComponentsRankLastYear" value="LastYear">
        <label for="StatsComponentsRankLastYear">Last full year</label>
        <input type="radio" name="data[StatsComponents][rank]" id="StatsComponentsRankLast365" value="Last365">
        <label for="StatsComponentsRankLast365">Last 365 days</label>
        <input type="radio" name="data[StatsComponents][rank]" id="StatsComponentsRankCustom" value="Custom">
        <label for="StatsComponentsRankCustom">Custom</label>
    </div>
</div>
Axel Köhler
  • 911
  • 1
  • 8
  • 34
Julia
  • 538
  • 2
  • 7
  • 17
  • Check this thread which is explaining how to display a input of type range vertically. https://stackoverflow.com/questions/15935837/how-to-display-a-range-input-slider-vertically – Oris Sin Jan 07 '21 at 10:02
  • I just want to display the options of the radio button in a list in vertical, I don't want a slider :) – Julia Jan 07 '21 at 10:49
  • Can you make a snippet of your problem ? It is kind of ambiguous what you are looking for. – Oris Sin Jan 07 '21 at 11:06
  • I just want a radio button with 5 posible options, displayed in vertical – Julia Jan 08 '21 at 09:50
  • 1
    This is primarily a CSS problem, so in order for non-CakePHP people to be able to help you, they would need to see the generated HTML. I guess it would even be helpful for people familiar with CakePHP, personally I can't remember what HTML CakePHP 1.3 generated specifically. Furthermore if you're using a CSS framework of some kind it would be good to mention that, also if you already tried anything to solve the issue. – ndm Jan 08 '21 at 10:22
  • If you can post the generated HTML as @ndm says, that would be the key to giving you a solution to your problem. – Oris Sin Jan 08 '21 at 10:28
  • For sure. I add the HTML on the question :) – Julia Jan 11 '21 at 09:59

1 Answers1

1

This is mostly a css problem: putting every label and input pair inside a <div> will solve the problem. In CakePHP 1.3, you can use the before, separator and after options to accomplish this:

echo $this->Form->input('rank', array(
    'type' => 'radio',
    'legend' => false,
    'options' => $options,
    'selected' => 'LastMonth',
    'before' => '<div>',
    'separator' => '</div><div>',
    'after' => '</div>',
));
Axel Köhler
  • 911
  • 1
  • 8
  • 34