Button: Span for button text is applied even if present

[Jörn Zaefferer]

From: ​http://forum.jquery.com/topic/ui-button-fouc-small-change-proposal:

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>" )


to:
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 (​http://github.com/jzaefferer/button-lite/) even more redudant (good thing).

[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.

[bchiasson]

jsfiddle: ​http://jsfiddle.net/bchiasson/ZL65T/1/

[robotdan]

Added a modified version of previously posted jsfiddle (​http://jsfiddle.net/bchiasson/ZL65T/1/) to make it simpler to visually identify the nested <span> tags.

jsfiddle: ​http://jsfiddle.net/robotdan/DKPYs/1/

[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?

[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.

[Scott González]

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.