You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by "D. R." <d....@googlemail.com.INVALID> on 2018/11/15 05:30:27 UTC
data-icon for option within t:select
Hi,
how can i get control of the option elements within a t:select?
I want to provide a unique data-icon property for each option.
<t:select t:id="iconCode"
t:model="literal:fa-globe=Globe,fa-flask=Flask,fa-user-tie=User-tie">
</t:select>
will render:
<select class="form-control" id="iconCode" name="iconCode">
<option value=""></option>
<option value="fa-globe">Globe</option>
<option value="fa-flask">Flask</option>
<option value="fa-user-tie">User-tie</option>
</select>
i need something like
<select class="selectpicker" id="iconCode">
<option data-icon="fa-globe">
Globe
</option>
<option data-icon="fa-flask">
Flask
</option>
<option data-icon="fa-user-tie">
User-tie
</option>
</select>
i want to add class="selectpicker" to the t:select in order to let
bootstrap convert the select to a dropdown with icons.
Kind regards
David
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: data-icon for option within t:select
Posted by "Thiago H. de Paula Figueiredo" <th...@gmail.com>.
Hello, everyone!
Great tip by Jens about OptionModel attributes!
If you didn't need to have data-attributes, you could style the select
options using CSS attribute selectors:
option[value="fa-globe"]::before {
content: url(url/to/fa-globe/image.png)
...
}
On Thu, Nov 15, 2018 at 9:37 AM Jens Breitenstein <ma...@j-b-s.de>
wrote:
> Hi David/Ben
>
> The SelectModelRender makes use of attributes by
>
> ...
> writeAttributes(optionModel.getAttributes());
> ...
>
> And this method is implemented first in "AbstractOptionModel" and
> returns "null".
> So as Ben stated just adding the entry
>
> "data-icon" -> "glyphicon glyphicon-eye-open"
>
> to a map should in your OptionModel should do the trick.
>
> Jens
>
>
> Am 15.11.18 um 09:24 schrieb Ben Weidig:
> > Hi,
> >
> > as far as I can tell from the code and documentaion the class OptionModel
> > supports additional attributes with its .getAttributes() method. So you
> > should only need to implement your own OptionModel and build your
> > SelectModel with it.
> >
> > Hope this helps.
> >
> > Ben
> >
> > On Thu, Nov 15, 2018 at 7:23 JumpStart <
> geoff.callender.jumpstart@gmail.com>
> > wrote:
> >
> >> Very good question. I don’t know the answer, but here’s an idea…
> >>
> >> The Select component does not have a class parameter, but it does render
> >> informal parameters. So if you specify class=“selectpicker” then I’d
> expect
> >> it will be rendered with class=“selectpicker”. By default it renders the
> >> "select" element with class=“form-control”, so it might be best if you
> >> specify class=“form-control selectpicker”.
> >>
> >> As for overriding the rendering of the “option” element, I think we come
> >> unstuck. The difficulty I see is that OptionModel has only a label and
> >> value. You need label, image, and value.
> >>
> >> I think your best bet is to copy OptionModel and Select to new classes
> and
> >> and modify them suit your purposes. They aren’t long or complicated.
> >>
> >> HTH,
> >>
> >> Geoff
> >>
> >>> On 15 Nov 2018, at 1:30 pm, D. R. <d....@googlemail.com.INVALID>
> >> wrote:
> >>> Hi,
> >>>
> >>> how can i get control of the option elements within a t:select?
> >>>
> >>> I want to provide a unique data-icon property for each option.
> >>>
> >>> <t:select t:id="iconCode"
> >> t:model="literal:fa-globe=Globe,fa-flask=Flask,fa-user-tie=User-tie">
> >>> </t:select>
> >>>
> >>> will render:
> >>>
> >>> <select class="form-control" id="iconCode" name="iconCode">
> >>> <option value=""></option>
> >>> <option value="fa-globe">Globe</option>
> >>> <option value="fa-flask">Flask</option>
> >>> <option value="fa-user-tie">User-tie</option>
> >>> </select>
> >>>
> >>> i need something like
> >>>
> >>> <select class="selectpicker" id="iconCode">
> >>> <option data-icon="fa-globe">
> >>> Globe
> >>> </option>
> >>> <option data-icon="fa-flask">
> >>> Flask
> >>> </option>
> >>> <option data-icon="fa-user-tie">
> >>> User-tie
> >>> </option>
> >>> </select>
> >>>
> >>> i want to add class="selectpicker" to the t:select in order to let
> >> bootstrap convert the select to a dropdown with icons.
> >>> Kind regards
> >>> David
> >>>
> >>>
> >>> ---------------------------------------------------------------------
> >>> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> >>> For additional commands, e-mail: users-help@tapestry.apache.org
> >>>
> >>
> >> ---------------------------------------------------------------------
> >> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> >> For additional commands, e-mail: users-help@tapestry.apache.org
> >>
> >>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
--
Thiago
Re: data-icon for option within t:select
Posted by Jens Breitenstein <ma...@j-b-s.de>.
Hi David/Ben
The SelectModelRender makes use of attributes by
...
writeAttributes(optionModel.getAttributes());
...
And this method is implemented first in "AbstractOptionModel" and
returns "null".
So as Ben stated just adding the entry
"data-icon" -> "glyphicon glyphicon-eye-open"
to a map should in your OptionModel should do the trick.
Jens
Am 15.11.18 um 09:24 schrieb Ben Weidig:
> Hi,
>
> as far as I can tell from the code and documentaion the class OptionModel
> supports additional attributes with its .getAttributes() method. So you
> should only need to implement your own OptionModel and build your
> SelectModel with it.
>
> Hope this helps.
>
> Ben
>
> On Thu, Nov 15, 2018 at 7:23 JumpStart <ge...@gmail.com>
> wrote:
>
>> Very good question. I don’t know the answer, but here’s an idea…
>>
>> The Select component does not have a class parameter, but it does render
>> informal parameters. So if you specify class=“selectpicker” then I’d expect
>> it will be rendered with class=“selectpicker”. By default it renders the
>> "select" element with class=“form-control”, so it might be best if you
>> specify class=“form-control selectpicker”.
>>
>> As for overriding the rendering of the “option” element, I think we come
>> unstuck. The difficulty I see is that OptionModel has only a label and
>> value. You need label, image, and value.
>>
>> I think your best bet is to copy OptionModel and Select to new classes and
>> and modify them suit your purposes. They aren’t long or complicated.
>>
>> HTH,
>>
>> Geoff
>>
>>> On 15 Nov 2018, at 1:30 pm, D. R. <d....@googlemail.com.INVALID>
>> wrote:
>>> Hi,
>>>
>>> how can i get control of the option elements within a t:select?
>>>
>>> I want to provide a unique data-icon property for each option.
>>>
>>> <t:select t:id="iconCode"
>> t:model="literal:fa-globe=Globe,fa-flask=Flask,fa-user-tie=User-tie">
>>> </t:select>
>>>
>>> will render:
>>>
>>> <select class="form-control" id="iconCode" name="iconCode">
>>> <option value=""></option>
>>> <option value="fa-globe">Globe</option>
>>> <option value="fa-flask">Flask</option>
>>> <option value="fa-user-tie">User-tie</option>
>>> </select>
>>>
>>> i need something like
>>>
>>> <select class="selectpicker" id="iconCode">
>>> <option data-icon="fa-globe">
>>> Globe
>>> </option>
>>> <option data-icon="fa-flask">
>>> Flask
>>> </option>
>>> <option data-icon="fa-user-tie">
>>> User-tie
>>> </option>
>>> </select>
>>>
>>> i want to add class="selectpicker" to the t:select in order to let
>> bootstrap convert the select to a dropdown with icons.
>>> Kind regards
>>> David
>>>
>>>
>>> ---------------------------------------------------------------------
>>> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
>>> For additional commands, e-mail: users-help@tapestry.apache.org
>>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
>> For additional commands, e-mail: users-help@tapestry.apache.org
>>
>>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: data-icon for option within t:select
Posted by Ben Weidig <be...@netzgut.net>.
Hi,
as far as I can tell from the code and documentaion the class OptionModel
supports additional attributes with its .getAttributes() method. So you
should only need to implement your own OptionModel and build your
SelectModel with it.
Hope this helps.
Ben
On Thu, Nov 15, 2018 at 7:23 JumpStart <ge...@gmail.com>
wrote:
> Very good question. I don’t know the answer, but here’s an idea…
>
> The Select component does not have a class parameter, but it does render
> informal parameters. So if you specify class=“selectpicker” then I’d expect
> it will be rendered with class=“selectpicker”. By default it renders the
> "select" element with class=“form-control”, so it might be best if you
> specify class=“form-control selectpicker”.
>
> As for overriding the rendering of the “option” element, I think we come
> unstuck. The difficulty I see is that OptionModel has only a label and
> value. You need label, image, and value.
>
> I think your best bet is to copy OptionModel and Select to new classes and
> and modify them suit your purposes. They aren’t long or complicated.
>
> HTH,
>
> Geoff
>
> > On 15 Nov 2018, at 1:30 pm, D. R. <d....@googlemail.com.INVALID>
> wrote:
> >
> > Hi,
> >
> > how can i get control of the option elements within a t:select?
> >
> > I want to provide a unique data-icon property for each option.
> >
> > <t:select t:id="iconCode"
> t:model="literal:fa-globe=Globe,fa-flask=Flask,fa-user-tie=User-tie">
> > </t:select>
> >
> > will render:
> >
> > <select class="form-control" id="iconCode" name="iconCode">
> > <option value=""></option>
> > <option value="fa-globe">Globe</option>
> > <option value="fa-flask">Flask</option>
> > <option value="fa-user-tie">User-tie</option>
> > </select>
> >
> > i need something like
> >
> > <select class="selectpicker" id="iconCode">
> > <option data-icon="fa-globe">
> > Globe
> > </option>
> > <option data-icon="fa-flask">
> > Flask
> > </option>
> > <option data-icon="fa-user-tie">
> > User-tie
> > </option>
> > </select>
> >
> > i want to add class="selectpicker" to the t:select in order to let
> bootstrap convert the select to a dropdown with icons.
> >
> > Kind regards
> > David
> >
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> > For additional commands, e-mail: users-help@tapestry.apache.org
> >
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
Re: data-icon for option within t:select
Posted by JumpStart <ge...@gmail.com>.
Very good question. I don’t know the answer, but here’s an idea…
The Select component does not have a class parameter, but it does render informal parameters. So if you specify class=“selectpicker” then I’d expect it will be rendered with class=“selectpicker”. By default it renders the "select" element with class=“form-control”, so it might be best if you specify class=“form-control selectpicker”.
As for overriding the rendering of the “option” element, I think we come unstuck. The difficulty I see is that OptionModel has only a label and value. You need label, image, and value.
I think your best bet is to copy OptionModel and Select to new classes and and modify them suit your purposes. They aren’t long or complicated.
HTH,
Geoff
> On 15 Nov 2018, at 1:30 pm, D. R. <d....@googlemail.com.INVALID> wrote:
>
> Hi,
>
> how can i get control of the option elements within a t:select?
>
> I want to provide a unique data-icon property for each option.
>
> <t:select t:id="iconCode" t:model="literal:fa-globe=Globe,fa-flask=Flask,fa-user-tie=User-tie">
> </t:select>
>
> will render:
>
> <select class="form-control" id="iconCode" name="iconCode">
> <option value=""></option>
> <option value="fa-globe">Globe</option>
> <option value="fa-flask">Flask</option>
> <option value="fa-user-tie">User-tie</option>
> </select>
>
> i need something like
>
> <select class="selectpicker" id="iconCode">
> <option data-icon="fa-globe">
> Globe
> </option>
> <option data-icon="fa-flask">
> Flask
> </option>
> <option data-icon="fa-user-tie">
> User-tie
> </option>
> </select>
>
> i want to add class="selectpicker" to the t:select in order to let bootstrap convert the select to a dropdown with icons.
>
> Kind regards
> David
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org