Search and Top Navigation
#10142 closed feature (fixed)
Opened July 08, 2014 03:40PM UTC
Closed November 04, 2014 01:03PM UTC
Selectmenu: Can't style selected item
| Reported by: | spjonez | Owned by: | fnagel |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.12.0 |
| Component: | ui.selectmenu | Version: | 1.11.0 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
Using _renderItem you can manipulate the markup for items in the flyout dropdown, but those styles do not apply to the selected item when the list is collapsed. If you want to change the color of each item using a CSS class you can add a wrapper in _renderItem. However once you select an item the class is lost and the default style is shown.
This issue was not present in the original selectmenu plugin.
Attachments (0)
Change History (11)
Changed July 08, 2014 05:02PM UTC by comment:1
| owner: | → spjonez |
|---|---|
| status: | new → pending |
Changed July 08, 2014 05:36PM UTC by comment:2
| _comment0: | Yes exactly. In the original plugin the modified markup of list items applied to the selected item as well. So in your example, after init 'red' should be red, and as you change items the colour should carry through. It seems custom markup is stripped or not used for the default/selected option. → 1404841103390922 |
|---|---|
| status: | pending → new |
Yes exactly. In the original plugin the modified markup of list items applied to the selected item as well. So in your example, after init 'red' should be red, and as you change items the colour should carry through. It seems custom markup is stripped or not used for the default/selected option. Ideally the same custom markup would be used in both places.
Changed July 08, 2014 05:49PM UTC by comment:3
| status: | new → open |
|---|---|
| type: | bug → feature |
I could see the items being rendered very differently in the dropdown and the button form, so we'll need to have a separate method for that rendering, but it should certainly be easy to use the same rendering for both.
Changed July 08, 2014 09:46PM UTC by comment:4
The button (the selected item) is just a generated span, not a list item.
I think what you want to achieve can be easily done by using callback events, see: http://jsfiddle.net/B9SCN/3/
Providing a private method which could be overridden should be no problem but using the same mechanism for list items and the form button seems not that useful to me.
Changed July 09, 2014 03:59PM UTC by comment:5
Replying to [comment:4 fnagel]:
The button (the selected item) is just a generated span, not a list item. I think what you want to achieve can be easily done by using callback events, see: http://jsfiddle.net/B9SCN/3/ Providing a private method which could be overridden should be no problem but using the same mechanism for list items and the form button seems not that useful to me.
IMO the logic to render the item could be complex and something you wouldn't want to duplicate. I like a new extension method for this, maybe
_renderSelectedItem()?
Changed July 14, 2014 12:46PM UTC by comment:7
| summary: | Can't style selected item in selectmenu → Selectmenu: Can't style selected item |
|---|
This should cover the use case presented in #10189. If you customize the text shown in the "options", that text should be used in the button, or you should have a documented way to accomplish that. For example http://jsfiddle.net/tj_vantoll/9Njge/.
Changed July 31, 2014 09:34AM UTC by comment:8
| owner: | spjonez |
|---|---|
| status: | open → assigned |
I've discussed this with Scott and we agreed on implementing a _renderButton method. See https://github.com/jquery/jquery-ui/pull/1297
Changed July 31, 2014 12:07PM UTC by comment:9
| milestone: | none → 1.12.0 |
|---|
Changed July 31, 2014 12:08PM UTC by comment:10
| owner: | → fnagel |
|---|
Changed November 04, 2014 01:03PM UTC by comment:11
| resolution: | → fixed |
|---|---|
| status: | assigned → closed |
Selectmenu: Introduce _renderButtonItem() method
Fixes #10142
Closes gh-1299
Changeset: fb4124b7af4e87712eca9893f7aefb5fee7905de
Hi spjonez,
Thanks for taking the time to contribute to jQuery UI. Just so that I understand your use case, do you want the styles applied to the item in the dropdown to be reflected after that option is selected? For instance the colors to be preserved in this example: http://jsfiddle.net/tj_vantoll/B9SCN/?