Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Removing item from inset list doesn't redo corners #1654

Closed
siromega opened this issue May 18, 2011 · 1 comment
Closed

Removing item from inset list doesn't redo corners #1654

siromega opened this issue May 18, 2011 · 1 comment

Comments

@siromega
Copy link

If you remove the first or last item from an already displayed inset list and run the refresh() function, the corners on the list don't get applied to the new first or last element. My workaround is below...

  // If we're creating the element, we update it regardless
  if ( !create && item.hasClass( "ui-li" ) ) {
    //continue; // REMOVE

  } else { // ADDED this else statement

    var itemTheme = item.jqmData("theme") || o.theme;

    var a = item.children( "a" );

    if ( a.length ) {  
      var icon = item.jqmData("icon");

      item
        .buttonMarkup({
          wrapperEls: "div",
          shadow: false,
          corners: false,
          iconpos: "right",
          icon: a.length > 1 || icon === false ? false : icon || "arrow-r",
          theme: itemTheme
        });

      a.first().addClass( "ui-link-inherit" );

      if ( a.length > 1 ) {
        itemClass += " ui-li-has-alt";

        var last = a.last(),
          splittheme = listsplittheme || last.jqmData( "theme" ) || o.splitTheme;

        last
          .appendTo(item)
          .attr( "title", last.text() )
          .addClass( "ui-li-link-alt" )
          .empty()
          .buttonMarkup({
            shadow: false,
            corners: false,
            theme: itemTheme,
            icon: false,
            iconpos: false
          })
          .find( ".ui-btn-inner" )
            .append( $( "<span>" ).buttonMarkup({
              shadow: true,
              corners: true,
              theme: splittheme,
              iconpos: "notext",
              icon: listspliticon || last.jqmData( "icon" ) ||  o.splitIcon
            } ) );
      }

    } else if ( item.jqmData( "role" ) === "list-divider" ) {
      itemClass += " ui-li-divider ui-btn ui-bar-" + dividertheme;
      item.attr( "role", "heading" );

      //reset counter when a divider heading is encountered
      if ( counter ) {
        counter = 1;
      }

    } else {
      itemClass += " ui-li-static ui-body-" + itemTheme;
    }
  } 

This way, the following if/then/else section to redo the corners will execute for each element.

@toddparker
Copy link
Contributor

Thanks for the code suggestion, we're looking at all these little list style issues now so this is good timing.

gseguin added a commit to gseguin/jquery-mobile that referenced this issue May 19, 2011
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants