Skip to content Skip to sidebar Skip to footer

Data-iconpos="left" Turning Into Data-iconpos="right" When Page Renders

Here is my HTML:
  • Solution 1:

    I found the source of the problem.

    In jquery.mobile-1.3.2.js, line 6322, you will find the following chunk of code:

    if ( create || !item.hasClass( "ui-li" ) ) {
                itemTheme = item.jqmData( "theme" ) || o.theme;
                a = this._getChildrenByTagName( item[ 0 ], "a", "A" );
                var isDivider = ( item.jqmData( "role" ) === "list-divider" );
    
                if ( a.length && !isDivider ) {
                    icon = item.jqmData( "icon" );
    
                    item.buttonMarkup({
                        wrapperEls: "div",
                        shadow: false,
                        corners: false,
                        iconpos: "right",
                        icon: a.length > 1 || icon === false ? false : icon || listicon || o.icon,
                        theme: itemTheme
                    });
    

    You can see right there on line 6334 that the iconpos gets hardcoded to "right". I have no idea why they are doing this. I can understand a default value, but there's no reason for a hardcoded value as I can see. Utilizing a simple variable that will attempt to pull the iconpos for the li provides a suitable fix.

    if ( create || !item.hasClass( "ui-li" ) ) {
                itemTheme = item.jqmData( "theme" ) || o.theme;
                a = this._getChildrenByTagName( item[ 0 ], "a", "A" );
                var isDivider = ( item.jqmData( "role" ) === "list-divider" );
                var ipos = item.jqmData("iconpos") || "right";
                if ( a.length && !isDivider ) {
                    icon = item.jqmData( "icon" );
    
                    item.buttonMarkup({
                        wrapperEls: "div",
                        shadow: false,
                        corners: false,
                        iconpos: ipos,
                        icon: a.length > 1 || icon === false ? false : icon || listicon || o.icon,
                        theme: itemTheme
                    });
    

    I've tested this with possible iconpos values and the complete lack of the attribute altogether and it behaves correctly in all situations thus far.

    Please let me know if anyone knows why that value would need to be hardcoded to "right" ... but I'm pretty confident this change is necessary to actually make data-iconpos behave properly.

Post a Comment for "Data-iconpos="left" Turning Into Data-iconpos="right" When Page Renders"