CODEWITHSUNDEEP
c#asp.netcss
user1266515
user1266515

Reputation: 796

Aligning controls inside of an item template of a repeater control?

I have a repeater control with an Image and a hyperlink one below the other. Everytime I add more than one line of text the text pushes the imahe control up. I wan the top of the images to be aligned horizontally and the text to continue downward if there is more than a line of text. please advise.

Alignment error

Here is the ascx code I have used:

<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0"> 
<asp:View ID="View1" runat="server"> 

<asp:UpdatePanel ID="UpdatePanelAnnouncements" runat="server"  UpdateMode="Conditional">
<ContentTemplate>

<table>
<tr>
    <asp:Repeater ID="repAnnouncements" runat="server">
        <ItemTemplate>
            <td style="padding-right:19px; padding-top:1px; padding-left:7px;">
                <asp:HiddenField ID="ItemID" Value='<%#Eval("ID") %>' runat="server" />
                <asp:HyperLink ID="hypImageEditLink" runat="server">

                <div class="ImageStyle" >
                <asp:Image ID="imgLink" Height="110px" Width="150px" runat="server" ImageUrl='<%#Eval("Images")%>' CssClass ="magnify"/>
                </div>

                </asp:HyperLink>
                <br/><br/>
                <div id="div3" class="Div3"><asp:HyperLink ID="hypTextEditLink" runat="server" Text='<%#Eval("Title")%>' CssClass="TitleStyle"/></div>
            </td>
        </ItemTemplate>
    </asp:Repeater>
 </tr>
</table>

</ContentTemplate>
</asp:UpdatePanel>
</asp:View>

And here is the style sheet:

.div3
{
  width: 150px !important; 
  display:inline !important;  
  /*display: -moz-inline-box !important; 
  display: inline-block !important; */
  float:left !important;
}

 .ImageStyle
 {
   margin-left:8px;
   /* Width:150px !important; Height:110px !important;
   box-shadow: 0px 0.5px 35px 15px #888888;*/
   border-collapse: separate !important;
   box-shadow: 0px 0.5px 11px 4px #888888;
  /*box-shadow:  0px 0.5px 11px 4px rgb(150,150,150);*/
 }

  .ImageStyle:hover
    {
      opacity:0.5 !important;
      filter: alpha(opacity=50) !important;
      border-color:blue !important;
      border-width:thick !important;

     }

Upvotes: 0

Views: 5711

Answers (1)

Spencer Ruport
Spencer Ruport

Reputation: 35117

As I understand your question, when there is a lot of text underneath a picture it causes the rest of the pictures to align themselves vertically in the middle of their cells. To resolve this alter your TD tag to the following:

<td style="vertical-align: top; padding-right:19px; padding-top:1px; padding-left:7px;">

Upvotes: 3

Related Questions