Search jQuery

jQuery Forum

JQuery Mobile - Problems with aligning in listview using absolute and relative positioning..

in jQuery Mobile • 10 years ago

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>

Attachments

screen_android.jpg
Size : 67.09 KB Downloads : 712 Download
screenshot_windows_firefox.jpg
Size : 71.01 KB Downloads : 689 Download

Replies(2)

watusiware

Re: JQuery Mobile - Problems with aligning in listview using absolute and relative positioning..

10 years ago

1. You'll never get this to work nicely in all browsers sizing things in pixels. Try %, Otherwise, you are going to have to use media queries and breakpoints in your CSS.

2, Your design is different enough from the standard JQM listview design that it really doesn't make much sense to use a listview. Just create your own list (no data-role="listview") and add your own styling. That way, you don't have to fight with the JQM styles. It will be a lot faster to boot, because you almost certainly won't create HTML as bloated as produced by the listview.

watusiware

Re: JQuery Mobile - Problems with aligning in listview using absolute and relative positioning..

10 years ago

flex boxes are very useful for this sort of thing. They are great when you need to center or evenly-space items either horizontally or vertically. However, they aren't universally supported. They are fine on webkit browsers (iOS. Android, Safari, Chrome) and most modern browsers.

Here a little sample. I create my own list that is not a listview. This is for listing places from Foursquare. It's from a Rhodes application, so I use partials, similar to Rails. Hopefully, you can see how the partials build-up the list.

Note that I am using FontAwesome icons, so they scale nicely on all devices.

I've attached a sample list.

_index_nearby.erb

<div data-role="page" data-dom-cache="true" class="places-page nearby-places-page">
<%= render :partial => 'index_header' %>
<div class="nearby-places-iscroll-wrapper" data-iscroll='{"snap":".place-li"}'">
<%= render :partial => 'refresh_pulldown' %>
<div class="places-list nearby-places-list">
<%= render :partial => 'place', :collection => @places %>
</div>
</div>
<%= render :partial => 'nearby_footer' %>
</div>

_place.erb

<div class="place-li" data-place-id="<%=place.object%>">
<%= render :partial => 'place_buttons', :locals => {:place => place} %>
<div class="place-li-info-wrapper flex-vcenter-wrapper">
<div class="place-li-info flex-center">
<%= render :partial => 'place_info', :locals => {:place => place} %>
</div>
</div>
<div class="place-li-show-icon-wrapper show-icon-wrapper">
<div class="place-li-icon-show flex-center ui-icon ui-icon-arrow-r"></div>
</div>
</div>

_place_buttons.erb

<div class="split-btn-wrapper place-li-split-box">
<div class="split-btn flex-vcenter-wrapper place-li-btn-chat">
<i class="flex-center split-btn-icon icon-comment"></i>
</div>
<div class="split-btn flex-vcenter-wrapper btn-fav place-li-btn-fav<%= place.is_favorite? ? ' fav' : '' %>">
<i class="flex-center split-btn-icon icon-heart"></i>
</div>
</div>

_place_info.erb

<% # dist = "%.0f" % (5280.0 * @location.distance_from_ll(place.lat, place.lng))
dist = 'NaN'
%>
<div class="place-li-name"><%= place.name %></div>
<% if !place.primary_category_name.empty? %><div class="place-li-primary-cat"><%= place.primary_category_name %></div><% end %>
<% if dist != 'NaN' %><div class="place-li-distance"><%= dist %> feet</div><% end %>
<% if !place.address.empty? %>
<div class="place-li-address">
<div class="place-li-address-street"><%= place.address %></div>
<% if !place.cross_street.empty? %><div class="place-li-address-cross">(<%= place.cross_street %>)</div><% end %>
</div>
<% end %>
<div class="place-li-stats">
<% if place.checkins_count.to_i > 0 %>Checkins:<%= place.checkins_count %><% end %>
<% if place.users_count.to_i > 0 %>Users:<%= place.users_count %><% end %>
<% if place.tips_count.to_i > 0 %>Tips:<%= place.tips_count %><% end %>
<% if place.here_now_count.to_i > 0 %>Here:<%= place.here_now_count %><% end %>
</div>

CSS

/* Places list */
.places-list {
}
/* Places list nearby */
.places-list-nearby {
}
.place-li {
display: -webkit-box;
-webkit-box-orient: horizontal;
border-bottom: solid 1px black;
}
.split-btn-wrapper {
display: -webkit-box;
-webkit-box-orient: vertical;
}
.flex-vcenter-wrapper {
display: -webkit-box;
-webkit-box-flex: 1;
-webkit-box-align: center;
}
.show-icon-wrapper {
display: -webkit-box;
-webkit-box-flex: 0;
-webkit-box-align: center;
padding-right: 0.3em;
}
.flex-center {
-webkit-box-flex: 0;
}
.split-btn {
}
.split-btn-icon {
display: block !important;
padding-left: 0.2em !important;
padding-right: 0.2em !important;
padding-top: 0.1ex !important;
padding-bottom: 0.1ex !important;
-webkit-box-flex: 0 !important;
font-size: 30px !important;
}
.place-li-btn-chat {
color: #698b69 !important;
}
.place-li-btn-fav {
color: #c2c2c2 !important;
}
.place-li-btn-fav.fav {
color: red !important;
}
.place-li-info-wrapper {
-webkit-box-flex: 1;
}
.place-li-info {
padding-left: 0;
padding-top: 1ex;
padding-bottom: 1ex;
padding-right: 0.5em;
width: 100%;
}
.place-li-name {
font-weight: bold;
font-size: large;
}
.place-li-primary-cat {
font-style: italic;
font-size: small;
}
.place-li-address {
}
.place-li-address-street {
}
.place-li-address-cross {
font-style: italic;
font-size: small;
}
.place-li-stats {
font-size: small;
}
.place-li-icon-show {
}

Attachments

places.png
Size : 60.96 KB Downloads : 662 Download

Top Reply

Response title

Attachments

jQuery Forum

JQuery Mobile - Problems with aligning in listview using absolute and relative positioning..

Attachments

Replies(2)

Re: JQuery Mobile - Problems with aligning in listview using absolute and relative positioning..

Re: JQuery Mobile - Problems with aligning in listview using absolute and relative positioning..

Attachments

Statistics

Tags

Actions