CODEWITHSUNDEEP
cssjquery-mobile
JavaScript Developer
JavaScript Developer

Reputation: 4008

JQuery Mobile - Layout is not aligned properly

I am working on a presentation for a local software dev user group. I'm trying to build a JQuery Mobile app that will allow us to vote on different food options for the next meeting. The options are going to be dynamically loaded. Because of that, I MUST dynamically build the list. I have the actual voting functionality working. My problem is, I can't get the layout to look right. Right now, but buttons looks like this

As you can see, nothing is aligned properly. I have tried a variety of css changes without any luck. I feel like there is something that I'm not aware of. I would think this would be fairly straight forward. But thus far, I've been wrong. Here is my relevant JavaScript:

$("#votesList").empty();
$.each(votesCollection, function (i, item) {
  var s = "<li><div class='ui-grid-a'><div class='ui-block-a'>";
  s += "<label><strong>" + item.data.name + "</strong></label><br />";
  s += "<span style='font-weight:normal;'>" + item.data.description + "</span>";
  s += "</div>";

  var v = getTotalVotes(i);
  s += "<div class='ui-block-b ui-grid-b'>";
  s += "<div class='ui-block-a'><input id='decButton" + i + "' type='button' value=' - '  data-mini='true' onclick='decrementVotes(" + i + ", \"" + item.data.name + "\");' /></div>";
  s += "<div class='ui-block-b'>&nbsp;<input id='voteText" + i + "' type='text'  data-mini='true' value='" + v + "' style='text-align:center;' />&nbsp;</div>";
  s += "<div class='ui-block-c'><input id='incButton" + i + "' type='button'  data-mini='true' value=' + ' onclick='incrementVotes(" + i + ", \"" + ps.data.name + "\");' /></div>";
  s += "</div></div></li>";

  $("#votesList").append(s);
});
$("#votesList").listview("refresh");

for (var x = 0; x < votesCollection.length; x++) {
  $("#decButton" + x).button();
  $("#voteText" + x).textinput();
  $("#incButton" + x).button();
}

Can someone please help me out?

Upvotes: 0

Views: 529

Answers (1)

mkk
mkk

Reputation: 7693

Since comment turned out to be the answer I will make it an answer:

try removing &nbsp;

Upvotes: 2

Related Questions