I am having a problem with making my mobile app home screen look like the image below, I have tried using grids but everything aligns to the left.
Has anyone successfully used grids in jquery mobile as home screen with icons?
I created a quick example that should help you on how to create such a home screen.The reason everything aligns to the left in your trys might be because you added style="text-align: left" to your grids? Cant really tell without any code from your side. Here is the
Example
Related
I am using version 5.1.11 on iOS. I am trying to jump to the last page using ref.current.setPageWithoutAnimation(lastPageIndex)
However, I see a blank screen and if I move my finger a little bit (left-right) on the screen it then shows me the UI. The UI is right there but it's out of focus.
This happens sometimes and sometimes it works correctly.
Can anyone guide me if I am missing something here?
Thank you.
I created a mobile version of my website, testing along the way on my Nexus 5. After testing on iOS 7 (on an iPhone4 and iPhone5S), seems like scrolling on the side menu is broken.
Here's a live demo (no links work, and you'll see a huge CSS & JS file, since it's for the whole app): http://www.altertecnia.com/menu/
Click on the top left icon, and the menu is displayed. Now, on desktop and Android, I can scroll the whole page (including the menu) just fine, and click on the right side of the menu to close it. But on iOS7, when I try to do that, only the background (content of the page) scrolls, not the menu.
Any ideas what could be causing this?
I have a problem with jQuery Mobile 1.3.1 with an input file (accept="image/*;capture=camera") and iOS.
When I click on the button to select a file or to take a picture (choose take picture), then I switch the device in landscape mode to actually take the picture and switch to portrait to confirm. After that, the page is cut at the top. I have to switch the device orientation to solve de problem. I saw that the min-height is 20px smaller just after selecting the file.
Does anyone know how to solve this problem ?
Or can I force jQuery mobile to recalculate the page dimension after file selection ?
You can see the problem here : http://www.reestcompany.com/jqmtest/test.html
You have to add the site to the home screen to have the web app mode and see the problem.
Thanks for you help
You can use trigger page create to create the
$('#pagi-id').trigger('updatelayout');
As mentioned in the jqm docs
Example,
$(window).on( "orientationchange", function(event) {
$('#pagi-id').trigger('updatelayout');
});
I posted an issue on jQuery mobile Github, but it is not a problem from jQuery mobile, it is a problem from Apple. So I also reported the bug to Apple.
https://github.com/jquery/jquery-mobile/issues/6138#issuecomment-20572130
I´m using jquery mobile for an iPad app, and I wanted to have the typical splitview layout so I used the splitview plugin which is working fine until now, but I would still have some minor questions:
Can my first page be a normal page, meaning non-split and then when for example I click on a button go to the second page which would be split?
How do I do to enlarge the left panel if I find it a bit narrow?
Thank you for your help.
I am having the same issue.
I am able to workaround this by providing rel="external" on the link in my navigation menu. This however reloads the entire page, and the ajax effect is gone.
<li>Some Text</li>
I will be spending some time on it this weekend to get it working through ajax, will let you know if I find a solution.
I am just finishing off a mobile web application for a client. I have written it using MVC3 and Razor and using jQuery Mobile. Something I hadn't noticed but the client has is that Safari (and only Safari) seems to be able to move around the screen when using the web application. Difficult to explain here but you can slide the whole browser to the left, right, up and down leaving a Grey background behind it, this is not something that other mobile sites do. Does anyone have an idea of what this might be? I don't even know where to start with it! Thanks in advance to all who contribute.
I suppose it has to do with the issue described in this question: jQuery - draggable images on iPad / iPhone - how to integrate event.preventDefault();?
Ok for anyone who comes across this I have found the solution. The css that comes with the jquery mobile framework contains the class ui-body-c (with the c being replaced by other letters dependiong on theme). In this class there is a border: 1px solid #ccc;, removing this has removed the issue without changing any styling on the site.