I have a text input in my Ionic application that has 2 buttons in the same span. The first button is used to conduct a search and the second is used to clear the text input. I'm seeing odd behavior when I tap the clear button, the text input is cleared and the keyboard reappears but the text field does not have focus.
Can anyone help so that I can make sure the text input still has focus after clearing the text? Thank you.
<form class="list">
<span class="item item-input-inset">
<label class="item-input-wrapper address-label" name="addressLabel">
<i class="icon ion-ios-search placeholder-icon" ng-show="!address.length"></i>
<input type="text" class="address-input" placeholder="Search By Address" ng-model="address" autocomplete="off" autocorrect="off" autocapitalize="off">
</label>
<button type="submit" id="button1" class="button button-small custom-btn ion-search" ng-click="search(address)" ng-show="address.length"></button>
<button ng-click="address = ''" class="button button-small custom-btn ion-close-round" ng-show="address.length"></button>
</span>
</form>
Take a look at this post from the ionic framework forums. Seems like this would work and give you a more native look and feel.
<div class="list list-inset">
<div class="item item-input">
<input type="text" placeholder="mail stop"
name="mail_stop_name"
>
<i class="icon ion-ios-close placeholder-icon"
data-tap-disabled="true" on-touch="formData.mail_stop_name = ''"></i>
</div>
</div>
Ref:
https://forum.ionicframework.com/t/clear-button-inside-input-causes-input-to-loose-focus/17016
Related
I am trying to figure out how to get a navbar in bootstrap 5 to look normal with a "Log In" button. But the space causes it to drop "In" down to a second line making the navbar much longer than it is supposed to be. I'm not sure how to prevent it from happening. https://codepen.io/binarycode/pen/PobJvOR
Edit: A "-" between the words seems to cause the issue as well.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex">
<input type="email" aria-label="Email" placeholder="Email" autocomplete="Email" size="25"
value="{{ last_username }}" name="email" id="inputEmail" class="form-control me-2" required autofocus>
<input type="password" aria-label="Password" placeholder="Password" autocomplete="current-password" name="password"
id="inputPassword" class="form-control me-2" required>
<button class="btn btn-outline-success" type="submit">Log In</button>
</form>
</div>
</nav>
Known bug in version 5. Can be fixed with non-breaking space. " "
(Your CodePen is leveraging Bootstrap 4.5.0, so my answer is two-fold...)
For Bootstrap 4 (your CodePen example)
Any reason you're using <form class="d-flex">??
Correct usage, according to docs, is <form class="form-inline">. Use that and the wrap goes away.
If you must use "d-flex" then you need to inject 'white-space: no-wrap' in somewhere, e.g. like this:
<button class="btn" type="submit" style="white-space: no-wrap">Log In</button>
For Bootstrap 5 (Specific to Beta-2)
Although the docs suggest that one should use "d-flex", this does not work with text that contains whitespace when the remaining content is perceived to be too small by the browser.
This was raised in issue #32383 - and subsequently closed as fixed (though plainly not).
That issue does however discuss the why's. "d-flex" just sets the display: flex CSS .. that in turn enables a flex context for all its direct children.
As the form does not specifically define any further flex attributes .. the browser assumes wrapping if it sees fit.
A workaround to this is to specifically control the flex attributes - one that seems to work well (and is mentioned in the issue) is flex-shrink-0. Apply that to your button and it should work:
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex">
<input type="email" aria-label="Email" placeholder="Email" autocomplete="Email" size="25"
value="{{ last_username }}" name="email" id="inputEmail" class="form-control me-2" required autofocus>
<input type="password" aria-label="Password" placeholder="Password" autocomplete="current-password" name="password"
id="inputPassword" class="form-control me-2" required>
<button class="btn btn-outline-success flex-shrink-0" type="submit">Log In</button>
</form>
</div>
</nav>
JSFiddle here
(Please make sure to let the BS5 authors know that the "fix" is not ... on the issue #32383, and #33184.)
I'm having real issues trying to get my bootstrap datepicker icon to attach to my textbox. I've read through all documentation and searched for hours to find a solution but nothing seems to work.
is the closest i've gotten with my markup but the icon seems to align to the right hand side of the screen
<div id="sandbox-container">DATE
<div class="input-group date">
<input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
It's pretty easy to do with Bootstrap input group and Font Awesome icons:
Structure
<label for="xxx">Date</label>
<div class="input-group">
<input type="text" class="form-control" id="xxx">
<div class="input-group-append">
<span class="input-group-text">
<i class="fas fa-calendar-alt"></i>
</span>
</div>
</div>
Icon Choices
I am showing you the free version of Font Awesome Icons. You can use whatever you like to represent the date picker icon. Here is some: https://fontawesome.com/icons?d=gallery&q=calendar&m=free
Screenshots
Demo
https://jsfiddle.net/davidliang2008/9a20fp3u/37/
In ionic ios app swipe the page it shows blank screen.Please help me how to fix this.
app.js
$stateProvider.state('login',
{
cache: false,
url: '/login',
templateUrl: 'templates/Login.html',
controller: 'loginCtrl'
})
this is Login.html template page
<ion-view view-title="Login" hide-nav-bar="true" padding="true">
<ion-header-bar align-title="center" class="bar-positive">
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-content scroll="true" overflow-scroll="true">
<form name="signInForm" novalidate="" ng-submit="tryLogin(signInForm)">
<div class="list-header">
<label class="item item-input" tabs-item-hide="true" ng-class="{ 'has-errors' : signInForm.Email.$invalid, 'no-errors' : signInForm.Email.$valid}">
<input type="email" placeholder="Email" name="Email" ng-model="loginData.Email" autofocus required>
</label>
<span class="form-errors" ng-show="signInForm.Email.$error && signInForm.$submitted" ng-messages="signInForm.Email.$error" ng-messages-include="templates/form-errors.html">
</span>
<label class="item item-input">
<input type="password" placeholder="Password" name="Password" ng-model="loginData.Password" required>
</label>
<span class="form-errors" ng-show="signInForm.Password.$error && signInForm.$submitted" ng-messages="signInForm.Password.$error" ng-messages-include="templates/form-errors.html">
</span>
<div> </div>
<p class="text_right">
Forgot Password?
</p>
<div>
<button class="button button-block button-positive">Login</button>
</div>
<div style="text-align: center">
Create an account
</div>
</div>
</form>
</ion-content>
My Main Page HTML:
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" >
<ion-header-bar class="bar-positive">
<h1 class="title">MY App</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item class="item item-icon-left" nav-clear menu-close href="#/Settings">
<i class="icon ion-gear-b"></i>Settings
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Now swipe the child page it from the iphone it show the blank screen, coldn't load it again
just use the following line of code in the config of your AngularJS module
angular.module(....)
.config(function($stateProvider,$urlRouterProvider,$ionicConfigProvider){
$ionicConfigProvider.views.swipeBackEnabled(false);
//remaining code in config
}
an issue was created on github and the cash being disabled was identified as the cause of the problem. moreover a reply from the ionic team came as follow (last reply on github)
This is caused by caching being disabled. There is big benefit of caching you views, and an edge case like this isn't something we want to support.
If you're worried about data not being updated, you can use the view
lifecycle events to make sure data is up to date.
so if you need the caching disabled and you don't care about this feature you can disable it as #Arul said. if you want this feature you have to enable caching.
i've got this code using Jquery Mobile :
<div role="main" class="ui-content">
<form action="/" method="post">
<fieldset data-role="controlgroup">
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" checked="">
<label for="checkbox-1a">Cheetos</label>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a">
<label for="checkbox-2a">Doritos</label>
<input type="checkbox" name="checkbox-3a" id="checkbox-3a">
<label for="checkbox-3a">Fritos</label>
<input type="checkbox" name="checkbox-4a" id="checkbox-4a">
<label for="checkbox-4a">Sun Chips</label>
</fieldset>
</form>
</div>
The problem is that when i load the page the codes looks like this :
<div class="ui-controlgroup-controls ">
<div class="ui-checkbox">
I've skipped the whole code, the problem is in the
that should not be there.
Any idea about how to fix it?
This problem comes when copying and pasting the source code from their website.
In fact in this way you copy also invisible blank spaces which are converted as by the browser and make the last block go down.
To solve the issue simply remove all the spaces between the tags and all will be displayed correctly.
There are many ways you can remove the automatic default padding.
First
<div style="padding: 0;">...</div>
Second: Define an id for the div tag and set padding to 0 in css
<div id="myID">
#myID{ padding:0; }
So I'm building a web application using Jquery Mobile and Phonegap. The app was working fine until I removed some input fields and drop down menus which became obsolete.
The problem now is that when I click on the last input field of the page & the ios keyboard activates, the footer bar is no longer fixed and there is a white gap between the footer bar and the ios keypad. When the keypad hides again I see the full page but the white gap is above the footer.
This doesn't seem to be a problem on the Android platform so I'm wondering if it is a CSS issue. Help is most certainly welcome. Here's the page code in question...
<div data-role="page" data-theme="f" id="">
<div data-role="header" class="ui-state-persist">
<h1>text</h1>
</div>
<div data-role="content">
<label for="">Text</label>
<input type="text" name="text" id="" value="" class="input-field required"/>
<label for="">Text</label>
<input type="text" name="" id="" value="" class="input-field required"/>
<label for="">Text</label>
<input type="text" name="" id="" value="" class="input-field required"/>
<label for="">Text</label>
<input type="" name="" id="" value="" class="input-field required"/>
</div>
<div data-role="footer" class="ui-state-persist" style="min-height:42px;">
Done
</div>
Try the following code (using jQuery Mobile version 1.2.0):
<div data-role="page" data-theme="f" id="quickquote_insured">
<div data-role="header" class="ui-state-persist">
<h1>Contact Details</h1>
</div>
<div data-role="content">
<label for="quickquote-insured_initials">Initials:</label>
<input type="text" name="quickquote-insured_initials" id="quickquote-insured_initials" value="" class="input-field required"/>
<label for="quickquote-insured_surname">Surname:</label>
<input type="text" name="quickquote-insured_surname" id="quickquote-insured_surname" value="" class="input-field required"/>
<label for="quickquote-insured_phone_number">Mobile number:</label>
<input type="text" name="quickquote-insured_phone_number" id="quickquote-insured_phone_number" value="" class="input-field required"/>
<label for="quickquote-insured_email_address">e-Mail address:</label>
<input type="email" name="quickquote-insured_email_address" id="quickquote-insured_email_address" value="" class="input-field required"/>
<br>
</div>
<div data-role="footer" class="ui-state-persist" style="min-height:42px;">
Done
</div>
</div>
I know it may look simple, but I just added a <br> just under your email input field.
I think the problem is that, since your footer is "static", you need to "fill" your page.
For example, if you have few fields on your page and if you don't "fill" your page, you'll get the following result:
Hope this helps.