JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Text Boxes & Inputs › show-password-strength
- This topic has 5 replies, 2 voices, and was last updated 3 years, 8 months ago by
AURAGARD.
-
AuthorPosts
-
December 19, 2020 at 3:12 pm #101247
AURAGARD
MemberI 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>December 21, 2020 at 12:18 pm #101250yavordashew
MemberHi 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/December 22, 2020 at 10:29 am #101254AURAGARD
MemberHi 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!
December 22, 2020 at 12:57 pm #101257yavordashew
MemberHi 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/December 22, 2020 at 2:30 pm #101258yavordashew
MemberHi 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/December 22, 2020 at 4:41 pm #101259AURAGARD
MemberGreat!! Thanks a lot!
Greets, Markus -
AuthorPosts
- You must be logged in to reply to this topic.