Keep radio buttons with their labels on line breaks

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Tagged: css

Author

Posts
May 14, 2016 at 3:53 am #190616
oldmankit
Buyer

Post count: 116
According to the accepted answer to this stack exchange question, the way to keep buttons with labels (not broken across lines) is to wrap each input/label pair in a span.

Currently this is not possible, AFAIK. Geodirectory gives us this:
```
<div class="required_field geodir_form_row clearfix gd-fieldset-details" id="geodir_availability_row">
	<label>Lorem ipsum dolor <span>*</span></label>
	<input type="radio" field_type="radio" class="gd-checkbox" value="1" checked="checked" id="geodir_availability" name="geodir_availability">Lorem ipsum dolor
	<input type="radio" field_type="radio" class="gd-checkbox" value="0" id="geodir_availability" name="geodir_availability">sit amet					
	<span class="geodir_message_error"></span>
</div>
```
The label just goes right after the input, and I can’t see any way to stop it breaking across lines.

Even if we can’t wrap the input/label pair in a span, it would be great if the label itself had its own span class and id.
May 14, 2016 at 11:55 am #190808

Guust
Moderator

Post count: 29970

Can you give the URL of the page with that code please. Thanks.

May 16, 2016 at 3:57 am #191904

oldmankit
Buyer

Post count: 116

Sure. It’s the add listing page on my site: It’s http://reikiconnect.org/add-listing/?listing_type=gd_place

The radio buttons in question are labelled “Currently Accepting New Clients / Not Currently Accepting New Clients”

May 16, 2016 at 5:15 pm #192325

Paolo
Site Admin

Post count: 31206

Hi,

we can’t see the add listing page without being logged in. Please provide admin credentials.

Thanks

May 19, 2016 at 10:55 am #194128

oldmankit
Buyer

Post count: 116

This reply has been marked as private.

May 19, 2016 at 5:50 pm #194382

Paolo
Site Admin

Post count: 31206

Hi,

I asked Stiofan to have a look. I don’t think it can be done without modifying the HTML of radio inputs.

We’ll let you know asap.

Thanks

May 20, 2016 at 11:29 am #194860

Stiofan O’Connor
Site Admin

Post count: 22956

I have added spans around them with class gd-radios, this will be in the next version, you will have to make them display block to have what you want.

Stiofan

May 21, 2016 at 2:55 am #195551

oldmankit
Buyer

Post count: 116

Thanks so much, Stiofan, that’s perfect!

July 4, 2016 at 8:41 am #220938
oldmankit
Buyer

Post count: 116
This is working perfectly now, thank you.
```
/* This keeps radio buttons with their labels*/
.gd-radios {
	display: block;
}

/* Space between button and label */
input.gd-checkbox {
	margin-right: 7px;
}
```
Author

Posts