CODEWITHSUNDEEP
c#asp.netlayoutcheckboxalignment
daniel
daniel

Reputation: 35693

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

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

enter image description here

Upvotes: 1

Views: 22452

Answers (7)

KillemAll
KillemAll

Reputation: 701

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;
}

Upvotes: 2

Audreth
Audreth

Reputation: 67

this worked for me:

label {
        display: inline !important;
      }

Upvotes: 1

Orc7
Orc7

Reputation: 21

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>

Upvotes: 2

a.a
a.a

Reputation: 11

Thank you so much for this. I was stuck with this problem for the longest time! The problem occurs for both checkboxes as well as radiobuttons.

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;
}

Upvotes: 1

cafecoder905
cafecoder905

Reputation: 51

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.

Upvotes: 5

Tomas Voracek
Tomas Voracek

Reputation: 5914

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...

Upvotes: 0

Darren Wainwright
Darren Wainwright

Reputation: 30727

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.

Upvotes: 1

Related Questions