CODEWITHSUNDEEP
jquerycssjquery-mobile
Malaiselvan
Malaiselvan

Reputation: 1125

Jquery Mobile List item alignment

I am designing a list view using jquery mobile like below

Jquery Mobile Page

I am trying to align the label and value as 30% an 70% respectively.

List view coding as below

<ul data-role="listview">
  <li data-role="list-divider">Account Information</li>
  <li>
    <span class="field_label">Label:</span>
    <span class="field_value">value</span>
  </li>
  <li>
    <span class="field_label">Long Label:</span>
    <span class="field_value">value</span>
  </li>
</ul>

CSS styles used

.field_label{
  width:30%;
}
.field_value{
  width:70%;
}

Still the label and value are not aligned. What is the problem? How do I align?

Upvotes: 0

Views: 120

Answers (2)

Omar
Omar

Reputation: 31732

You can achieve this using either solution:

  1. Using jQuery Mobile Grids and modifying ui-block-a and ui-block-b width followed by !important to force override.

    <li class="ui-grid-a">
  <span class="ui-block-a">Label:</span>
  <span class="ui-block-b">Value</span>
</li>

    CSS

    li > .ui-block-a {
  width: 15% !important;
}
li > .ui-block-b {
  width: 80% !important;
}

    Demo

  2. Loop through labels and check widest one, then modify width of all label according to the widest one.

    var width = 0;
var length = $(".field_label").length - 1;
var labels = $(".field_label");
var count = 0;
$.each(labels, function () {
    var init_width = parseInt($(this).outerWidth());
    if (init_width > width) {
        width = init_width;
    }
    if (count >= length) {
        $(".field_label").each(function () {
            $(this).width(width + "px");
        });
    }
    count++
});

    CSS

    .field_label {
  display: inline-block;
}

    Demo

Upvotes: 0

LoSko
LoSko

Reputation: 71

is an inline element and will not conform to the width you provided unless you specify display: inline-block

Upvotes: 1

Related Questions