向 RadTextBox 添加密码强度指示器会截断宽度

Posted 2023-03-06

【中文标题】向 RadTextBox 添加密码强度指示器会截断宽度

【英文标题】：Adding password strength indicator to RadTextBox truncates the width

【发布时间】：2013-09-22 23:51:20

【问题描述】：

我需要将 Telerik 密码强度检查器添加到密码字段（Telerik RadTextBox）中，但是当我这样做时，它会将宽度限制为 60 像素，我看不到任何原因。

RadTextBox 代码如下所示：

<telerik:RadTextBox TextMode="Password" ID="rtb_NewPassword" 
    CssClass="RegisterTextbox" style="width:150px;" Runat="server" 
    LabelWidth="160px" Wrap="False">
</telerik:RadTextBox>

所以当我添加强度检查器时，它看起来像这样：

<telerik:RadTextBox TextMode="Password" ID="rtb_NewPassword" 
    CssClass="RegisterTextbox" style="width:150px;" Runat="server" 
    LabelWidth="160px" Wrap="False">
    <PasswordStrengthSettings ShowIndicator="true" PreferredPasswordLength="6"
        MinimumNumericCharacters="1" MinimumUpperCaseCharacters="1"
        MinimumLowerCaseCharacters="1" CalculationWeightings="50;15;15;20"
        IndicatorElementID="spn_StrengthIndicator"></PasswordStrengthSettings>
</telerik:RadTextBox>

渲染出来的html如下：

没有强度检查器：

<span id="ExternalLogin_rtb_NewPassword_wrapper" class="riSingle RadInput
    RadInput_Glow" style="width:160px;">
    <input id="ExternalLogin_rtb_NewPassword" name="ExternalLogin$rtb_NewPassword"
        size="20" class="riTextBox riEnabled RegisterTextbox" type="password" />
    <input id="ExternalLogin_rtb_NewPassword_ClientState"
        name="ExternalLogin_rtb_NewPassword_ClientState" type="hidden" />
</span>

使用强度检查器：（注意带有60px 宽度的跨度）

<span id="ExternalLogin_rtb_NewPassword_wrapper" class="riSingle RadInput
    RadInput_Glow" style="width:160px;">
    <span class="riContentWrapper" style="width:60px;">
        <input id="ExternalLogin_rtb_NewPassword" name="ExternalLogin$rtb_NewPassword"
            size="20" class="riTextBox riEnabled RegisterTextbox" type="password" />
        <input id="ExternalLogin_rtb_NewPassword_ClientState"
            name="ExternalLogin_rtb_NewPassword_ClientState" type="hidden" />
    </span>
</span>

我看不到定义它的代码或属性中的任何地方。它只在页面构建时出现。

有没有办法阻止这种情况发生？

谢谢

【参考方案1】：

我想通了。

我需要将 EnableSingleInputRendering 属性更改为 False。

真的很明显！ （不）

【参考方案2】：

尝试使用 CSS 覆盖

.riContentWrapper

width:100px !important;