ASP.NET Checkbox Text not aligned right or left to the Checkbox

Question

In the new Visual Studio 2012 Webforms Templates all my ASP.NET Checkboxes and Radiobuttons have the Text on top or on bottom.

Is the intended!? How can i align the text right as it always was? I tried disable theming and set the cssclass to checkbox but nothing changed.

Solution found : I researched the html in firebug and it seems that the default Microsoft CSS is broken(!) label { display: block; } causes the wrong aligment

Answer 1

I encountered the same issue.

My ASP.NET Web Forms project was created using VS2012 and uses the default templates and stylesheets that were added. The issue exists on a new page/form that I created. My form controls happen to reside in TABLE cells. Here is what I did to work around the issue:

• Created a new stylesheet called CoreFrameworkTweaks.css that contains this code:

  .checkbox label { display: inline; margin-left: 3px; font-size: 1.0em; }

• Referenced the new stylesheet in my master page * AFTER * Site.css gets pulled in

• Ensured all controls in my form were wrapped with <fieldset></fieldset>

• Added the CssClass="checkbox" parameter to my checkbox control

Issue fixed.

Answer 2

In the style.css file go and search for:

label {
    display: block;
    font-size: 1.2em;
    font-weight: 600;
}

then replace it with:

label {
    font-size: 1.2em;
}

Answer 3

Site.css has code:

fieldset.login label, fieldset.register label, fieldset.changePassword label
{
    display:  block;
}

fieldset label.inline
{
    display: inline;
}

you need find Checkbox in Login.aspx and add CssClass="inline" to Label

<asp:CheckBox ID="RememberMe" runat="server" EnableTheming="True" />
<asp:Label ID="RememberMeLabel" runat="server" AssociatedControlID="RememberMe" 
    CssClass="inline">RememberMe</asp:Label>

Answer 4

there is a TextAlign property on them. You can set it here.

If this doesn't make any difference then you must have some CSS causing the issue.

Answer 5

Thank you so much for this. I was stuck with this problem for the longest time! The problem occurs for 出现问题

All you need to do is find site.css in folder Content. Find the following:

label {
    display: block;
    font-size: 1.2em;
    font-weight: 600;
}

and replace it with

label {
    /*display: block;*/
    font-size: 1.2em;
    font-weight: 600;
}

Answer 6

this worked for me:

label {
        display: inline !important;
      }

Answer 7

It is styling issue. Maybe the page viewport is too small and that results in what you see.

If setting properties in asp.net does not help, then it can definitely be solved by css. After all, output is good old html...