Skip to main content

Search and Top Navigation

#5758 closed feature (wontfix)

Opened June 23, 2010 12:13PM UTC

Closed October 27, 2015 02:19PM UTC

Button: Span for button text is applied even if present

Reported by: jzaefferer 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).

Attachments (0)
Change History (9)

Changed February 27, 2012 01:44PM UTC by jzaefferer comment:1


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

Changed June 26, 2012 01:22AM UTC by scottgonzalez comment:2

type: enhancementfeature

Changed October 03, 2012 04:42PM UTC by scottgonzalez comment:3

milestone: 1.next1.11.0

Changed October 15, 2012 05:13PM UTC by bchiasson comment:4

priority: majorminor
status: newopen
summary: Button: support pre-rendered markupButton: Span for button text is applied even if present

Changed December 27, 2013 08:51PM UTC by robotdan comment:5

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


Changed December 30, 2013 01:40AM UTC by robotdan comment:6

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?

Changed December 30, 2013 01:48AM UTC by scottgonzalez comment:7

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.

Changed April 01, 2014 06:45PM UTC by scottgonzalez comment:8

milestone: 1.11.0none

Changed October 27, 2015 02:19PM UTC by scottgonzalez comment:9

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.