Reply To: show-password-strength

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