ASP:Repeater and embedded radiobuttons (cont.)

Question

This is a continuation of the partially resolved issue posted here: ASP:Repeater and embedded radiobuttons

I'm now trying to format the display of my photos so that they still run horizontally, but the radiobutton appears directly beneath each photo. By default, they appear to the right of the photo when using my current code:

<asp:Repeater ID="repPhotos" runat="server">
  <ItemTemplate>
    <asp:hyperlink id="link" NavigateUrl='<%# Container.DataItem %>' runat="server">
        <asp:Image ID="Image" runat="server" ImageUrl='<%# Container.DataItem %>' Height="10%" Width="10%" />
    </asp:hyperlink>
    <asp:RadioButton runat="server" ID="rbPhoto" CssClass="myRadioButton" onclick="radioButtonClick(this)" />
  </ItemTemplate>
</asp:Repeater>

It was later suggested that I wrap my RadioButton control with <p> tags as follows:

<asp:Repeater ID="repPhotos" runat="server">
  <ItemTemplate>
    <asp:hyperlink id="link" NavigateUrl='<%# Container.DataItem %>' runat="server">
        <asp:Image ID="Image" runat="server" ImageUrl='<%# Container.DataItem %>' Height="10%" Width="10%" />
    </asp:hyperlink>
    <p>
        <asp:RadioButton runat="server" ID="rbPhoto" CssClass="myRadioButton" onclick="radioButtonClick(this)" />
    </p>
 </ItemTemplate>
</asp:Repeater>

But this just made all of the photos display vertically. Here's what the before and after output look like...

Rob C · Answer 1 · 2016-10-19T14:48:26.353

0

The <p> wrapping the radio buttons will be displaying as a block element hence the reason your images are appearing vertically.

This HTML/CSS should do the trick and you can tweak the margin as desired:

<style type="text/css">
    .photoContainer {float: left; margin: 10px; width:200px;}
    .radioButton {text-align: center;}
</style>
<asp:Repeater ID="repPhotos" runat="server">
    <ItemTemplate>
        <div class="photoContainer">
            <asp:HyperLink ID="link" NavigateUrl='<%# Container.DataItem %>' runat="server">
                <asp:Image ID="Image" runat="server" ImageUrl='<%# Container.DataItem %>' Height="10%" Width="10%" />
            </asp:HyperLink>
            <div class="radioButton">
                <asp:RadioButton runat="server" ID="rbPhoto" CssClass="myRadioButton" onclick="radioButtonClick(this)" />
            </div>
        </div>
    </ItemTemplate>
</asp:Repeater>

edited Oct 19 '16 at 14:48

answered Oct 17 '16 at 13:15

Rob C

818
1
12
26

This didn't give me the effect I was shooting for. See output: http://libersys.net/public/repeater_photos_radiobuttons.png – PongGod Oct 19 '16 at 02:57
Ah ok - I have added a width on the photocontainer element - see updated css in answer – Rob C Oct 19 '16 at 14:48
The problem with this is that since I'm specifying 10% for my Height and Width on the Image tag, now the images look very tiny, apparently taking up only 10% of the 200px width specified by the container div. – PongGod Oct 19 '16 at 19:56
Ok, then if you are going for responsive images you should set a % width on the container div. try width:25% -just experiment til you have the desired size. – Rob C Oct 20 '16 at 11:11

ASP:Repeater and embedded radiobuttons (cont.)

1 Answers1

Linked