Question

I’m trying to show some user info in a listview in jquery mobile. I’m also using .NET MVC 3

So in my view I have the following:

<ul class="ui-listview" data-role="listview">
 <li>
     <a href="@Url.Action("REMOVED FOR BREVITY")">
          <h3 class="ui-li-heading">@entry.DisplayName</h3>
          <p class="ui-li-desc">@entry.JobTitle</p>
          <p class="ui-li-desc">
             <a href="mailto:@entry.EmailAddress">@entry.EmailAddress</a>
          </p>
     </a>
 </li>
</ul>

All of the formatting is correct except for the mailto link.

It has the following problems

• Link is pushed all the way to the bottom-left corner of the listview item.
• It introduces a gap between the list view items that is not there when the link is removed.

I’ve looked at the results in firebug and I found that the resulting html sticks the inner tag outside of the parent.

So in other words the resulting HTML looks like this:

<a class="ui-link-inherit" href="REMOVED FOR BREVITY">
   <h3 class="ui-li-heading">Display Name</h3>
   <p class="ui-li-desc">JOB TITLE</p>
</a> 
<p class="ui-li-desc">
   <a class="ui-link" href="mailto:EMAILADDRESS">EMAIL ADDRESS</a>
</p>

When I expected it to look like this:

<a class="ui-link-inherit" href="REMOVED FOR BREVITY">
   <h3 class="ui-li-heading">Display Name</h3>
   <p class="ui-li-desc">JOB TITLE </p>
   <p class="ui-li-desc">
      <a class="ui-link" href="mailto:EMAILADDRESS">EMAIL ADDRESS</a>
   </p>
</a> 

Is this the browser’s doing, or something I can workaround in JQuery Mobile?

Answer 1

Notice I removed the jQuery Mobile classes since jQuery Mobile will add them when it initializes the widgets. It’s also important to give the email link a data-role="button" attribute so it gets rendered as a button widget. The basic fix is to add the secondary link to a fieldcontain widget so it doesn’t get rendered as a split-button link.

    <ul data-role="listview">
     <li>
         <a href="@Url.Action("REMOVED FOR BREVITY")">
              <h3>@entry.DisplayName</h3>
              <p>@entry.JobTitle
                  <div data-role="fieldcontain">
                      <a data-role="button" href="mailto:@entry.EmailAddress">@entry.EmailAddress</a>
                 </div>
             </p>
         </a>
     </li>
    </ul>

Here is a demo: http://jsfiddle.net/jasper/KUgwj/

That being said, usually when you have two actions associated with a list-item, you use a split-button-list: http://jquerymobile.com/demos/1.1.0-rc.1/docs/lists/lists-split.html

This is an example of using split-button-lists:

    <ul data-role="listview">
     <li>
         <a href="@Url.Action("REMOVED FOR BREVITY")">
              <h3>@entry.DisplayName</h3>
              <p>@entry.JobTitle</p>
         </a>
         <a data-icon="gear" href="mailto:@entry.EmailAddress">@entry.EmailAddress</a>
     </li>
    </ul>

Here is a demo: http://jsfiddle.net/jasper/KUgwj/2/