Use extra bootstrap column if it's content is not visible?

Question

I use asp with bootstrap grid.

Let's say my textbox takes col-x-11 and the required field validator takes col-x-1 (only contains a *) and it's display property is set to "Dynamic" ..

If this validator is not visible, it's column stays occupied. I would like the textbox to occupy this column too, if the validator is not visible.. but if the validator is visible, it takes it's column again.

Is there a way to do this??

Answer 1

One method is to use a CustomValidator and use its ability to specifiy a client function to modify the way that your textbox is displayed.

Markup

<div class="row">
    <div class="col-xs-12"><asp:TextBox ID="txtName" runat="server" CssClass="form-control" /></div>
    <asp:CustomValidator ID="valName" runat="server" Text="*" Display="Dynamic" CssClass="col-xs-1"
        ClientValidationFunction="valName_ClientValidate"
        OnServerValidate="valName_ServerValidate" />
</div>

JavaScript

function valName_ClientValidate(sender, args) {
    var $textbox = $('#<%= txtName.ClientID %>');
    if ($textbox.val() != '') {
        args.IsValid = true;
        $textbox.parent().removeClass('col-xs-11').addClass('col-xs-12');
    } else {
        args.IsValid = false;
        $textbox.parent().removeClass('col-xs-12').addClass('col-xs-11');
    }
}

Note: As you are using Bootstrap, the jQuery library is available.

C#

protected void valName_ServerValidate(object source, ServerValidateEventArgs args)
{
    args.IsValid = !String.IsNullOrEmpty(txtName.Text);
}