Custom layout help wanted for Radio buttons with display:block or white-space:nowrap

For the following code, I am trying to get the radio buttons and the ENTRY_GST_TEXT components to display as separate blocks or as separate no-wraps, so that when viewed on smaller screens, each will ultimately wrap to its own line. With what I have at the moment, initially ENTRY_GST_TEXT wraps first as a block, but then the smaller the screen size, the actual buttons and their descriptors get split up into separate lines. When this happens, the layout can become confusing for the user.

<label class="inputLabel" for="gst_registered">GST Registered:</label>
<?php echo zen_draw_radio_field('gst_registered', 'yes', ($gst_registered == 'yes' ? true : false),'id="gst_registered-yes"') . '<label class="radioButtonLabel" for="gst_registered-yes">' . Yes . '</label>' .  zen_draw_radio_field('gst_registered', 'no', ($gst_registered == 'no' ? true : false), 'id="gst_registered-no"') . '<label class="radioButtonLabel" for="gst_registered-no">' . No . '</label>' . '<span class="userNote">' . ENTRY_GST_TEXT . '</span>'; ?>

CSS

.userNote {white-space:nowrap;}

If someone knows how to do this, could you please post the required code.

Thanks in advance

What file and or page are you entering this?

A link takes guessing out of the mix

You would need a wrapper/container (div or whatever) for each element or set of elements you want to no-wrap. So each button and its label need one wrapper, which can then be styled with no-wrap.

Kobra

That particular code was for tpl_modules_create_account, but I intend to use the improved code wherever I have radio buttons in a form.

gjh42
I had tried wrapping both zen_draw_radio_fields and their labels in separate divs beforehand, but found same result. Maybe the trick is to wrap these two divs in a third div. Will have to play some more.

Cheers

Your code added to create account does not appear to wrap no matter the screen size

You can view this HERE

But in your example, no parts of the form wrap. We must have different template layouts.

This is not exactly what I wanted, which is that the ENTRY_GST_TEXT first wraps under the buttons as a block and then the buttons wrap under the GST Registered label as a block.

I have not tested the div thing yet, but believe the extra div will do it.

Thanks

But in your example, no parts of the form wrap.
Sorry, All I read was "no wrap"
Have a look now

I had tried wrapping both zen_draw_radio_fields and their labels in separate divs beforehand, but found same result. Maybe the trick is to wrap these two divs in a third div. Exactly what I was saying:)

After a lot of mucking around, the following works for me, although there may be some redundant bits:

<!-- gst added -->
<label class="inputLabel" for="gst_registered">GST Registered:</label>
<?php echo '<div class="gst_reg">' . zen_draw_radio_field('gst_registered', 'yes', ($gst_registered == 'yes' ? true : false),'id="gst_registered-yes"') . '<label class="radioButtonLabel" for="gst_registered-yes">' . Yes . '</label>' .  zen_draw_radio_field('gst_registered', 'no', ($gst_registered == 'no' ? true : false), 'id="gst_registered-no"') . '<label class="radioButtonLabel" for="gst_registered-no">' . No . '</label></div>' . '<div class="gstNote">' . ENTRY_GST_TEXT . '</div>'; ?>

css

label.inputLabel {	 /* input box labels */
	float:left;
	width:11em;
	margin:0.35em 0em 0.15em 0.25em;
	}

label.radioButtonLabel {
	margin:0.25em 0.25em 0.5em 0.25em;
	padding:0.25em 0.5em 0.25em 0.25em;
	}

.gst_reg {
	float:left; 
	width:10.85em; /* required for button float */
	}


.gstNote {
	float:left;
	color:#090;
	font-size:0.9em;
	padding-left:0.5em;
	padding-top:0.35em;
	white-space:nowrap;
	}