Limit Radio Buttons displayed per line

Question

I have a list being returned from a database that can potentially be a different size each time. The list is loaded onto a html page <div id="availableTimes"></div> using

$.each(returnData.availableTimes, function (index, value) {                        
     $("#availableTimes").append('<input type=radio name=availableTimes value= ' 
        + value.id + '>' + '<label id=' + value.id + '>' + value.time + '</label>');
});

What I would like to be able to do is limit the amount of radio buttons and labels displayed per line to 4. Is there a value I can set in CSS or do I have to insert a <br /> every 4 records in the JavaScript?

score 4 · Answer 1 · answered Jul 24 '13 at 15:45

You could use nth-child selectors to clear every 5th element (that has been floated). Really, you can break the line however you want, just use the nth-child selector to do so...

Like so:

#availableTimes input {
    float:left;
}

#availableTimes input:nth-child(4n + 1) {
    clear:left;
}

EDIT: use (4n + 1) rather than (5n)

score 1 · Accepted Answer · answered Jul 24 '13 at 16:08

1

Without floats, you can add line break on the label

#availableTimes label:nth-child():after {
    content:"\a";
    white-space: pre;
}

Demo: http://jsfiddle.net/8FALp/1/

answered Jul 24 '13 at 16:08

Andrew Clody

1,171
6
13

score 0 · Answer 3 · edited May 23 '17 at 11:49

0

The short answer is that you're going to need to put a <br> tag every four records. AFAIK, there's no way to create a line-break using just CSS. This SO question has a few more solutions, if you want to look into those

edited May 23 '17 at 11:49

Community

1
1

answered Jul 24 '13 at 15:44

Jnatalzia

1,687
8
14

Limit Radio Buttons displayed per line

3 Answers3