Opened 8 years ago

Closed 2 years ago

#5758 closed feature (wontfix)

Button: Span for button text is applied even if present

Reported by: Jörn Zaefferer Owned by:
Priority: minor Milestone: 1.12.0
Component: ui.button Version: 1.8.2
Keywords: Cc:
Blocked by: Blocking:



Hi There
I'm using the excellent ui button widget to convert my buttons.

I have only only issue with the widget itself. Due to the nature of the system i'm working with, it's not possible for me to create/instantiate the buttons immediately after they have loaded in the document, so there is quite an obvious FOUC.

To get around this, I apply the relevant UI styles to the relevant elements. This works nicely for some of the UI widgets (eg tabs), but does not work for buttons.

If I have the following base markup for a button, with all the relevant styles in place:
Copy code

   1. <button id="page-save" class="sledge-button ui-button-text-icon ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
   2.         <span class="ui-button-text">
   3.                 <span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>
   4.                 Save   
   5.         </span>
   6. </button>

When I then instantiate a button widget on this element, the "ui-button-text" span is repeated.

Here follows my small fix for this:

jquery ui 1.8.1 : jquery.ui.button.js : line 282

change the following:

Copy code

   1. buttonText = $( "<span></span>" )

Copy code

   1. buttonText = this.element.find('.ui-button-text').length ? this.element.find('.ui-button-text').text() : $( "<span></span>" )

I'm currently using this small fix, but I really do not want to adjust any of the base ui widgets. It would be uber rad if this was included in the button widget. What do you think?

The proposed enhancement could make the button-lite widget ( even more redudant (good thing).

Change History (9)

comment:1 Changed 6 years ago by Jörn Zaefferer


Not sure if we really want to support this - should take it into account for the redesign, or just close as wontfix.

comment:2 Changed 6 years ago by Scott González

Type: enhancementfeature

comment:3 Changed 5 years ago by Scott González

Milestone: 1.next1.11.0

comment:4 Changed 5 years ago by bchiasson

Priority: majorminor
Status: newopen
Summary: Button: support pre-rendered markupButton: Span for button text is applied even if present

comment:5 Changed 4 years ago by robotdan

Added a modified version of previously posted jsfiddle ( to make it simpler to visually identify the nested <span> tags.


comment:6 Changed 4 years ago by robotdan

Is this something that should be supported? If so, should only this very specific scenario be accounted for?

<span class="ui-button-text">

Or perhaps something more generic

I have a possible solution I could submit a pull request for, however it feels strange to account for this - especially since this markup is an internal detail to the implementation of the button plugin.

Any thoughts from the jQuery UI team?

comment:7 Changed 4 years ago by Scott González

We're reimplementing the button widget from scratch and this should be handled in the rewrite. It's unlikely that the current implementation will change.

comment:8 Changed 4 years ago by Scott González

Milestone: 1.11.0none

comment:9 Changed 2 years ago by Scott González

Milestone: none1.12.0
Resolution: wontfix
Status: openclosed

The rewrite doesn't use a text span, so this is no longer a problem. As such, I'm going to close this as won't fix since we're not changing the old version to support this.

Note: See TracTickets for help on using tickets.