I am using Bootstrap 3 on my current project and on my login page, I used the input-group-addon for the first time. My code currently looks like this:
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
<input class="form-control" type="email" name="email" required placeholder="E-Mail">
</div>
When I open the page on my iPhone with Safari and click the input field, it zooms in to the input field (centering it), as it always does. However, in this case it looks very odd due to the addon being left to it. Is it possible to center the entire "input-group", instead of just the input field, while still enabling the user to enter the input?
Thanks in advance! If any code is missing or you are looking for more information, I would be happy to provide it.
I found out now, that the zoom-effect occurs in Safari mobile, when the font-size of the text field is < 16px. Setting the font-size to 16px resolved the issue for me, as my input field with the addon was centered before and is no longer additionally zoomed in.
Additionally, the select element needs to have the focus pseudo-class attached.
.form-control:focus{
font-size: 16px;
text-align:center;
}
Related
I have implemented ngx-chips for an email CC field. It works perfectly in my Android phone using Chrome. But, in iPhone, the autosuggestion does not show up.
<div class="required form-group col-md-12 col-sm-12 col-xs-12" >
<label class="control-label" for="email.emailCc">CC:</label>
<tag-input [(ngModel)]="emailList" [onlyFromAutocomplete]="true" theme='bootstrap'>
<tag-input-dropdown [autocompleteObservable]="items" [showDropdownIfEmpty]="true" [dynamicUpdate]="false">
</tag-input-dropdown>
</tag-input>
</div>
In Iphone
In Android
Please help.
Added following line in global.scss for IOS to show dropdown content,
div.ng2-dropdown-menu.ng2-dropdown-menu---width--4.ng2-dropdown-menu--open {
display: block !important; // to display the drop down content
max-height: 40vh !important; // for scrolling of suggestion list
}
But still it is not good as it is on android. Scrolling the screen scrolls the list with it.
We were facing the same issue. The problem is not data showing up, rather the placement of the dropdown due to the Zoom of textbox in IPhone. With css hacks we were able to place the drop down in proper position.
I am making a facebook like login page. in it im using 2 inline text boxes just like facebook front page. things were going good but automatically the size of both the textbox increases at runtime. i don't know what had happened as i already told you that things were going good
<div class=" form-group form-inline">
<asp:TextBox ID="tbName" runat="server" ForeColor="Black" class="form-control" placeholder="First name"></asp:TextBox>
<asp:TextBox ID="tbSName" runat="server" ForeColor="Black" class="form-control" placeholder="Surname"></asp:TextBox>
<div class="form-group form-inline">
<asp:RequiredFieldValidator ID="rfvName" runat="server" Display="Dynamic" ErrorMessage="* Enter Valid First Name" ForeColor="Red" Style="font-size: small" ControlToValidate="tbName"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="rfvSname" runat="server" Display="Dynamic" ErrorMessage="* Enter Valid Surname" ForeColor="Red" Style="font-size: small; padding:60px;" ControlToValidate="tbSName"></asp:RequiredFieldValidator>
</div>
</div>
also i m using bootstrap to make it responsive and in small screens it's working well but not on large screens
see the image click here to see the image
Please help
your bootstrap css is applied later. when you run the page in browser initially the css is NOT applied but when the css is loaded the textbox sizes increases which is the correct style of the selected class in bootstrap css. Try using ur inspect element of browser and remove the class attribute, you will get back ur initially loaded textboxes style
Problem: I have developed a basic web site using GoDaddy's Website Builder V7. See it here --> oktoberfestvisits.com . It is not iPad aware or optimized in any way since I have very little control over HTML, etc that is generated. All the pages appear to display properly, however, I have two problems I do not understand.
When trying to scroll quickly, ie. swiping down or up, the page only scrolls about 5 or so lines at a time. Is there something in the page that controls or prevents smooth scrolling (Momentum Scrolling)? All other web sites and web pages scroll fine.
When in the middle of the page, touching on the black title bar at the top of the screen does not snap back to the top of the page. Like above, is there something that controls or prevents this? Like above, all other web sites and web pages work fine.
I can make some minor HTML additions if necessary, but I do not know what causes this. Is there something that needs to be on my pages so that the iPad scrolls smoothly?
.sc {
-webkit-overflow-scrolling: touch;
}
Add this css code to style sheet and then add "sc" class on the page which that scroll issue. Like if you put finger on <input /> field and quickly scroll, but it doesnt scroll then put sc class on input field or add to its parent element.
e.g.
<div class="sc">
<div class="form-group sc">
<input type="text" placeholder="First Name"/>
</div>
<div class="form-group sc">
<input type="text" placeholder="Last Name"/>
</div>
<div class="form-group sc">
<input type="text" placeholder="Email"/>
</div>
<div class="form-group sc">
<input type="text" placeholder="Property Units"/>
</div>
</div>
The whole page is in a div with position: absolute;. I think this causes the scrolling error on iOS.
It appears that iOS has laggy scroll when you use overflow: hidden or overflow-x: hidden. Try to avoid that.
I'm pretty new to JQuery Mobile (using v1.3.1) and I'm not sure what I'm doing wrong here. I have a field-contain div with a label and a text/search input in it. When I resize the window the following happens:
First the searchbox jumps onto a new line (I could live with that), but then when I resize it further, it eventually gets taller and covers the label (I obviously cannot live with that :P ).
Here's the code:
<div data-role="fieldcontain">
<label for="city-location">Location:</label>
<input type="search" name="location" id="CheckCityNameInput" value="" data-mini="true" data-inline="true" />
</div>
<input type="button" data-inline="true" data-icon="search" data-iconpos="left" value="Locate city" data-mini="true"/>
This happens with Chrome and Firefox (I didn't test other browsers). Any idea what I'm doing wrong here?
Also when I resize it to the max, a "line" appears between the text input and the button... any idea why?
Damn, it was a conflicting CSS rules on the labels. Good to know that a float:left rule on a label would have this effect though.
Thanks for your help Gajotres.
I'm using contenteditable in several sections of our time keeping app. Since we're logging time, naturally, I want the keyboard to automatically switch to the number keyboard for ipad users. I've tried adding all the attributes to the elements that I can think of such as:
Type=number
Type=tel
pattern=[0-9]*
but ipad still loads the default keyboard.
Here's an example:
<div class="editable validate numbers-only" contenteditable="true" type="number" pattern="[0-9]*">3</div>
Are there any tricks that I can use to display the number keyboard for my ipad users?
you can set the inputmode attribute on a contenteditable element to control which keyboard is displayed, at least in chrome and mobile safari. for example:
<div contenteditable=true inputmode=decimal><div>
i tested out a few more examples here: https://notatoad.github.io/inputmodes.com/
I read in this post that you can use the \d* pattern to make the number keyboard appear on iOS, so a basic form with a number keyboard would look like:
<form>
<input type="text" pattern="\d*">
<button type="submit">Submit</button>
</form>
which should cause a number keyboard to automatically appear on iOS when entering form information.
Now, I'm pretty sure we could extrapolate this and say that we could use \d* on the contenteditable div to answer the question:
<div class="editable validate numbers-only" contenteditable="true" type="text" pattern="\d*">3</div>
I hope this works out for you?
I am not sure how you are using the keyboard here? Means, Is the user adding / Updating time or something? If they do, make the input type to number. This is will tell the browser (safari) that this is input for only numbers and it will tell the iOS to show number pad automatically.
<input type="number">
Checkout my fun project called weight calculator. Check how it will prevent any other keys inside input as well as it will show Number pad in mobile device.
Weight Calculator
<form>
<input type="text" pattern="\d*">
<button type="submit">Submit</button>
</form>
then
<div class="editable validate numbers-only" contenteditable="true" type="text" pattern="\d*">3</div>
<input type="tel" pattern="[0-9]*" novalidate>
This should give you the nice numeric keyboard on Android/iOS phone browsers, disable browser form validation on desktop browsers, not show any arrow spinners, allows leading zeros, and allows commas and letters on desktop browsers, as well as on iPad.