Group of radio buttons inside table

Question

I'm trying to implement time table (for online record to a doctor). My code is:

<div class="container">
    <div class="record-container">
        <div class="time-container" style="padding-top:5px">
            <div class="time-table btn-group" data-toggle="buttons">
                <div class="time-table-row">
                    <div class="rec-time"><label class="btn btn-block free-time"><input type="radio">10:00</label></div>
                    <div class="rec-time"><label class="btn btn-block free-time"><input type="radio">11:00</label></div>
                    <div class="rec-time"><label class="btn btn-block free-time"><input type="radio">12:00</label></div>
                </div>
                <div class="time-table-row">
                    <div class="rec-time"><label class="btn btn-block free-time"><input type="radio">10:20</label></div>
                    <div class="rec-time"><label class="btn btn-block busy-time disabled"><input type="radio">11:20</label></div>
                    <div class="rec-time"><label class="btn btn-block busy-time disabled"><input type="radio">12:20</label></div>
                </div>
                <div class="time-table-row">
                    <div class="rec-time"><label class="btn btn-block free-time"><input type="radio">10:40</label></div>
                    <div class="rec-time"><label class="btn btn-block free-time"><input type="radio">11:40</label></div>
                    <div class="rec-time"><label class="btn btn-block free-time"><input type="radio">12:40</label></div>
                </div>
            </div><!--time-table-->
        </div> <!--time-container-->
    </div> <!--record-container-->
</div> <!--container-->

CSS:

.record-container {
  width: 100%;
  height: 440px;
 }
.time-container {
  margin-left: 240px;
  height: 240px;
}
.time-table {
  display: table;
  width: 100%;
  height: 100%;
}
.time-table-row {
  display: table-row;
}
.rec-time {
  display: table-cell;
  width: 11%;
  vertical-align: bottom;
  padding: 5px 5px;
  font-family: 'Roboto', sans-serif;
  color: #fff;
}
.btn {
  font-size: 16px;
  font-weight: 180;
  width: 82px;
}
.free-time {
  background: #5ece52;
}
.busy-time {
  background: #de0000;
}

The first problem is the appearance of the buttons. The second is that buttons aren't in the group. I've found out that this is because of <div class="rec-time">. I've tried many layouts but I could not get to the table was same as it's now and with the group of radio buttons (that look like buttons).

How to fix it?

UPDATE: The second problem was really in the absence of the name and id attributes. As for the appearance of buttons, I've had to add an attribute style="display:none" to the element <input ...> to remove the icon of radio button. But I can't understand why the styles of parent elements (display: table-row; and display: table-cell;) affect so?

score 2 · Answer 1 · answered Mar 17 '16 at 06:51

2

As Gav commented above, radio buttons must have an ID, and name. You must set your Label up with the attibute 'for', which matches the ID of the radio button.

example:

<input type="radio" id="radio-1" name="radios" value="A" />
<label for="radio-1">A</label>

<input type="radio" id="radio-2" name="radios" value="B" />
<label for="radio-2">B</label>

Even though your input is nested inside the label, you will still need an ID for each. The name attribute can be common.

answered Mar 17 '16 at 06:51

Aaron Lavers

967
9
31

1

When the input is wrapped inside the label one don't need an ID or a FOR attribute, it can though, have some issues regarding browser support: http://stackoverflow.com/a/18432715/2827823 – Asons Mar 19 '16 at 11:21

score 0 · Accepted Answer · answered Mar 17 '16 at 06:42

one error here (unrelated to style but related to function of the inputs) is that the radio buttons do not have a name attribute or a listed value. In order to register any activity they need to have these. For example:

<input type="radio" name="bookingTime" value="10:00"/>

otherwise they won't register any result whn your user submits the form and because they don't have a common name, the user currently can select any number of them. However the premise of the radio button is that only one at a time can be selected - which is achieved by having a single name all of the buttons and so selecting different one really changes the value associated with that input name.

Group of radio buttons inside table

2 Answers2