JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Text Boxes & Inputs › info-button on smart -passord-text- box
Tagged: form component, password box, reactive form
- This topic has 3 replies, 3 voices, and was last updated 3 years, 8 months ago by
admin.
-
AuthorPosts
-
December 22, 2020 at 8:58 pm #101260
AURAGARD
MemberHi,
is there a way to put an info-button at the end of a “smart -passord-text- box”
I tried this, but no success…
<smart-password-text-box id=”password” class=”outlined left” name=”password” show-password-icon select-all-on-focus placeholder=”Mein Password” tooltip-arrow tooltip-position=”bottom” info-position=”right” info=”Passwort muss mindestends 8 Zeichen enthalten”></smart-password-text-box>
December 23, 2020 at 9:52 am #101265yavordashew
MemberHi AURAGARD,
For this case again I have a neat solution with CSS, its using Font Awesome 5 icons, and you can change the icon by changing the unicode with the unicode for the icon you want.
Quick example: you can see what is the unicode for each icon by going to https://fontawesome.com/ choose an icon and then just copy the unicode for it and place it in the ‘content’ line.
One thing to note is that you need to include a CDN link for Font Awesome 5 in the head tag of your html file:
<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.13.0/css/all.css”>
Also place this code in your CSS file, this snippet is already with info icon but you can replace it with any icon from Font Awesome.
.smart-password-text-box .smart-password-icon:before{
color:#000;
content: ‘\f05a’; /* Change the unicode in this line to switch the icon, but replace the code after the ‘\’ sign */
font-family: ‘Font Awesome 5 Free’;
font-style: normal;
font-weight: 900;
position:absolute;
overflow: visible;
font-size:20px;
z-index: 9;
}
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/December 29, 2020 at 9:04 am #101270AURAGARD
MemberSorry, Yvor, your solution doesn’t work for me. I’m not sure, that I made it clear what I ‘ve meant. According to the example
https://www.htmlelements.com/demos/form/form-web-component/index.htm
I tried to copy the info -button to my simple form but without success!
<pre id=”line1″> <<span class=”start-tag”>form</span> <span class=”attribute-name”>method</span>=”POST” <span class=”attribute-name”>id</span>=”submitForm“>
<span id=”line212″></span> <<span class=”start-tag”>smart-text-box</span> <span class=”attribute-name”>id</span>=”email” <span class=”attribute-name”>class</span>=”outlined left” <span class=”attribute-name”>label</span>=”Benutzer” <span class=”attribute-name”>placeholder</span>=”E-Mail” <span class=”attribute-name”>name</span>=”email” <span class=”attribute-name”>info</span>=”Geben Sie die Email an mit der Sie sich registriert haben!” <span class=”attribute-name”>infoPosition</span>=”right“></<span class=”end-tag”>smart-text-box</span>>
<span id=”line213″></span> <<span class=”start-tag”>label</span> <span class=”attribute-name”>class</span>=”left label_passwd“>Password</<span class=”end-tag”>label</span>>
<span id=”line214″></span> <<span class=”start-tag”>smart-password-text-box</span> <span class=”attribute-name”>id</span>=”password” <span class=”attribute-name”>class</span>=”outlined left” <span class=”attribute-name”>label</span>=”Passwort” <span class=”attribute-name”>name</span>=”password” <span class=”attribute-name”>infoPosition</span>=”right” <span class=”attribute-name”>info</span>=”Passwort muss mindestends 8 Zeichen enthalten” <span class=”attribute-name”>show-password-icon</span> <span class=”attribute-name”>select-all-on-focus</span> <span class=”attribute-name”>placeholder</span>=”Mein Password” <span class=”attribute-name”>tooltip-arrow</span> <span class=”attribute-name”>tooltip-position</span>=”bottom” ></<span class=”end-tag”>smart-password-text-box</span>>
<span id=”line215″></span> <<span class=”start-tag”>smart-button</span> <span class=”attribute-name”>id</span>=”signIn” <span class=”attribute-name”>class</span>=”primary” <span class=”attribute-name”>type</span>=”submit“>Sign In</<span class=”end-tag”>smart-button</span>> <<span class=”start-tag”>br</span>>
<span id=”line223″></span>
<span id=”line224″></span> </<span class=”end-tag”>form</span>>
Whats going wrong?
Thanks in advance!
MarkusDecember 29, 2020 at 9:26 am #101271admin
KeymasterHi Markus,
The example you are pointing out is built with Smart.Form component. If you need to achieve the same, why do not you use the Smart.Form which has this option built-in? The example is included in the download package.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.