Page 1 of 1
CSS - styling {html_radios} output
Posted: Tue Jan 10, 2017 12:47 pm
by Edwin_IandD
Hello all,
I am running into a bit of a problem styling the radio buttons that are generated by the {html_radios} smarty tag..
The internet is full of ways to style radio buttons (or more precise a <label> or <span> after the button), but as this tag generates the buttons inside their span I cannot seem to get that to work.
This is an example output from the tag:
Code: Select all
<label for="id_1000"><input type="radio" name="id" value="1000" id="id_1000" />Joe Schmoe</label>
<label for="id_1001"><input type="radio" name="id" value="1001" id="id_1001" checked="checked" />Jack Smith</label>
<label for="id_1002"><input type="radio" name="id" value="1002" id="id_1002" />Jane Johnson</label>
<label for="id_1003"><input type="radio" name="id" value="1003" id="id_1003" />Charlie Brown</label>
This all works lovely, but the only way I can find to actually style the button is by hiding the actual button and styling a <label> after the button (good example here:
http://www.hongkiat.com/blog/css3-checkbox-radio ).
So basically what I need is either an output like this:
Code: Select all
<input type="radio" name="id" value="1003" id="id_1003" /><label for="id_1003">Charlie Brown</label>
or a different way of styling the buttons.
Any ideas?
Thanks a lot,
Edwin
Re: CSS - styling {html_radios} output
Posted: Tue Jan 10, 2017 2:16 pm
by calguy1000
Or.... don't use {html_radios} just build your own html output from the array.
Re: CSS - styling {html_radios} output
Posted: Tue Jan 10, 2017 4:40 pm
by Edwin_IandD
Any tips on how to do this?
Re: CSS - styling {html_radios} output
Posted: Tue Jan 10, 2017 4:54 pm
by calguy1000
I'd just create a smarty function to do it using a simple foreach loop. It's actually very trivial to do.
{* untested *}
{function my_radios}
{foreach $options as $key => $lbl}
<label class="radio_label"><input type="radio" class="radio" name="{$name}" value="{$key}" {if !empty($selected) && $selected==$key}checked{/if}/> {$lbl}</label>
{/foreach}
{/function}
{* usage *}
{my_radios options=$the_list name='something' selected=$current_key}
Re: CSS - styling {html_radios} output
Posted: Wed Jan 11, 2017 9:47 am
by Edwin_IandD
Thanks a lot!
I was trying something similar with PHP, buy couldn't get it to work.
Never knew you could do this with Smarty tags..
I'll give this a try. Thanks again.
Re: CSS - styling {html_radios} output
Posted: Wed Jan 11, 2017 11:05 am
by Edwin_IandD
And after messing around with that for an hour I still cannot get it to work...
First I tried pasting the code in a user defined tag called 'my_radios'
But all I got was "Invalid code entered.,"
So I figured that you're probably not allowed to use smarty inside a user defined tag and went back to my original plan of writing this in php.. I am not a great code writer (the main reason of using a ready made CMS (that's supposed to be Made Simple)), but this is what I came up with:
Code: Select all
foreach ($options as $key => $lbl) {
echo '<input type="radio" class="radio" name=".$name." value=".$key."';
if (!empty($selected) && $selected==$key) {
echo 'checked';
};
echo ' />';
echo "<label for=".$name.">.$lbl;.</label>";
};
No errors, no Invalid Code but also absolutely no output...
What am I doing wrong here??
(I did get my output the way I wanted by editing function.html_radios.php but I am a bit worried that this file might get restored with a next update - also I don't think this is the 'proper' way of doing it.. so I don't really want to do that.)
Re: CSS - styling {html_radios} output
Posted: Thu Jan 12, 2017 2:48 pm
by Edwin_IandD
Lesson learned today: do not assume that you know how to do things without looking them up...
Yes indeed, because I assumed I knew how to use smarty functions I spend (as in wasted) an hour of my precious time messing around with this issue..
Has I only bothered to read one paragraph of text about smarty functions (as I just did..) this whole problem would have been solved in 5 minutes!
Thank you Calguy1000 for your solution - it works perfectly!!
And in a way I also need to thank you for not giving too much information. This way I had to challenge myself, mess around and finally learn how to use this by myself. This way I probably will remember this better then if you had simply told me how to use this piece of code!
Thanks again!