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.
Related
I have a problem with the "pixelization" of the embedded icons (main/res) on some devices. It can be reproduced on some Android 9 TV boxes and it happenes when an icon is upscaled/downscaled somehow (see images as example). But I do not know why it happens. And I can not reproduce this bug on any devices of mine and on any Android Emulator. I am using regular Android resources (R.drawable) in an XML layout. As I can see, it is not an anti-alias problem. Also, the same APK works great on the other TV boxes. This problem was reported by the user and as I said - I can not reproduce it. These resources were set just via android:src in ImageView, nothing special.
What I need to check first? Thanks.
Example of the pixelization:
https://i.stack.imgur.com/k76jx.png
https://i.stack.imgur.com/Tp8iX.png
UPDATE:
I tested this behavior with the user on his TV box: it happens only with SVG(VectorDrawable) graphics and with android:hardwareAccelerated="true" (it is true by default). If I set android:hardwareAccelerated="false" everything works as expected. Any solution for this?
android:resource="#7F160010" />
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
my website (www.primapaginaonline.it) has a problem when browsed from a smartphone (at least from android, on a Nokia Lumia with Internet Explorer looks fine). It has big empty space at right and at bottom of the page. I can't understand why it looks like that.
Any help?
Thanks
Your website have some css issues
in following elements listed below:
document.getElementById("footerwrapper1") --> Responsible for Horizontal Scroll
document.getElementsByClassName('secondary') --> Responsible for Vertical Scroll
by changing css property display:none to both of them,
Unnecessary scroll is removed.
I have a very simple Android app that's just a WebView. Everything works fine (complex Javascript etc.). However, all of the HTML select controls seem to be disabled. They display with default values, but nothing happens when I click on them, and they don't get the orange highlight when I arrow through the controls.
Other inputs (text, radios, submit) work fine, so I don't think it's a focus issue.
Configuration:
Eclipse IDE
SDK Version 8 (2.2)
Testing in the Emulator
I had the same problem. My problem was fixed by changing overflow:hidden to overflow:visible on a containing element.
I had the same problem.
In my case I had elements on the page that had the style position:fixed;
Although the bounding boxes of the select element and the fixed positioned elements did NOT overlap, I wasn't able to open the select dialog.
By removing a couple of fixed positioned elements I got it to work. Seems to be a bug in webview.
Same Problem, fixed it by setting position:relative on the li's containing the select fields
2 years after the fact, but in case someone pulls this up again:
If it's android 2.3, put in every empty child element of a fixed position parent. I found that this fixed the problem for me.