ons list item switch right won't align

[aldirk]

Hi, my ons list with a right ons switch show messy when the text have 2 lines. Any solution?

[munsterlander]

@aldirk Are you using ons-col and ons-row? If not, that will probably solve your issue.

[IliaSky]

@aldirk You are using the center and right classes for your text and switch right? Would you mind sharing which Onsen UI version you are using as well as the html for your ons-list?

Testing an item with 2 lines works fine under normal conditions with RC.15. Demo

[aldirk]

@munsterlander I’m using <ons-list-item> with a div class right for switch add dynamically. Here my code:

var html = "<ons-list><ons-list-header>Lista de Câmeras</ons-list-header>";
$.each(camList, function (index, item) {
    var checked = "";
    if(item.visible == 1)
        checked = 'checked';           
    html += "<ons-list-item modifier='longdivider'><div class='left'>" + item.nome.substr(7, item.nome.lenght) + "</div><div class='right'><ons-switch onclick='checkChange(this.id)' id='" + item.camera + "' " + checked + "></ons-switch></div></ons-list-item>";
});
html += "</ons-list>";
$("#divListaCameras").html(html);

[munsterlander]

@aldirk Definitely use what @IliaSky stated and demo’d. @IliaSky works for Onsen vs. I just use Onsen.

[IliaSky]

@aldirk Hmm… I don’t see a problem in the code you provided.

Here’s a working demo with your exact code. The demo is using RC.15 and seems to be fine. So you should try to update your version of Onsen and see if it works.

It would be nice if you could inspect the dom and see why it’s happening since we seem to be unable to reproduce the issue on our side.

Other things you could try are

1. adding an empty <div class="center"></div> in the middle
2. adding .right { text-align: right; }

Basically there seems to be some small issue somewhere. Since we cannot reproduce it that means it could be an issue in either the Onsen version or Android version (there is a known issue similar to yours in Android 4.1.x).

If you don’t want to deal with the issue, but instead just want it to work fast - munsterlander’s solution will probably be the fastest thing after updating.

@munsterlander - you’re an Onsen-Samurai (侍) - if you ask me that sounds cooler than member :D

[munsterlander]

@IliaSky Awesome!