I've got the following problem that my with jQuery mobile ( 1.2.0 ) created header and footer are hidden on loading the document.
If I click on any position the containers are showed prompt.
Other contents are always showed.
This bug only appers on my LG Optimus L5 ( Android 4.0.3 ).
On my Galaxy S3 ( 4.1 ), Galaxy Note ( 4.1 ) or any virtual machine ( 2.3.3, 4.2 ) or in the Browser ( PC ), there's no bug like this.
The HTML file is loaded into a WebView.
Here's my HTML source:
<div data-role="header" data-theme="c" data-position="fixed" data-tap-toggle="false" data-iscroll="enable" data-fullscreen="false" id="header_app">
<img src="logo.png" alt="" height="50" style="margin: 6px; margin-bottom: 0;" />
</div>
<div data-role="content" id="cnt" >
</div>
<div data-role="footer" data-theme="c" data-position="fixed" data-tap-toggle="false" data-fullscreen="false">
<div data-role="navbar">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
Please excuse my bad english, I hope you can solve my problem.
If you have written
.ui-page { -webkit-backface-visibility: hidden; }
in your css then just delete it. It may help you.
Related
So, I'm adding a popup menu off the header and it works... works quite well actually except for one small thing. For the life of me I can't get it to display the icons the way I want them!
In the first <li> I brute force the data-icon into the <li> and it shows but its not positioned to the left. In the others, I left the data-icon where I'm accustomed to leaving them (where they work correctly everywhere else) and they don't display at all.
Any suggestions?
<div id="header" data-role="header" data-theme="b">
<h1>MyApp</h1>
Menu
<div data-role="popup" id="popupMenu" data-theme="b">
<ul data-role="listview" data-inset="true">
<li data-icon="gear" data-iconpos="left">Settings</li>
<li>GPS</li>
<li>About</li>
</ul>
</div>
</div>
<!-- /header -->
JSFiddle
The data-iconpos attribute not defined for regular list items, works only when the < li> item is inside a navbar widget: http://www.w3schools.com/jquerymobile/jquerymobile_ref_data.asp
Please, take a look to the fiddle I made: https://jsfiddle.net/xbo8npng/1/
I have placed the icons to the left using css:
<div id="header" data-role="header" data-theme="b">
<h1>MyApp</h1>
Menu
<div data-role="popup" id="popupMenu" data-theme="b">
<ul data-role="listview" data-inset="true">
<li class="left" data-icon="gear">Settings</li>
<li class="left">GPS</li>
<li class="left">About</li>
</ul>
</div>
</div>
and the styles:
.left a{
padding-left: 2.5em !important;
padding-right: 1em !important;
}
.left a:after{
left: 2px;
right: auto;
}
I hope this helps you!
Am using Jquery Mobile 1.3.1 on Worklight 6. When I use a fixed header and content. The header always seem to overlap the content. Please suggest what I am doing wrong.
<body id="content" style="display: none;">
<div data-role="page" id="basic">
<div data-role ="header" data-position="fixed">
<h3>CORS</h3>
</div>
<div data-role="content">
<form id="basic-information">
<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-inset="false">
<div data-role="collapsible">
<h3>Basic Information</h3>
<fieldset data-role="controlgroup" data-type="horizontal"
data-mini="true">
Not sure what's up with jQuery Mobile, but it seems to originate from there (tested with jQuery Mobile 1.4.2, happens there as well).
To fix, I have added the following to common\css\main.css:
.ui-page-header-fixed { padding-top: 15px !important; }
BTW,
Your code snippet is cut... (not full).
As the title says,
When i use a input field in a jquery mobile page, it doesnt expand the input fields to the full width of the screen.
If you use a small screen device, it fits fine but when you view the page in a desktop browser, the input fields only appears 2/3 of the width of the browser.
Is there a way to set it to expand to whatever the browser/screens width is?
here is my code:
http://jsfiddle.net/B8JDt/2/
<body>
<div data-role="page" id="page" onLoad="initialiseFields()">
<div data-role="header" data-position="fixed" data-theme="b" data-tap-toggle="false" data-transition="none" > Back
<h1>New Claim</h1>
</div>
<div data-role="content">
<ul class="ui-li" data-role="listview" id="list" data-inset="true" data-scroll="true">
<li data-role="list-divider">
<h2 id="itemTitle">Title</h2>
</li>
<li>
<h3>Journey From:</h3>
<div data-role="fieldcontain">
<input type="text" name="claimTitle" id="textFieldJourneyFrom" value="" />
</div>
</li>
<li>
<h3>Journey To:</h3>
<div data-role="fieldcontain">
<input type="text" name="claimTitle" id="textFieldJourneyTo" value="" />
</div>
</li>
</ul>
<div data-role="navbar">
<ul>
<li>Save</li>
</ul>
</div>
</div>
</div>
</body>
jQuery Mobile has a buggy implementation of box-resizing CSS3 rule.
To fix this problem use this CSS:
#media all and (min-width: 28em){
.ui-input-text {
box-sizing: none !important;
-moz-box-sizing: none !important;
-webkit-box-sizing: none !important;
width: 100% !important;
display: inline-block !important;
}
}
Fist box-sizing: none don't exist but it will override default value and it is better to override it like this then to remove it manually from a css file.
Working example: http://jsfiddle.net/B8JDt/3/
How can I force the heading to be visible, and the text below overflow into ellipsis? I can't get it to work with the BlackBerry list item when the page is wider than 768px.
http://jsfiddle.net/TeNXG/14/
<div data-role="page" data-theme="a" id="demo-page" class="my-page" data-url="demo-page">
<div data-role="header">
<h1>News</h1>
Back
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview">
<li><a href="#">
<img src="http://view.jquerymobile.com/master/docs/_assets/img/apple.png">
<h2>iOS 6.1</h2>
<p>Apple released iOS 6.1</p>
<p class="ui-li-aside">iOS</p>
</a></li>
<li><a href="#">
<img src="http://view.jquerymobile.com/master/docs/_assets/img/blackberry_10.png">
<h2>BlackBerry 10</h2>
<p>BlackBerry launched the Z10 and Q10 with the new BB10 OS and more and stuff and lots of stuff and overflowing and stuff and wow so much text man holy mess even more let's see just how jacked we can make this div</p>
<p class="ui-li-aside">BlackBerry</p>
</a></li>
</ul>
</div><!-- /content -->
<div data-role="footer" data-theme="none">
<h3>Responsive Grid Listview</h3>
</div><!-- /footer -->
Add white-space: nowrap; to the description block:
ui-listview .ui-li-desc {
white-space: nowrap;
overflow: visible;
position: absolute;
left: 0;
right: 0;
}
See the updated jsFiddle.
I am currently trying to build a Facebook-styled web App using jQuery mobile. My main problem is that users are not able to scroll both navigation-bar and content at the same time. I tried many css based solutions but whereas my normal browser displays everything correct all my mobile devices refuse to display two scroll bars at the same time.
So I tried to implement iScroll with iScrollview. It works just perfectly with every content but with my slideable menu-bar. I have no idea where the problem might be. As soon as a page is added iScrollview seems to ignore the data-iscroll attribute.
<body class="ui-mobile-viewport">
<div id="menu" data-role="content" data-iscroll> <!--Menu-->
<div id="memberDetails">
<h3>Username</h3>
</div>
<ul>
<li class="menuDivider" >MENUDIVIDER</li>
<li class="active"><span class="icon" id="home"></span><span class="text">Home</span></li>
<li></span><span class="text">Page One</span></li>
<li></span><span class="text">Page Two</span></li>
<li></span><span class="text">Page Three</span></li>
<li></span><span class="text">Page Eight</span></li>
<li class="menuDivider" >MENUDIVIDER</li>
</ul>
</div>
<!--/Menu-->
<!--page Home-->
<div data-role="page" class="pages ui-page ui-body-c ui-page-active" id="home" data-url="home" tabindex="0" style="margin-left: 0px; min-height: 882px; ">
<div data-role="header" class="ui-header ui-bar-a" role="banner"> <span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true"><span class="ui-btn-text">Menu</span></span>
<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Home</h1>
</div>
<!-- /header -->
<div id="logo"><img src="files/images/wig_logo.png" alt="wig-logo" width="54" height="25"></div>
<!-- /logo -->
<div data-role="content" class="ui-content" role="main">
<p>Text</p>
</div>
<!-- /content -->
</div>
<!-- /page Home-->
</body>
I am using jQuery 1.8.2, JQM 1.2.0. The slideeffect is done by basically setting the content's margin to the menu's width. Let me know if you need any further information.