RadTextBox PasswordStrengthSettings Bootstrap

[Guss]

Hi All
For those who use your Telerik Controls with a the rest of you framework in Bootstrap, like me, you would know that there is a lot finer css tweaks to be performed so that everything is pixel perfect the same (like mixing and matching telerik controls, with asp.net controls, with plain html controls). I usually end up with an overide.css (hack-fix-telerik's-bootstrap-to-match-bootstrap), taking me the bulk of my GUI design time.

Recently, I decided to use the password strength checker which is part of the RadTextBox control, but I did not like how the indicator is just a piece of text next to the inputbox. It anyhow is has bugs, e.g. there is a padding-right of 100px (to allow for the indicator, but if you set the indicator to be i.e. 75px wide, this padding stays 100px, causing the whole control to be 25px narrower than it should be. This is just to mention 1 issue.

In bootstrap we have input-groups:

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

This created a lovely area next to the input box as if its part of the input box (rounded corner removed where the 2 controls side touches, etc). 

If you want perfect looking BS GUI, then this is how the password strength indicator should be display.
So here is some CSS for you to start with (I'm not saying its perfect, but at least it will save you 2 hour of reverse engineering and testing css to get it to look like a bootstap input group add-on.

1.<style type="text/css">
2.    .riPassIndicator { padding-right: 0px !important; display: table; }
3.    .riPassIndicator .riTextBox { border-top-right-radius: unset; border-bottom-right-radius: unset; border-right: none; }
4.    .riStrengthBar { display: table-cell; padding: 6px 5px; font-size: 12px !important; line-height: 14px !important; background-color: #eee; border: 1px solid #ccc; border-radius: 4px; border-top-left-radius: unset; border-bottom-left-radius: unset; background-image: none !important; }
5.    .riStrengthBarL5, .riStrengthBarL4 { color: #3c763d; background-color: #dff0d8; border-color: #3c763d; }
6.    .riStrengthBarL3, .riStrengthBarL2 { color: #8a6d3b; background-color: #fcf8e3; border-color: #8a6d3b; }
7.    .riStrengthBarL1 { color: #a94442; background-color: #f2dede; border-color: #a94442; }
8.</style>

You matching html will be something like this:

<div class="form-group">
    <label class="col-sm-3 col-md-2 control-label" for="form-group-input">Password</label>
    <div class="col-sm-4 col-md-3">
        <telerik:RadTextBox ID="txtPassword" runat="server" RenderMode="Lightweight" CssClass="form-control mandatory" TextMode="Password" Width="100%" PasswordStrengthSettings-IndicatorWidth="75px">
        <PasswordStrengthSettings ShowIndicator="true" IndicatorWidth="75px"></PasswordStrengthSettings>
        </telerik:RadTextBox>
    </div>
</div>

If you followed Bootstrap patterns, then this form-group should be inside a

<div class="form-horizontal">
...
</div>

For the re-type-your-password, use the client side code as per Telerik examples (demo page) and use an actual Bootstrap input group. Like this:

<div class="form-group">
    <label class="col-sm-3 col-md-2 control-label" for="form-group-input">Repeat Pwd</label>
    <div class="col-sm-4 col-md-3">
    <div class="input-group">
        <telerik:RadTextBox ID="txtPassword2" runat="server" RenderMode="Lightweight" CssClass="form-control mandatory" TextMode="Password" Width="100%">
        </telerik:RadTextBox>
        <span id="PasswordRepeatedIndicator" class="input-group-addon" style="width:75px"></span>
        </div>
    </div>
</div>

NOW, both look exactly the same, and like bootstrap input group add-ons.

PS: from my code pasted above, there are some tweaks still to do, or which you can ignore.

1. I have a style in there called mandatory. You can ignore this. I style mandatory input boxes with a 3px red left border and then adjust the input box's left padding with -3px, so that it all still left align.
2. The hard-coded style of 75px, should go to my css classes.
3. I made the text inside the password strength indicator 12px, so that it is smaller than the rest of the input fonts and that the indicator does not eat up so much horizontal width on my form.
4. Important: .riPassIndicator > display: table; and .riStrengthBar > display: table-cell; is the main css tricks that help you create less css. Without that, you will have to set paddings, margins, and other conditions till you crazy :-)

Enjoy

[Konstantin Dikov]

Hello Guss,

As a token of gratitude for sharing your implementation with the community, you will find your Telerik Points updated.

In regards of the minor differences, if you have some suggestions for improving the appearance of the Bootstrap skin of the controls, you can log a feature request in our public feedback portal and list the things that you need to be changes:

• http://feedback.telerik.com/Project/108

Once again, thank you for sharing.


Regards,
Konstantin Dikov
Telerik by Progress