Everytime I select the ngui-auto-complete scrollbar on the dropdown component, the dropdown disappears.
Would it be a better idea to add my scrollbar to another element rather than ngui-auto-complete?
Working example: STACKBLITZ
dropdown.component.html
<form [formGroup]="myForm" class="form-style">
<input
id="input-dropdown"
[list-formatter]="autocompleListFormatter"
type="text"
class="form-control"
minlength="3"
maxlength="20"
ngui-auto-complete
formControlName="gridDropdown"
[source]="dropdownData"
value-property-name="id"
display-property-name="name"
placeholder=" Search"
[(ngModel)]="value"
#agInput
/>
</form>
Source_code
You should add [close-on-focusout]="false" on your input element.
https://www.npmjs.com/package/#ngui/auto-complete
It should look like this.
<form [formGroup]="myForm" id="input-dropdown" class="form-style">
<!-- appAutoFocus - add this to input to use custom auto-focus directive-->
<input id="input-dropdown" [list-formatter]="autocompleListFormatter" type="text" class="form-control"
minlength="3" maxlength="20" ngui-auto-complete formControlName="gridDropdown" [source]="dropdownData" [close-on-focusout]="false"
value-property-name="id" display-property-name="name" placeholder=" Search" [(ngModel)]="value" #agInput />
</form>
If you can rely on others do implement basic functionality for you, Material Design components for Angular might be something helpful. It has also an autocomplete dropdown component https://material.angular.io/components/autocomplete/overview
I have not tested that with large scrollbars, bar I found Infinite scroll for autocomplete in Angular Material 6 which looks promising, i.e. that scrollbars seem to work as they should.
Related
I have a problem with the navigation arrows on Safari on the iphone when filling in a web form.
When the form inputs initially display off the bottom of the screen when you click on the top input the arrows don't seem to work as I would expect. The arrows only navigate through the visible fields. I'm not sure if this is the expected behaviour.
The buttons I'm talking about are shown below.
This is a sample html form that shows the problem on an iPhone 7 with iOS 14.7.1.
I've added some minimal styling to show the problem.
If you select the top input while the other inputs are off the bottom of the screen you can't navigate down the form using the arrow. If you scroll down first and then select one of the inputs depending on which input and where you scroll to you can sometimes navigate through the whole form.
Is there any way to get the arrows to navigate consistently through the form as it is currently displayed or is this just an iPhone "feature"? My real form is more complex than this so ideally I'd like a more generic solution - I have been able to navigate through simpler forms.
<body>
<h1 style="margin: 200px 20px 200px 20px;">Heading</h1>
<form style="display:flex; flex-direction:column;">
<label for="b3-InputAgreementnumber">Agreement number</label>
<input required="" type="text"
autocomplete="off" returnkeytype="next"
keyboardtype="number-pad" id="b3-InputAgreementnumber" >
<label for="b3-InputEmail">Email</label>
<input required="" type="email"
maxlength="60" autocomplete="new-password" returnkeytype="next"
id="b3-InputEmail" >
<label for="b3-InputConfirmationEmail">Confirm Email</label>
<input required="" type="email"
maxlength="60" autocomplete="new-password" returnkeytype="next"
id="b3-InputConfirmationEmail">
<label for="b3-InputSurname">Surname</label>
<input required="" type="text"
maxlength="30" autocomplete="off" returnkeytype="next"
id="b3-InputSurname" >
<label for="b3-InputDateofbirth">Date of birth</label>
<input required="" type="text" placeholder="DD/MM/YYYY" autocomplete="off"
returnkeytype="next" id="b3-InputDateofbirth">
<label for="b3-InputPostcode">Enter your postcode</label>
<input required=""
type="text" maxlength="10" autocomplete="new-password"
returnkeytype="next" id="b3-InputPostcode">
<div>
<button type="submit">Continue</button>
<button type="button">Cancel</button>
</div>
</form>
</body>
I've not been able to find a solution to this as yet but for now we've decided to disable the arrow keys on this form using a technique based on this question's answer IOS disable the keyboard tab arrows.
For iPhone we set all the input fields to readonly and then on focus we set the focused input to read/write using javascript.
It's not an answer but is a reasonable workaround for my use case.
I´m using kendo UI Jquery for my web, and I used some components like the Kendo Multiselect it has clear icon on the right and its provided by the control by default.
<div>
<label for="simple-input">Input</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 100%;" />
</div>
My question is does this functionality exists for a normal text box? or should I implement it :V
Yes, with kendo css, you will get an x icon at the far right of the input box when the box has focus.
https://dojo.telerik.com/#RichardAD/otUrArax
<p>
<label for="simple-input">Input</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 100%;" />
</p>
<p>
<label for="simple-search">Search</label>
<input id="simple-search" type="search" class="k-textbox" style="width: 100%;" />
</p>
In case anyone stumbles upon this question, it seems that input type="search" will do the trick.
Example
<input type="search" placeholder="test">
Works regardless of whether the Kendo-UI library is used. In my case, I was using it with Kendo-Angular.
So I am creating a simple login page and I am trying to style it using Googles Material Design, I came across MUI which a CSS3 framework that does just what I want except one simple thing, when I type in the username the floating label does float up and looks cool, but as soon as I move away from that input field the floating label sinks back down which looks incredibly ugly and obviously is not what I want.
I have created a jsfiddle to replicate the problem here.
<form class="" action="php/process_login.php" method="post">
<legend>Login</legend>
<div class="mui-textfield mui-textfield--float-label">
<input type="text" name="username" id="username" class="">
<label>Username</label>
</div>
<div class="mui-textfield mui-textfield--float-label">
<input type="password" name="password" id="password" class="">
<label>Password</label>
</div>
<div class="form-group">
<input type="submit" class="mui-btn mui-btn--raised" value="Login">
</div>
</form>
I have followed a simple guide that demonstrates how this should work here (Floating Labels) and it works well.
Could anyone suggest how I can fix this please?
You have to load also MUI javascript with
<script src="//cdn.muicss.com/mui-0.9.3/js/mui.min.js"></script>
Working Demo.
You haven't embed the Javascript file, paste this in of your top of you page in the head section:
<script src="//cdn.muicss.com/mui-0.9.3/js/mui.min.js"></script>
In most HTML forms when I start typing something (say birth date) navigators propose to sit with previous similar entries. For instance on html form submit the second visit offers me the first visit entries.
However, when using a bootstrap modal containing a form, the same does not happen, for instance: with a form inside.
I do not want to use jquery autocomplete since I do not have a list of potential answers, I just want to have the same behavior in and outside modals.
Thanks.
Browser autofills are notoriously unpredictable - they make educated guesses about the data based on the name attribute of inputs. It's unlikely you'll be able to get this behavior consistently cross-browser.
can you try this :
add the attribute autocomplete = "on" on your form,
maybe it will do the job.
<form action="demo_form.asp" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
source: http://www.w3schools.com/tags/att_input_autocomplete.asp
Read through this article it should help get things working for you.
Example:
<input type="text" id="name" name="name" autocomplete="name">
<input type="tel" id="tel" name="tel" autocomplete="home tel">
If I go visit my website, the page immediately scrolls to the first input in the contact form page, rather than display at the top of the page. I could probably set the scrollTop in a jquery script to fix it but I would rather get a solution that would work without manipulating the page using jquery or javascript. Can anyone explain this behaviour or how to fix it?
site: http://danmacmill.host22.com/
Remove the autofocus part of that input, and that problem is gone.
It's because you have autofocus on <input name="name"/>. Try removing it.
I think this will cause you the problem
<form action="demo_form.asp">
First name: <input type="text" name="fname" autofocus><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>
but if you use it this way it will solve your problem
<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>
Check this out
Remove autofocus property:
<span>Name*:</span>
<input name="name" placeholder="Please enter your name" type="text" tabindex="1" required autofocus>
It is because of the autofocus parametter you have on that input. You must remove it or manipulate with js