info-button on smart -passord-text- box

[AURAGARD]

Hi,
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>
 
 
 

[yavordashew]

Hi 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”&gt;
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/

[AURAGARD]

Sorry, 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!
Markus

[admin]

Hi 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/

[Author]

Posts