I've done almost everything but seems like I cant get rid of the white space between header and status bar as seen in the image
I am using Intel XDK version 3987 using Cordova plugin.
Any help to eliminate this error will be highly appreciated!
This is my source code:
pastebin.com/fPWJmiD8
To me it seems that your header-elements (data-role="header") have got a border-width of 1px that causes the whole content to move downwards.
Have you already tried to remove the border from each header?
CSS:
.ui-header{
border: none !important;
}
Hope this helps.
After several days of headbanging, trials and errors and detective work, I was able to find the real culprit.
The problem was caused because jQuery Mobile framework automatically on the runtime added the following classes to the header div having data-role="header":
class="ui-header ui-bar-inherit"
Those classes created an unwanted margin between the status bar and the header.
However, this problem was solved by removing those classes using jQuery during the runtime execution of the application.
Related
I got a weird problem with bootstrap 3 and the glyphicons!
The problem appears on my android mobile phone with Chrome (latest).
Problem description: If the font-face-statement exists in the bootstrap.css to load the glyphicon font file(s), the layout of the page gets a little bit broken.
On a windows phone, it's fine. It's fine # Firefox on a Desktop machine too and also in Chrome Desktop.
If I load the page the first time, the layout is OK! If i reload the page or change the page: The weird problem appears and keep! (-> Cache?)
E.g., screenshots from Android Mobile Chrome (latest):
Button group vertical with glypihcons. Icons are moved to the right. (Padding problem?)
Buttons with text # footer. (Padding problem at right side?)
Label for an input field. (It just breaks)
A self styled Checkbox + Label after it. (Unwanted new line break after the checkbox because the parent container is a lil' bit too small (width)...)
I don't know whats going on! If I remove the font-family for the Glyphicon Icons from bootstrap.css, everything is and keeps okay (insteat the missing glyphicon icons off course). If I let the font-face statement in the file, the problem occurs # android mobile phone.
Does someone already have had this problemand how can I fix this and what is the problem?
Fixed it for my self. It don't know what Chrome did, but clearing all the Chrome App Cache worked for me. The Problem was App related.
When I add a class to make appear a div (display:block) , suddenly view change to black screen. I touch the screen, elements in view still fire event.
How can I resolve the problem?
You should make sure you are using the most recent API (You can probably adjust this in eclipses android sdk manager).
If you still have any issues, make sure you have hardware acceleration on. You can adjust this in the manifest file:
<application
...
android:hardwareAccelerated="true"
...
>
If you still have an issue, try applying a css3 translate to something like your global body on app load. That will help to narrow down the issue. Otherwise, without some more code/information it's going to be hard to answer.
Let me know if I can help with anything else, but for what it's worth I haven't had this issue at all using the most recent android API and cordova 4.0.
Im building android app with ionic framework. I have a weird problem with my navbar.
I aligned my title to left(like all android app) using align-title="left"
But sometimes the in navbar , the title and goback icon are overlapping.
I made a codepen for this problem HERE
You have to do these steps to see the problem
In homepage click Scientific Facts
Then click about in the tab
Again click home in tabs
There is also a problem with the transition when aligned right.
Any help appreciated
There has been a bug related to this. Can you try the nightly build and see if that works for you? I've seen issues related to the back button being shown/hidden and proper padding, but it should have been resolved.
You can include the CSS and JavaScript from these urls to load nightly build.
http://code.ionicframework.com/nightly/css/ionic.css
http://code.ionicframework.com/nightly/js/ionic.bundle.js
Navbar issue: https://github.com/driftyco/ionic/issues/1858
After almost 2 years, ion-nav-bar is buggy as Harlem shake.
Seriously, going back to simple
<div class="bar bar-header">
Im using Ratchet Framework for andriod app development.
I have some scrolling problems in some android phones and also in bluestack.
when scrolled, a toomany blank spaces occurs and it affects the smooth scrolling. also affects the forms in the page. attached the image related
scrolling on some other devices is good , No extra space.
1) make sure you are using the meta tags provided by ratchet.
2) make sure you are inserting the bar-tab navigation at the top right after the body
From the ratchet getting started guide:
1. Fixed bars come first
All fixed bars (.bar) should always be the first thing in the of the page. This is really important!
2. Everything else goes in .content
Anything that's not a .bar should be put in a div with the class .content. Put this div after the bars in the tag. The .content div is what actually scrolls in a Ratchet prototype.
3. Don't forget your meta tags
They're included in the template.html page included in the download, but make sure they stay in the page. They are important to Ratchet working just right.
If that doesn't help post some code and let us take a look at it
I am building a phonegap app for android and have a vertical scroll issue. It is similar to Phonegap vertical scroll. I use and fix on android 2.3 but it happen on another phone using android 4.0. You can see video http://www.youtube.com/watch?v=SADCFRoxj4s at 00:10. How can i do to removing it and highlight when pull the scroll?
p/s : it still happen on the build for IOS. I use phonegap build online to build it
You want to remove highlight?
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
You want to remove scrollbar? Adjust you container to fit webview size. If you have no luck with this you can still try to hack into the android webview and disable scrolling
webView.setVerticalScrollBarEnabled(false);
Read:
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/css3-animations-the-hiccups-and-bugs-youll-want-to-avoid/
http://daneden.me/2011/12/putting-up-with-androids-bullshit/