Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
362 views
in Technique[技术] by (71.8m points)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...