How to apply Google Material Design to ASP.NET Controls (i.e. Checkbox, Button and etc)?

Question

I'm trying to apply the Google Material Design to my ASP.NET web form controls. I can easily apply to HTML controls, but no chance with ASP.NET.

Original Page

 <form id="signinform" runat="server" class="form-validation animated fadeIn">
        <div class="container" id="login-block">
        <div class="row">
            <div class="col-sm-6 col-md-4 col-md-offset-4">
                <div class="account-wall">
                    <img class="user-img animated fadeIn" src="/Assets/global/images/logo/logo_white.png" />
                    <asp:PlaceHolder runat="server" ID="ErrorMessage" Visible="false">
                        <p class="text-danger">
                            <asp:Literal runat="server" ID="FailureText" />
                        </p>
                    </asp:PlaceHolder>
                    <div class="form-signup">
                        <div class="prepend-icon m-b-5">
                            <asp:TextBox runat="server" ID="username" CssClass="form-control form-white username" placeholder="Username" />
                            <asp:RequiredFieldValidator runat="server" ControlToValidate="username" Display="Dynamic" CssClass="text-danger m-b-0" ErrorMessage="The username field is required." />
                            <i class="icon-user"></i>
                        </div>
                        <div class="prepend-icon">
                            <asp:TextBox runat="server" ID="Password" TextMode="Password" CssClass="form-control form-white password" placeholder="Password" />
                            <asp:RequiredFieldValidator runat="server" ControlToValidate="Password" Display="Dynamic" CssClass="text-danger m-b-0" ErrorMessage="The password field is required." />
                            <i class="icon-lock"></i>
                        </div>
                        <div class="checkbox checkbox-material-grey">
                            <asp:CheckBox runat="server" ID="RememberMe" CssClass="md-checkbox" />
                            <asp:Label runat="server" CssClass="c-white normal f-11 m-b-15" AssociatedControlID="RememberMe">Remember me?</asp:Label>
                        </div>  
                    </div>
                    <div class="checkbox checkbox-material-grey">
                        <label class="c-white normal f-11 m-b-15">
                            <input type="checkbox" runat="server" name="remembercb" value="option1" class="md-checkbox">
                            Remember me?
                        </label>
                    </div>
                    <asp:Button runat="server" OnClick="LogIn" Text="Login" CssClass="btn btn-embossed btn-danger btn-block" />
                    <asp:Button runat="server" ID="ResendConfirm" OnClick="SendEmailConfirmationToken" Text="Resend confirmation" Visible="false" CssClass="btn btn-default" />
                    <p>
                        <asp:HyperLink runat="server" ID="RegisterHyperLink" ViewStateMode="Disabled">Register as a new user</asp:HyperLink>
                    </p>
                    <p>
                        <asp:HyperLink runat="server" ID="ForgotPasswordHyperLink" ViewStateMode="Disabled">Forgot your password?</asp:HyperLink>
                    </p>
                </div>
            </div>
        </div>
    </div>
</form>

HTML Control

<div class="checkbox checkbox-material-grey">
    <label class="c-white normal f-11 m-b-15">
        <input type="checkbox" runat="server" name="remembercb" value="option1" class="md-checkbox">
        Remember me?
    </label>
</div>

ASP.Net Control

<div class="checkbox checkbox-material-grey">
    <asp:CheckBox runat="server" ID="RememberMe" CssClass="md-checkbox" />
    <asp:Label runat="server" CssClass="c-white normal f-11 m-b-15" AssociatedControlID="RememberMe">Remember me?</asp:Label>
</div>

Is there any way to use Material Design with ASP.NET controls?

Are you able to apply other (read: custom) CSS classes to your controls? — TylerH, Aug 03 '15 at 15:07
Do you mean Bootstrap? I can easily apply bootstrap or any custom class to my controls. — Kevin Maxwell, Aug 03 '15 at 15:10
I meant any CSS class in general, like `.container` or `.topnav` or something. If other classes are being applied, then the Material Design classes should be applied, too, which means there's something else causing the problem (not importing the MD CSS file properly, maybe). — TylerH, Aug 03 '15 at 15:23
i'm not familiar with ASP, but it probably has to do with how the final HTML gets rendered. — Woodrow Barlow, Aug 03 '15 at 15:25

score 1 · Accepted Answer · answered Aug 04 '15 at 13:32

I would have tweaked the ASP.NET markup a bit, and dropped the <asp:Checkbox /> in favor for a <input type="checkbox" runat="server" ... /> so that the markup would be rendered as you've specified in the HTML Control paragraph.

<div class="checkbox checkbox-material-grey">
        <asp:Label ID="lblRememberMe" runat="server" CssClass="c-white normal f-11 m-b-15" AssociatedControlID="cbRememberMe">
            <input type="checkbox" runat="server" id="cbRememberMe" class="md-checkbox"  />
            Remember me ?
        </asp:Label>
    </div>

Both label and checkbox elements would be accessible from code behind, since they have the runat="server" attribute.

My guess here is that webforms renders some elements wrapped inside others, and that violates the structure that the CSS framework expects.

How to apply Google Material Design to ASP.NET Controls (i.e. Checkbox, Button and etc)?

Original Page

HTML Control

ASP.Net Control

1 Answers1

Linked