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.
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 am using the Material design lite library and trying to create a Floating text box like what google has for the Gmail. I didn't find any documentation for the component, however I tried the below code
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label has-placeholder">
<input class="mdl-textfield__input" type="text" id="sample5" placeholder="">
<label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>
This creates a design something like this
I am trying to design the text box something like this
Is there any way to create this design ?
Here is what I created:
<div id="googleLogIn" style="position:absolute;">
<input type="text" style="border:6px solid blue;height:35px;width:300px;position:absolute;top:50px;"
placeholder="">
<p style="background-color:white;width:100px;position:absolute;left:20px;top:25px;padding:3px;">
Email or phone</p>
</div>
It makes something close to what you want it to be.
Try using HTML tags feildset and legend:
<span style="font-family:arial;font-size:.9em">
<fieldset style="width:300px;border-color:blue;border-radius:5px;padding:10px">
<legend style="color:blue"> Email or phone </legend>
<input type="text" style="border:0;font-size:2em">
</fieldset><br>
</span>
<span style="font-family:arial;color:blue;font-weight:bold">Forgot email?</span>
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.
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>
i am developing a jquery web page in which i have user name and pwd field. i want to align username and its input text box to its right. but when i put it in the android phone the alignment changes in landscape orientation. i need to align this text box and text in the middle of the page where it does not changes even though orientation changes. please help me in this regard. my code is.
<div data-role="fieldcontain" >
<div id="a" class="uname">
<label for="name"><font size="1" color="black"> User Name: </font></label>
<input type="text" name="name" id="text" data-mini="true" value=""/>
</div>
<div id="b" class="uname">
<label for="password"><font size="1" color="black">Password : </font></label>
<input type="password" name="password" id="text" data-mini="true" value=""/></div>
Well, hope this works for you.
http://jsfiddle.net/8cHKB/
Change your inline CSS to match your requirement.
Sometimes, you can also use data-inline="true" instead of display: inline-block. Consider your browser and device capability as well.