Smarty Forum Index Smarty
WARNING: All discussion is moving to https://reddit.com/r/smarty, please go there! This forum will be closing soon.

html_options to add styles to each option

 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    Smarty Forum Index -> Feature Requests
View previous topic :: View next topic  
Author Message
ceco
Smarty n00b


Joined: 07 Aug 2008
Posts: 2

PostPosted: Thu Aug 07, 2008 10:03 am    Post subject: html_options to add styles to each option Reply with quote

Hello.

I wanted to ask if this function {html_options} can be changed in order to allow this result:

<label for="some_countries">Straight Forward</label>
<select name="some_countries" id="some_countries" class="icon-menu">
<option style="padding-left:0px;" value="">Select a Country</option>
<option style="background-image:url(flags/usa.png);" value="US">USA</option>
<option style="background-image:url(flags/india.png)" value="IN">India</option>
<option style="background-image:url(flags/england.png);" value="UK">England</option>
<option style="background-image:url(flags/france.png);" value="FR">France</option>
<option style="background-image:url(flags/germany.png);" value="GE">Germany</option>
<option style="background-image:url(flags/canada.png);" value="CA">Canada</option>
<option style="background-image:url(flags/russia.png);" value="RU">Russia</option>
</select>

I know that this can be done using CSS:

select.icon-menu option {
background-repeat:no-repeat;
background-position:bottom left;
padding-left:30px;
}
select#countries option[value="US"] {
background-image:url(flags/usa.png);
}
select#countries option[value="IN"] {
background-image:url(flags/india.png);
}
select#countries option[value="UK"] {
background-image:url(flags/england.png);
}
select#countries option[value="FR"] {
background-image:url(flags/france.png);
}
select#countries option[value="GE"] {
background-image:url(flags/germany.png);
}
select#countries option[value="CA"] {
background-image:url(flags/canada.png);
}
select#countries option[value="RU"] {
background-image:url(flags/russia.png);
}

But still is it possible for you to add a new array parameter that will generate styles for
each option tag (not only for the select tag)?
This will be more flexible if the result comes from a database for i.e.
Back to top
View user's profile Send private message
mohrt
Administrator


Joined: 16 Apr 2003
Posts: 7368
Location: Lincoln Nebraska, USA

PostPosted: Thu Aug 07, 2008 2:59 pm    Post subject: Reply with quote

Not sure how that would work...

{html_options ... opt_params=$foo}

where $foo can be array('style' => array('style1','style2','style3'));

What if you want the values to cycle? What if you want them all the same?

It might be easier to just construct the options with a {foreach} loop.
Back to top
View user's profile Send private message Visit poster's website
ceco
Smarty n00b


Joined: 07 Aug 2008
Posts: 2

PostPosted: Thu Aug 07, 2008 4:27 pm    Post subject: Reply with quote

This is what i did.
I just wanted to ask if there is a way to implement that.
I was thinking of something like a parameter that contains code to be executed for each option.
Back to top
View user's profile Send private message
ayshrimali
Smarty n00b


Joined: 21 Dec 2010
Posts: 1

PostPosted: Tue Dec 21, 2010 6:06 am    Post subject: Html_Options Reply with quote

Rather you can also put like following.

{html_options name=country options=$country_combo_data selected="-" class='drop-box'}
Back to top
View user's profile Send private message Send e-mail
mohrt
Administrator


Joined: 16 Apr 2003
Posts: 7368
Location: Lincoln Nebraska, USA

PostPosted: Tue Dec 21, 2010 4:01 pm    Post subject: Reply with quote

SVN has been updated to support "class" and "id" attributes.

Code:
{html_options ... class="foo" id="bar"}


Will output something like:

Code:
<select ... class="foo" id="bar">
<option ... class="foo option" id="bar-0">
<option ... class="foo option" id="bar-1">
<option ... class="foo option" id="bar-2">
...
</select>


nested opt-groups will get nested ids as well: bar-0-0, bar-0-1, etc.

From there you can apply stylesheets to all options or any one option.
Back to top
View user's profile Send private message Visit poster's website
mcgrailm
Smarty n00b


Joined: 03 Nov 2009
Posts: 1

PostPosted: Fri Apr 01, 2011 8:34 pm    Post subject: what if you just want the classs on select Reply with quote

then what do you do ?
Back to top
View user's profile Send private message
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    Smarty Forum Index -> Feature Requests All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group
Protected by Anti-Spam ACP