My products are shown in thumbnails and since these thumbnails have different height, I'd like to be able to vertically align each cell of the table to the top. I tried to add the attribute to the "text" CssClass or add
And I'm wondering how I can control the vertical alignment of the those <td> tags to the top, so that even with different heights of the thumbnails, the radio buttons still will be aligned nicely on the top?
Hi, thanks for the advice, but that didn't work because the problem is with the alignment of the <td> tag, and not the <img> tag. So I need to find a way to specify the vertical alignment of each cell of the table which is rendered
from the RadioButtonList.
The only difference I see when I try it is that within the <td> tags, a <span> tag is added and it is there that the above attributes are added. I think that should still suffice.
I have tried this too. But what happened was that it would just add a <span> tag and assign the "valign" property to this <span> tag, with no changes to the <td> tag what so ever. Each cell will become something like this:
You obviously have something very specific in mind when it comes to aligning your radiobuttons. Since you're not really making it clear, can you take a time out and describe exactly what it is that you want to achieve? Specifically, since you are using images
along with the actual radiobutton, what should the final rendering look like when it comes to both these elements? Perhaps then I can help you with this matter, if at all possible.
ywb
Member
142 Points
80 Posts
Vertical Alignment of RadioButtonList
Feb 17, 2006 09:28 PM|LINK
Hi,
I have a RadioButtonList that display a table of my products like so:
<asp:RadioButtonList ID="RblProducts" runat="server" CssClass="text" RepeatColumns="4" RepeatDirection="Horizontal" />
My products are shown in thumbnails and since these thumbnails have different height, I'd like to be able to vertically align each cell of the table to the top. I tried to add the attribute to the "text" CssClass or add
style="vertical-align: top;"
to the RadioButtonList but they don't work.
What can I do?
ywb.
jcasp
Star
11540 Points
2286 Posts
Re: Vertical Alignment of RadioButtonList
Feb 18, 2006 01:12 AM|LINK
ywb
Member
142 Points
80 Posts
Re: Vertical Alignment of RadioButtonList
Feb 20, 2006 03:40 PM|LINK
Ok, basically I list my products in a RadioButtonList, for my user to select one of them.
<asp:RadioButtonList ID="RblProducts" runat="server" CssClass="text" RepeatColumns="4" RepeatDirection="Horizontal" />
And I populate thumbnail images of my products into the RadioButtonList like so:
foreach (DataRow productRow in products.Tables[0].Rows)
{
itemText = "<img src=\"" + productRow["thumbnailFile"].ToString() + "\" />;
itemValue = productRow["productID"].ToString();
listItem = new System.Web.UI.WebControls.ListItem(itemText, itemValue);
RblProducts.Items.Add(listItem);
}
The HTML rendered into something like this:
<table id="ctl00_CphMain_RblProducts">
<tr>
<td>
<input id="ctl00_CphMain_RblProducts_0" type="radio" name="ctl00$CphMain$RblProducts" value="81" />
<label for="ctl00_CphMain_RblProducts_0">
<img src="productA.jpg" />
</label>
</td>
</tr>
<tr>
<td>
<input id="ctl00_CphMain_RblProducts_1" type="radio" name="ctl00$CphMain$RblProducts" value="82" />
<label for="ctl00_CphMain_RblProducts_0">
<img src="productB.jpg" />
</label>
</td>
</tr>
</table>
And I'm wondering how I can control the vertical alignment of the those <td> tags to the top, so that even with different heights of the thumbnails, the radio buttons still will be aligned nicely on the top?
jcasp
Star
11540 Points
2286 Posts
Re: Vertical Alignment of RadioButtonList
Feb 20, 2006 05:06 PM|LINK
<img src="..." align="absmiddle" />
You may want to play around with different values for the align attribute to make sure it looks okay for you.
ywb
Member
142 Points
80 Posts
Re: Vertical Alignment of RadioButtonList
Feb 20, 2006 06:49 PM|LINK
Hi, thanks for the advice, but that didn't work because the problem is with the alignment of the <td> tag, and not the <img> tag. So I need to find a way to specify the vertical alignment of each cell of the table which is rendered from the RadioButtonList.
NC01
All-Star
82577 Points
15430 Posts
MVP
Re: Vertical Alignment of RadioButtonList
Feb 20, 2006 07:36 PM|LINK
To get at the <td> tag, you'll have to use JavaScript. I posted this for a CheckBoxList, but it should work as well for a RadioButtonList:
http://forums.asp.net/1202770/ShowPost.aspx
NC...
jcasp
Star
11540 Points
2286 Posts
Re: Vertical Alignment of RadioButtonList
Feb 20, 2006 07:48 PM|LINK
protected void RadioButtonList1_PreRender(object sender, EventArgs e)
{
foreach (ListItem item in RadioButtonList1.Items)
{
item.Attributes.Add("align", "left");
item.Attributes.Add("valign", "top");
}
}
The only difference I see when I try it is that within the <td> tags, a <span> tag is added and it is there that the above attributes are added. I think that should still suffice.
ywb
Member
142 Points
80 Posts
Re: Vertical Alignment of RadioButtonList
Feb 20, 2006 08:00 PM|LINK
I have tried this too. But what happened was that it would just add a <span> tag and assign the "valign" property to this <span> tag, with no changes to the <td> tag what so ever. Each cell will become something like this:
<td>
<span valign="top">
<input id="ctl00_CphMain_RblProducts_0" type="radio" name="ctl00$CphMain$RblProducts" value="81" />
<label for="ctl00_CphMain_RblProducts_0">
<img src="productA.jpg" />
</label>
</span>
</td>
So at the end my radio-buttons are still not aligned...
jcasp
Star
11540 Points
2286 Posts
Re: Vertical Alignment of RadioButtonList
Feb 20, 2006 08:45 PM|LINK
ywb
Member
142 Points
80 Posts
Re: Vertical Alignment of RadioButtonList
Feb 20, 2006 09:56 PM|LINK
Hi,
My apologies. I thought I had made it clear.
Acutally what I'd like to do is just to have each entry in the RadioButtonList rendered like this:
<td valign="top">
<input id="ctl00_CphMain_RblProducts_0" type="radio" name="ctl00$CphMain$RblProducts" value="81" />
<label for="ctl00_CphMain_RblProducts_0">
<img src="productA.jpg" />
</label>
</td>
Instead of like this:
<td>
<input id="ctl00_CphMain_RblProducts_0" type="radio" name="ctl00$CphMain$RblProducts" value="81" />
<label for="ctl00_CphMain_RblProducts_0">
<img src="productA.jpg" />
</label>
</td>
So the ONLY thing I'd like to achieve is to be able to insert the "valign" attribute into each <td> tag rendered...
Any suggestion?
ywb.