CODEWITHSUNDEEP
csscakephpradio-buttonstylescakephp-1.3
Julia
Julia

Reputation: 558

Display CakePHP Radio Buttons vertically

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>

Upvotes: 1

Views: 317

Answers (1)

Axel K&#246;hler
Axel K&#246;hler

Reputation: 995

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

Upvotes: 1

Related Questions