JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Text Boxes & Inputs › info-button on smart -passord-text- box

Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 22, 2020 at 8:58 pm #101260
    AURAGARD
    Member

    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>
     
     
     

    December 23, 2020 at 9:52 am #101265
    yavordashew
    Member

    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/

    December 29, 2020 at 9:04 am #101270
    AURAGARD
    Member

    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.htminfo utton to text box
    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

    December 29, 2020 at 9:26 am #101271
    admin
    Keymaster

    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
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.