How to add icons to a TextField with NativeScript like you can see on the image: here
My xhtml code:
<StackLayout>
<Image src="res://logo_login" stretch="none" horizontalAlignment="center"></Image>
<TextField #username class="input" hint="GEBRUIKERSNAAM" [(ngModel)]="user.username" autocorrect="false"
autocapitalizationType="none"></TextField>
<TextField #password class="input" hint="PASWOORD" secure="true" [(ngModel)]="user.password"></TextField>
<Button class="btn btn-primary btn-login icon" text="\e912 INLOGGEN" (tap)="login()"></Button>
<button class="btn btn-forgot-pass" text="PASWOORD VERGETEN?" (tap)="forgotpass()"></button>
Check out icon fonts for NativeScript:
https://docs.nativescript.org/ui/icon-fonts
"...
Follow the instructions on the icon font webpage to determine the hex codes of each font glyph, i.e., icon. Add a Label component to your NativeScript app and bind the Label's text property to a one-letter string generated from the character code of the icon you want to show, i.e., String.fromCharCode(0xe903).
..."
I believe this is what you're trying to do.
You can wrap your TextFields in a StackLayout with a horizontal orientation like
<StackLayout orientation="horizontal">
<!--Your password TextField-->
<TextField
#password
class="input"
hint="PASWOORD"
secure="true"
[(ngModel)]="user.password"
></TextField>
<!--You can then place the icon-->
<Label class="fa" text="" (tap)="toggleShow()"></Label>
</StackLayout>
Related
I'm using NativeScript-Vue to build some app. Trying to figure out how to control the size of my buttons. For instance, i have this code:
<StackLayout orientation="horizontal">
<Button
class="fas"
:text="'fa-upload' | fonticon"
#tap="()=>{backupImage(image)}"
></Button>
<Button
v-if="image.taskStatus==='pending'"
class="far"
:text="'fa-window-close' | fonticon"
#tap="()=>{cancelImageBackup(image)}"
></Button>
</StackLayout>
The result is this:
I would like to remove the large "empty" gray area, on both sides of the icon. I see that native script doesn't support max-width. Tried also padding. How can it be done?
For some reason, works with a StackLayout around it
<StackLayout>
<Button text="LOGIN" class="-rounded-sm bg-primary" width="100dip"></Button>
</StackLayout>
This works fine with a text field:
<TextField id="txtNick" paddingLeft='15' top='10' maxLength='20' width = '300' />
However the following code does not work in a text area:
<TextArea id="txtAbout" maxLength='250' paddingRight='10' top='10' width = '300' borderStyle="Ti.UI.INPUT_BORDERSTYLE_ROUNDED"/>
Any idea how to achieve padding? Cheers
You can't with single TextArea. but you can:
<View height="Ti.UI.SIZE">
<TextArea left="10 right="10" />
</View>
I have a form with some text fields,and I want to place the cursor (auto focus) on first text field of form when page gets loaded.
I want to do it without using javascript.
Ya its possible to do without support of javascript..
We can use html5 auto focus attribute
For Example:
<input type="text" name="name" autofocus="autofocus" id="xax" />
If use it (autofocus="autofocus") in text field means that text field get focused when page gets loaded..
For more details:
http://www.hscripts.com/tutorials/html5/autofocus-attribute.html
Just add autofocus in first input or textarea.
<input type="text" name="name" id="xax" autofocus="autofocus" />
This will work:
OnLoad="document.myform.mytextfield.focus();"
<body onLoad="self.focus();document.formname.name.focus()" >
formname is <form action="xxx.php" method="POST" name="formname" >
and name is <input type="text" tabindex="1" name="name" />
it works for me, checked using IE and mozilla.
autofocus, somehow didn't work for me.
An expansion for those who did a bit of fiddling around like I did.
The following work (from W3):
<input type="text" autofocus />
<input type="text" autofocus="" />
<input type="text" autofocus="autofocus" />
<input type="text" autofocus="AuToFoCuS" />
It is important to note that this does not work in CSS though. I.e. you can't use:
.first-input {
autofocus:"autofocus"
}
At least it didn't work for me...
very easy you can just set the attribute autofocus to on in the wanted input
<form action="exemple.php" method="post">
<input name="wantedInput" autofocus="on">
<input type="submit" value="go" >
</form>
Sometimes all you have to do to make sure the cursor is inside the text box is:
click on the text box and when a menu is displayed, click on "Format text box"
then click on the "text box" tab and finally modify all four margins (left, right, upper and bottom) by arrowing down until "0" appear on each margin.
In the next listbox I load elements with template:
<listbox model="#load(vm.resAccepted)" selectedItem="#bind(vm.selResAccepted)">
<template name="model">
<listitem>
<listcell label="#load(each.eventName)" />
<listcell label="#load(each.userName)" />
<listcell>
<button image="/img/button_mail.png"/>
</listcell>
</listitem>
</template>
</listbox>
My goal is to enable the button of the listitem ONLY for the row the user selects.
To do this, I try
<button disabled="#load(vm.selResAccepted.id=each.id?'false':'true')" />
checking if the unique field id is the same of the selected element, but it fails.
Any help will be appreciated.
You can use eq for equals comparison:
<button disabled="#load(vm.selResAccepted.id eq each.id?'false':'true')" />
or maybe even better: disabled when selected item is not the current item
<button disabled="#load(vm.selResAccepted ne each)" />
here ne is not equal
Was using an asp: button but had to switch to
<input id="SubmitComments" type="button"
what are the attributes to add text to the btn on screen. similar to'text' attribute for asp:button
Also: instead of TextMode="MultiLine" rows=5, what can i use?
Ta
You can use button in Html as
<input type="button" value="Click Here" /> // value= Text to show
Submit button
<input type="submit" value="Click Here to Submit" />
Multiline TextBox
<textarea rows="10" cols="25" /> // can define rows and columns
Use value='your text' Attribute for the text of the button.
<input id='SubmitComments' name='SubmitComments' type='button' value='your text'/>
As for multiline, I assume that is for a text box. Buttons don't hear multiple lines.
Use a textarea element for multi line text input.
<textarea id='yourTextBoxName' name='yourTextBoxName' rows='5' />
<input type="submit" value="Submit">
use Value Attribute to add text to your input type button