• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 571
  • Last Modified:

i want to right align the checkboxes in a checkboxlist control

I want to display data from a database in a checkboxlist so that the checkboxes are on the right of the checkbox label, and aligned one below the next, like this:

value 1                "checkbox icon"
value 2                "checkbox icon"


value n                "checkbox icon"

Is there a way to do this with the checkboxlist control? or do i have to use a datalist or repeater? I can't find where i can use a template to set up a table to put the two items (value, icon) into (using the checkboxlist control).

Thanks
Mark
0
freedom22
Asked:
freedom22
  • 4
  • 3
1 Solution
 
noamattdCommented:
You can do this very easily by setting the "TextAlign" property to "Left".  If you're using Visual Studio, it's under the "Appearance" section of the properties.  Or you can just put it in your aspx code:

<asp:CheckBoxList id="cbl" runat="server" TextAlign="Left"></asp:CheckBoxList>

You can then use the cellspacing/cellpadding properties to space out your checkboxes and text (the list renders as a table).
0
 
freedom22Author Commented:
Hi noamattd,

I have used the textAlign="Left" successfully, but I have not had success with getting the checkboxes to align correctly using the cellspacing/cellpadding properties. Can I get at the table tags, e.g., <td> to set the width of the columns so that I can get the checkboxes to align? I can't see where I have access to the table tags, or the ItemTemplate, if it is allowed in the checkboxlist control.

Thanks
Mark
0
 
noamattdCommented:
When you say align the checkboxes, do you mean vertically or horizontally?  You should be able to separate your labels from the checkboxes by increasing the cellpadding.  If you need more fine-grained control, you can use CSS.  Something like this:

.chkList tbody tr td { } /* gives you access to the td elements */
.chkList tbody tr td input {} /* access to the checkboxes */


0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
freedom22Author Commented:
What i would like is for the checkboxes themselves to be aligned exactly one below the other - right justified to the right margin. and the labels for the checboxes to be left justified to the left margin, something like this:

Label1                                                                                     checkbox
Label2                                                                                     checkbox

etc.

It seems easy when the checkboxes are on the left of the labels, because then all the checkboxes line up one below each other. It is not as clear to me when you want the checkboxes on the right.

Thanks
Mark
0
 
noamattdCommented:
Ok, I gotcha.  Very easy to do.  Add this to the "head" section of your ASPX page (replace YOURCBLID with the ID of your CheckBoxList:

<style type="text/css">
   table#YOURCBLID tr td label { float:left; }  // you may add other styles for font etc
   table#YOURCBLID tr td input { float:right; }
</style>

That should do it.
0
 
freedom22Author Commented:
Thanks, I will give that a try. Are the 'label' tag and the 'input' tag in your above css rules already defined in the checkboxlist control, or do i have to add them? Also do i need any of the code you sent in earlier comments, or do i just put the statements you just sent into the header, and add the checkboxlist control to the page? It seems there is a chunk of code I'm missing somewhere. (I'm new at vwd as you can tell :) )

Mark
0
 
noamattdCommented:
input and label are the names of html elements, they're already defined in the checkboxlist tables.  
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now