For some reason, on a Droid, my <input type="text"> field is not showing correctly. It does not show the user what is typed until the user moves on to the next field.
I checked on some online forums and it seems that this may be a Droid internal issue. However, despite that, is there any way around it? (Note: I'm using bootstrap.js and the input field is inheriting CSS styles from it. Not sure if bootstrap plays nicely with Droid?)
Here's my HTML input fields (not sure if it matters):
<label for="firstName">First Name*</label>
<input type="text" class="requiredInput" name="firstName" value="">
<label for="lastName" class="">Last Name*</label>
<input type="text" class="requiredInput" name="lastName" value="">
Here's the CSS that applies to an field, apart from the bootstrap.js CSS:
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
padding: 12px 4px;
margin-bottom: 12px;
Thanks SO!
I removed all CSS styles except margin-bottom (so that it became a very plain-looking input field) and it worked.
I had the same problem and the solution was to decrease padding top and padding bottom
Related
I have tried two options in my AndroidManifest.xml
android:windowSoftInputMode="adjustResize" and android:windowSoftInputMode="adjustPan"
With adjust adjustResize it pushes up my background image so that it looks pretty rubbish. It also allows this weird white section if you scroll down. See the 2nd and 3rd image.
If I use adjustPan it looks great and fixes the problem but on devices with lower resolution inputs are hidden by the keyboard and users can't get to them as scrolling is not possible.
Ideally I want the background image to act like adjustPan but the inputs/other content to act like adjustResize.
Also is it possible to change this setting dynamically e.g. depending on which page you are one?
Edit added code:
<ion-content no-bounce has-bouncing="false" forceOverscroll="false">
<div class="content">
<div>
<ion-img src="./../../../assets/img/branding/logo.png"></ion-img>
</div>
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()" #formCtrl="ngForm">
<ion-grid>
<ion-row class="row-padding-one"></ion-row>
<ion-row>
<ion-col size-sm="6" offset-sm="3" class="input-col">
<ion-item class="custom-item" lines="none">
<ion-input
class="login-input"
type="text"
formControlName="email"
[formControl]="loginForm.controls['email']"
placeholder="E-Mail"
required>
</ion-input>
<div *ngFor="let validation of loginValidationMessages.email">
<div class="error-message"
*ngIf="loginForm.get('email').hasError(validation.type) && loginForm.get('email').touched">
{{validation.message}}</div>
</div>
</ion-item>
...
.content {
width: 100%;
height: 100%;
padding: 0;
position: relative;
background: url("./../../../assets/img/login-bg.jpg") no-repeat fixed center;
background-size: cover !important;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: left;
}
try to put background image for ion-content of that page.
This will solve the issue!
Your can do like this:
ion-content{
--background: url('../../assets/imgs/background-image.png') 0 0/100% 100% no-repeat;
}
it will resize your inputs and other content but your Image always will be 100%;
add your css to
.scroll-content {
padding-bottom:0!important;
}
this is known issue in
https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/19
for more info
https://forum.ionicframework.com/t/keyboard-hides-input-until-i-start-typing/60827/9
I'm building a website, which is (almost) mobile friendly, and after testing it on several devices, have found that things work well - Except for the fact that on my device, some of the text was bigger than it should have been after scaling.
I found that it was due to my device (Galaxy S4) having "Text Booster" function checked, which must detect larger amounts of text and resize it automatically to suit what it thinks is a more correct size.
Now this is fair enough, but I was hoping that I would be able to have control over the size of the font on various device widths using purely CSS.
IMPORTANT I'm finding that my "About Text" in the footer isn't affected by the booster, so I'm hoping that there is a way to prevent the main article text being resized, but does anyone know how?
Here is the relevant CSS that I'm using:
html{ // Sets the default font size
-webkit-font-smoothing: antialiased;
color: #999999;
cursor: default;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.aboutText{ // Holds the un-affected font
float: left;
width: 280px;
line-height: 18px;
padding: 0px 20px 0px 20px;
}
.result{ // Holds the text made bigger with Text Booster
line-height: 18px;
color: 606060;
}
HTML:
<div class="spaceInner"></div>
<div class="mainText">
<div class="result">$post_article</div>
</div>
<div class="mainText">
<div class="aboutImg"></div>
<div class="aboutText"><?php echo $site_about; ?></div>
<div class="clearLeft"></div>
</div>
Any ideas why one font scales down but the other one "boosts" up?
UPDATE
I have found that float: left prevents Text Booster from changing the font size. I can't use float on my main text area, so is there another alternative???
i have a issue in my website menu in android mobile chrome browser that is not able to show unicode ☰ . but if i am check my web application in iPhone or other android browser it is rendering or working properly.
I am used this icon in this structure
<ul>
<li>☰☰</li>
<li>Home</li>
<li>About Us</li>
</ul>
But it is not show in mobile chrome browser
How to fix it!
The other alternative is to use ≡ instead: it looks very similar:
≡ instead of ☰
We can also create hamburger/menu icon using some CSS and HTML stuff that works fine on all versions of browsers without making any break. It works fine on all mobile and desktop browsers.
.hamburger-icon {
margin: 0;
padding: 19px 16px;
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.hamburger-icon span {
width: 40px;
background-color: #000;
height: 5px;
display: block;
margin-bottom: 6px;
}
.hamburger-icon span:last-child {
margin-bottom:0px;
}
<label class="hamburger-icon">
<span> </span>
<span> </span>
<span> </span>
</label>
Apparently the reason is that no font in the system where the browser runs contains a glyph for “☰” U+2630 TRIGRAM FOR HEAVEN.
The alternatives are:
Use an image instead.
Use a downloadable font with #font-face. This may mean that a few megabytes need to be loaded in the user’s system.
For general advice on such matters, see my Guide to using special characters in HTML.
You could easily use three pipe characters | and rotate them 90degrees using the transform: rotate(90deg) function! Here's what I've done:
<nav role="navigation" id="nav-hamburger-wrapper">
<input type="checkbox" id="nav-hamburger-input"/>
<label for="nav-hamburger-input">|||</label>
</nav>
and in CSS:
#nav-hamburger-wrapper label,
#nav-hamburger-input {
transform: rotate(90deg);
transition-duration: 0.3s; /* give it a rotation effect when checked */
}
#nav-hamburger-wrapper input:checked + label {
transform: rotate(0);
}
Enjoy ;-)
I am working on a mobile website have multiple input fields with background on the right, I have added the below css code for the same
.row input
{
width:100%;
padding:10px;
padding-right:30px;
font-size:18px;
background-repeat:no-repeat;
}
.row input.name
{
background:url(/images/mobile_default/icons/name_off.gif) no-repeat right 13px center;
margin-right:10px;
border-bottom:1px solid #f0f0f0;
}
And the below HTML for the same
<div class="row last">
<input name="ccname" placeholder="Name on Card" validate="name" class="name validate" type="text" autocomplete="on"/>
</div>
On Native Android browser it looks repeated background for all input area.
Please let me know if I had mistaken somewhere.
I have noticed an error in your css
.row input.name{background:url(/images/mobile_default/icons/name_off.gif) no-repeat right 13px center;margin-right:10px;border-bottom:1px solid #f0f0f0;}
The background-position in your background CSS should only use left or right and then top or bottom values. There is one value too much.
.row input.name{background:url(/images/mobile_default/icons/name_off.gif) no-repeat right center;margin-right:10px;border-bottom:1px solid #f0f0f0;}
So I'm developing a site that'll need to function across a multitude of browsers, be they desktop, mobile, or what have you. The designers, as mac designers will often do, have used Helvetica Neue as the font for the entire site. I'm trying to get it working via #font inclusion, and it's showing up just fine.. but the line-heights are giving me an ulcer.
See the below image, this is Arial, Helvetica Neue Std, and Helvetica Neue Pro. Windows Chrome handles all three like a champ, but the rest here are wildly inconsistent. They're all set to line-height 18px right now, I also tried line-height: 1, but to no avail.
The HTML/CSS I'm using for the purposes of this test:
<style type="text/css">
#font-face { font-family: "Helvetica Neue Std"; src: url( 'HelveticaNeueLTStd-Md.otf' ) format( "opentype" ); }
#font-face { font-family: "Helvetica Neue Pro"; src: url( 'HelveticaNeueLTPro-Md.otf' ) format( "opentype" ); }
.box {
float: left;
padding: 10px;
border: 1px solid red;
font-size: 18px;
line-height: 18px;
}
.box .text_1 { font-family: Arial; }
.box .text_2 { font-family: "Helvetica Neue Std" }
.box .text_3 { font-family: "Helvetica Neue Pro" }
</style>
<div class="box">
<span class="text_1">Aw Nuts</span>
</div>
<div class="box">
<span class="text_2">Aw Nuts</span>
</div>
<div class="box">
<span class="text_3">Aw Nuts</span>
</div>
Am I just out of luck here? I'm considering just using Arial at this point, because trying to make toolbars and buttons where the text is vertically centered is proving to be a nightmare. I certainly don't want to sniff for OS and browser and write custom line-heights for every single element.
This looks like a vertival metrics issue. The font will never align right because it has poor vertical metrics. The only way to make the font render consistently across browsers is to fix its vertical metrics.
Most font providers allow you to update and fix vertical metrics for a font before downloading it. They may call that option differently though. E.g.: Fontsquirrel calls it Auto-Adjust Vertical Metrics, myFonts.com calls it Line Height Adjustments, etc..
Font: poor vertical metrics cause inconsistent line-height rendering across browsers. Solution?
I can offer this in-depth background piece on why line height is a pain.
In summary, different browsers' ways of handling the vertical spacing metrics might be the cause of these inconsistencies. Some calculate from the top of the font's highest ascender and add all line space beneath, while others split the spacing before and after the line of text.
Please try this.
*{
margin: 0px;
padding: 0px;
font-size: 100%;
vertical-align: baseline;
}
font-size: 100% will automatically reset your fonts defaults and you need to manually specify font-size on p a div etc.