show-password-strength

[AURAGARD]

I have to questions concerning the option “show-passord-strength”:
1. tooltip-arrow doesn’t work. Why?
2. how to change the style?
<smart-password-text-box class=”left”  name=”password” show-password-strength  tooltip-arrow select-all-on-focus placeholder=”Your password”   tooltip-position=”bottom” ></smart-password-text-box>

[yavordashew]

Hi AURAGARD,
For your first question regarding the tooltip-arrow, the arrow doesn’t work because this option is deprecated.
For your second question I would suggest to check this demo https://www.htmlelements.com/demos/passwordtextbox/strength-template/ or if u want to change the styles of the tooltip you can access its properties by using its tag name- ‘smart-tooltip’.
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]

Hi Yavor, thanks for your help! I wondering about the strength-meter which will not be shown when I use the outlined class. Does the usage of the “outlined”-class exclude the usage of the strength-meter?
Thanks in advance!
 

[yavordashew]

Hi AURAGARD,
I will take a look at your specific case and will get back to you as soon as possible.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi AURAGARD,
I have come up with a solution for your case.
Add the code below to your CSS file, also note that the code here includes the CSS in case you are using the strength power template.
.smart-input.outlined{
overflow: visible;
}
.smart-input .smart-container{
position: initial;
}
smart-password-text-box {
margin: 50px;
}
.password-strength {
width: auto;
}
.strength-meter {
margin: 5px 5% 0px 5%;
width: 90%;
height: 10px;
border: lightgray solid 1px;
}
smart-password-text-box .strength-meter {
background-clip: content-box;
box-sizing: border-box;
}
smart-password-text-box[show-password-strength] .smart-password-short .strength-meter {
background-color: red;
padding-right: 80%;
}
smart-password-text-box[show-password-strength] .smart-password-weak .strength-meter {
background-color: orange;
padding-right: 60%;
}
smart-password-text-box[show-password-strength] .smart-password-far .strength-meter {
background-color: yellow;
padding-right: 40%;
}
smart-password-text-box[show-password-strength] .smart-password-good .strength-meter {
background-color: deepskyblue;
padding-right: 20%;
}
smart-password-text-box[show-password-strength] .smart-password-strong .strength-meter {
background-color: green;
padding-right: 0%;
}
smart-password-text-box smart-tooltip .smart-tooltip-content {
border-radius: 2px;
}
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]

Great!! Thanks a lot!
Greets, Markus

[Author]

Posts