JQuery Mobile - Problems with aligning in listview using absolute and relative positioning..
Hi there.. and thanks for reading my post..
The problem is quite simple actually, and VERY easy to describe.. but.. i just dont get it right !
In the listview, i have one block which spans the whole listview item like this :
.jqm-listview-container { position: relative; }
and inside i have one block to the left :
.jqm-listview-box-left { margin-right: 105px; }
and one to the right :
.jqm-listview-box-right { position: absolute; right: 0;top:0; width: 70px; text-align: right; }
... which gives a very nice result (see screenshot_windows_firefox.jpg). The result is also nice on IPhone.
The problem is that when looking on android, it looks like (screen_android.jpg).
So... how can i make this more "browser-friendly" with CSS to have the same design no matter if it's windows what-ever browser, android or iphone ?
Android (chrome) problem seems to be that the left-block is waaaay to short, so it cuts the text and the right-block is far to close to middle.. it should be far-far left...
Here is the markup which generates the listview :
<ul data-role="listview">
<asp:ListView runat="server" ID="lvPlannedVisitsOnDay">
<ItemTemplate>
<li class="<%# getClass("lvitem") %>" data-keywords="<%# Eval("BesoekId") %>">
<div class="jqm-listview-container" style="height:105px;">
<div class="jqm-listview-box-left" style="margin-top:-15px;">
<a class="jq_butikkNavigate" rel="external" href="#">
<h2 class="jqm-listview-header-text">
<asp:Label runat="server" ID="lblStatus" Text='<%# getText("lvitem") %>'
CssClass='<%# getTextClass("lvitem") %>' /></h2>
<p class="jqm-listview-header-text">
<asp:Label ID="Label1" runat="server" Visible='<%# Eval("Bomtur") %>'>
<img src="<%= Assets.Image.GetUrl("bomtur_badge.png") %>" alt="Bomtur" />
</asp:Label>
</p>
<p class="jqm-listview-normal-text"><%# Eval("ButikkNavn") %></p>
<p class="jqm-listview-normal-text"><%# Eval("BesokPostNr")%> <%#
Eval("BesokPostSted")%></p>
<p class="jqm-listview-italic-text" style="padding-top:3px"><%#
Eval("BesoeksTypeNavn")%></p>
<p class="jqm-listview-italic-text"><%# Eval("BesoeksNotat")%></p>
<p class="jqm-listview-normal-text" style="padding-top:3px"><%#
Eval("KontaktNavn")%> <%# Eval("KontaktMobil") %></p>
<asp:Panel runat="server" ID="pnlBesoekskode" Visible='<%# Eval("Kode") != null %>'>
<span class="ui-li-count" style="margin-right:-15px;">
<%# getBesoeksKode(Eval("Statistikknr"))%>
</span>
</asp:Panel>
</a>
</div>
<div class="jqm-listview-box-right" style="margin-top:32px; margin-right: -40px;">
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
<a class="jq_editvisit" data-role="button" rel="external" data-transition="slide">
<img src="<%= Assets.Image.GetUrl("blabla_32x32_edit.png") %>"
style="margin-top: -15px; margin-left: -15px; margin-bottom: -15px;
margin-right: -15px; padding-bottom:4px; padding-left:1px;" />
</a>
<asp:Panel ID="Panel1" runat="server" data-role="button" Visible='<%#
IsDeleteVisible("lvitem") %>'>
<a data-transition="pop" data-rel="dialog" rel="external" class="delete-visit">
<img src="<%= Assets.Image.GetUrl("blabla_32x32_close.png") %>"
style="margin-top: -15px; margin-left: -15px; margin-bottom: -15px;
margin-right: -15px; padding-bottom:4px; padding-left:1px" />
</a>
</asp:Panel>
</div>
</div>
</div>
</li>
</ItemTemplate>
</asp:ListView>
</ul>
Here is the HTML output in firefox :
<ul class="nolefuquewiththepreviouselement clickables listStopPropagation ui-listview" data-role="listview">
<li class="ui-li ui-li-static ui-btn-up-c ui-li-has-count" data-keywords="46595">
<div class="jqm-listview-container" style="height:105px
div class="jqm-listview-box-left" style="margin-top:-15px;">
<a class="jq_butikkNavigate ui-link" href="#" rel="external">
<h2 class="jqm-listview-header-text ui-li-heading">
<span id="MainContent_lvPlannedVisitsOnDay_lblStatus_0">
</span>
</h2>
<p class="jqm-listview-header-text ui-li-desc"></p>
<p class="jqm-listview-normal-text ui-li-desc"></p>
<p class="jqm-listview-normal-text ui-li-desc"></p>
<p class="jqm-listview-italic-text ui-li-desc" style="padding-top:3px"></p>
<p class="jqm-listview-italic-text ui-li-desc"></p>
<p class="jqm-listview-normal-text ui-li-desc" style="padding-top:3px"></p>
<div id="MainContent_lvPlannedVisitsOnDay_pnlBesoekskode_0">
<span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="margin-right:-15px;">
1
</span>
</div>
</a>
</div>
<div class="jqm-listview-box-right" style="margin-top:32px; margin-right: -40px;">
<div class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal ui-mini" data-mini="true" data-type="horizontal" data-role="controlgroup">
<div class="ui-controlgroup-controls">
<a class="jq_editvisit ui-btn ui-btn-up-c ui-corner-left" data-transition="slide" rel="external" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c">
<span class="ui-btn-inner ui-corner-left">
<span class="ui-btn-text">
<img style="margin-top: -15px; margin-left: -15px; margin-bottom: -15px; margin-right: -15px; padding-bottom:4px; padding-left:1px;" src="/blabla/Content/Images/bla-bla_32x32_edit.png">
</img>
</span>
</span>
</a>
<div id="MainContent_lvPlannedVisitsOnDay_Panel1_0" class="ui-btn ui-btn-up-c ui-corner-right ui-controlgroup-last" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c">
<span class="ui-btn-inner ui-corner-right ui-controlgroup-last">
<span class="ui-btn-text">
<a class="delete-visit ui-link" rel="external" data-rel="dialog" data-transition="pop">
<img style="margin-top: -15px; margin-left: -15px; margin-bottom: -15px; margin-right: -15px; padding-bottom:4px; padding-left:1px" src="/blabla/Content/Images/blabla_32x32_close.png">
</img>
</a>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>