Response title
This is preview!
Move this topic
Phonegap Jquery Mobile app list width issue
in jQuery Mobile
•
7 years ago
Hi,
My App is having problem with iOS9, The list view is not targeting
screen size and lists are coming has half screen size instated of full
screen size.
The App is working fine in other version of iOS but only having
this issue with iOS9. Please have look into attached screenshot.
Regards,
1
Replies(5)
Re: Phonegap Jquery Mobile app list width issue
7 years ago
We can't debug screenshots.
Besides that, I don't even know what I am supposed to see in
the screen shot. I see some blue boxes covering something. Should they
be bigger? Not there? Are the blue boxes a substitute for demo data
that doesn't give away some state secrets? I can't guess.
And I don't see anything here that is "half screen size".
As a guess, try CSS of width:100%; on your
list.
Share a link to your
site, or make a small demo using jsFiddle or Plunkr.
Leave a comment on watusiware's reply
Re: Phonegap Jquery Mobile app list width issue
7 years ago
Hi Watusiware,
the blue box is just a box hiding the text and photo due to privacy,
the box under blue should should have width 100% but for some
reason it is not working in iOS 9 it is working fine in other version
of iOS.
Here is the code:
<!-- Home page -->
<div data-role="page" id="home_pg"
data-title="home_pg" data-theme="x">
<div data-role="header"
data-position="fixed" data-tap-toggle="false">
<div data-role="content" data-iscroll>
<ul id="mainMenu">
<li>
<a href="#page1" data-transition="none">
<div class="news-feed-image-div">
<img class="news-feed-img"
src="img/img1.png" alt="" />
</div>
<div class="news-feed-title-div">
<br />
<h5 class="title">Page one</h5>
</div>
</a>
</li>
<li>
<a href="#page2" data-transition="none">
<div class="news-feed-image-div">
<img class="news-feed-img"
src="img/img1.png" alt="" />
</div>
<div class="news-feed-title-div">
<br />
<h5 class="title">Page Two</h5>
</div>
</a>
</li>
<li>
<a href="#page3" data-transition="none">
<div class="news-feed-image-div">
<img class="news-feed-img"
src="img/img1.png" alt="" />
</div>
<div class="news-feed-title-div">
<br />
<h5 class="title">Page Three</h5>
</div>
</a>
</li>
<li>
<a href="#page4" data-transition="none">
<div class="news-feed-image-div">
<img class="news-feed-img"
src="img/img1.png" alt="" />
</div>
<div class="news-feed-title-div">
<br />
<h5 class="title">Page Four</h5>
</div>
</a>
</li>
</ul>
</div>
</div>
///////////////////////////// CSS/////////////////////////////////////////////////
div#container {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
}
.news-feed-img-div {
position: absolute;
}
.news-feed-img {
width: 85px;
height: 77.5px;
margin-right: 0.4em;
float: left;
box-shadow: inset 5px 1px 8px 5px rgba(255, 255, 255, 0.52);
-moz-box-shadow: inset 5px 1px 8px 5px rgba(255, 255, 255, 0.52);
-webkit-box-shadow: inset 5px 1px 8px 5px rgba(255, 255, 255, 0.52);
}
.news-feed-title-div {
position: relative;
margin-left: 110px;
color: #fff;
font-size: 20px;
}
.news-feed-icon-box {
position: absolute;
bottom: 0.2em;
right: 0.4em
}
.news-feed-icon-box-img {
width: 1.4em;
margin-left: 1.5em;
}
#mainMenu {
margin-left: 0.2em;
margin-right: 0.2em;
margin-top: 0px;
list-style-type: none;
padding: 0px
}
#mainMenu h5 {
margin-top: 0px;
margin-bottom: 0.2em;
text-overflow: ellipsis;
white-space: no-wrap;
overflow: hidden
}
#mainMenu .description {
line-height: 1;
font-size: 10px;
}
#mainMenu li {
position: relative;
padding-bottom: 0.1em;
height: 5.0em;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgba(255, 255, 255, 0.5);
background-color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.4);
color: rgba(255, 255, 255, 0.4);
box-shadow: inset 5px 1px 8px 5px rgba(255, 255, 255, 0.52);
-moz-box-shadow: inset 5px 1px 8px 5px rgba(255, 255, 255, 0.52);
-webkit-box-shadow: inset 5px 1px 8px 5px rgba(255, 255, 255, 0.52);
}
.mainMenu-separator {
height: 10px
}
#mainMenu .publicationDate {
line-height: 2;
font-size: 7px;
}
.line {
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgba(255, 255, 255, 0.5);
}
.ui-grid-b {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgba(255, 255, 255, 0.5);
}
.reg_content {
background-color: #fff;
}
Leave a comment on yamafarooq's reply
Re: Phonegap Jquery Mobile app list width issue
7 years ago
Make a demo. Use pictures of cats.
Unless your app is about cats. Or use cats that are not secret cats.
Leave a comment on watusiware's reply
Re: Phonegap Jquery Mobile app list width issue
7 years ago
I see you are using iScroll. Try this:
- .iscroll.scroller {
- width: 100%;
- }
Also, I see you are doing some absolute positioning, but I do not
see from above what you are positioning it against. It will position
against the nearest (up the tree) absolute or relative-positioned element.
You have:
div#container {
position: absolute;
but no
div#container
shown in your HTML.
If you are going to
absolute-position within list items, normally you will make the list
item
position:relative
.
Leave a comment on watusiware's reply
Re: Phonegap Jquery Mobile app list width issue
7 years ago
Hi Watusiware,
Your a lifesaver, Thanks for the help :D
The problem was with iscroll, Adding
div.iscroll-scroller {
width: 100% !important;
}
Solved the problem.
Leave a comment on yamafarooq's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to yamafarooq's question