Link to home
Start Free TrialLog in
Avatar of Brian
BrianFlag for United States of America

asked on

Add space between CheckBoxList and text value

Hello Experts,

I have the following ASP.NET CheckBoxList Control below that retrieves data from the database. That part works fine. The problem that I'm facing is that I need to add padding if you will to create space between the CheckBox and the value retrieved for the CheckBox so that the text is not right up against the CheckBox.

This is what I currently have now for my CheckBoxList Control and the current CSS that I'm using for it.

Markup:
<asp:CheckBoxList ID="cblFinancialAssistanceValues" RepeatDirection="Horizontal" TextAlign="Right" RepeatLayout="Flow" Width="500" RepeatColumns="1" CssClass="checkboxlist" runat="server"></asp:CheckBoxList>

Open in new window


CSS:
section#formitems .checkboxlist {
        font: inherit;
        font-size: 0.875em; /* 14px / 16px */
        color: #494949;
        margin-bottom: 12px;
        margin-top: 5px;
        margin-left: 10px;
    }

Open in new window

Avatar of samtran0331
samtran0331
Flag of United States of America image

Try this

    .checkboxlist input {
            font: inherit;
            font-size: 0.875em; /* 14px / 16px */
            color: #494949;
            margin-bottom: 12px;
            margin-top: 5px;
            margin-right: 20px !important;
    }

       <asp:CheckBoxList ID="cblFinancialAssistanceValues" RepeatDirection="Horizontal" 
            RepeatLayout="Table" Width="500" RepeatColumns="1" CssClass="checkboxlist" runat="server">
            <asp:ListItem Text="Test1" Value="1"></asp:ListItem>
            <asp:ListItem Text="Test2" Value="2"></asp:ListItem>
            <asp:ListItem Text="Test3" Value="3"></asp:ListItem>
        </asp:CheckBoxList>

Open in new window

Notice
I removed:  "section#formitems"
Added: "INPUT"
Changed: margin-left to margin-right
pushed the space between the checkbox and its text out to 20px (so you see it works)
removed the textalign from the CheckBoxList

tested working in Chrome

...the way you had it, it seems like you wanted the css to affect the text

the way I have it, (by adding INPUT to the CSS) the style affects the checkbox

HTH!
Avatar of Brian

ASKER

Yes, did work but now my text formatting is not there like before.
Gotcha.
The checkboxlist gets split into 2 different, controllable styles.

Play with this until it looks the way you want
	.checkboxlist input {
			margin-bottom: 12px;
			margin-top: 5px;
			margin-right: 20px !important;
	}
	.checkboxlist label {
			color: #ff6a00  !important;
			margin-top: 5px;
			margin-bottom: 12px;
	}

Open in new window

Here's my full test page.
The margins and colors are exaggerated so I can test.

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="CheckboxListSpacing.aspx.vb" Inherits="WebApp.CheckboxListSpacing" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
	body,td,th {
	    font-family: Verdana, Geneva, sans-serif;
	    font-size: 22px;
	}
	.checkboxlist input {
        margin-bottom: 25px;
        margin-top: 25px;
        margin-right: 20px !important;
	}
	.checkboxlist label {
        font-family: 'Times New Roman';
        margin-bottom: 25px;
        margin-top: 25px;
        color: #ff6a00  !important;
	}

	</style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            Page Text

		<asp:CheckBoxList ID="cblFinancialAssistanceValues" RepeatDirection="Horizontal"
            RepeatLayout="Table" Width="500" RepeatColumns="1" CssClass="checkboxlist" runat="server">
            <asp:ListItem Text="Test1" Value="1"></asp:ListItem>
            <asp:ListItem Text="Test2" Value="2"></asp:ListItem>
            <asp:ListItem Text="Test3" Value="3"></asp:ListItem>
        </asp:CheckBoxList>
        </div>
    </form>
</body>
</html>

Open in new window

Avatar of Brian

ASKER

@samtran0331,

Ok, that modified the format of the text values for the CheckBoxLists. But the formating of everything looks junky. I have attached a screenshot with what it looks like. How can I make this look more professtional?

User generated image
Below is the CSS that I'm using that you helped me out with.

    section#formitems .checkboxlist input {
        font: inherit;
        font-size: 0.875em; /* 14px / 16px */
        color: #494949;
        margin-bottom: 12px;
        margin-right: 6px !important;
    }
    section#formitems .checkboxlist label {
        font: inherit;
        font-size: 0.875em; /* 14px / 16px */
        color: #494949;
        margin-bottom: 25px;
        margin-top: 25px;
    }

Open in new window

That's all one checkbox list?

Can you post your html?

Curious as to:
What is creating that gray box.  Is it a asp.net container? plain ol' div? etc.

Maybe a larger screen shot of the overall page too?

"Look more professional" is pretty subjective...trying to get a feel for the overall look you have.
Is your checkboxlist databound or are the listitems hardcoded?
Avatar of Brian

ASKER

Hi samtran0331,

Below is the markup for my CheckBoxList:
<asp:CheckBoxList ID="cblFinancialAssistanceValues" RepeatDirection="Horizontal" RepeatLayout="Flow" Width="500" RepeatColumns="1" CssClass="checkboxlist" runat="server"></asp:CheckBoxList><br />

Open in new window


>> Curious as to: What is creating that gray box.  Is it a asp.net container? plain ol' div? etc
That is how EE added my image. If you click on the actual image that I added you will see the original image without the grey border.

>> "Look more professional" is pretty subjective...trying to get a feel for the overall look you have.
Yeah, I know it's up to the designer but was wondering your opinion on how to best display the values. Should I indent them from the question?

>> Is your checkboxlist databound or are the listitems hardcoded?
DataBound
ASKER CERTIFIED SOLUTION
Avatar of samtran0331
samtran0331
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial