CODEWITHSUNDEEP
c#cssasp.net
Dan Nick
Dan Nick

Reputation: 426

CSS Not formatting inside repeater

I am trying to use css inside repeater. When I run it, there is no formatting. However when I use css out of the repeater, it formats fine.

<style>
   body {
       background-color:lightgray
   }
   .messageBox p  {
        background-color:white;
        width: 25%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
   }
</style>

Outside Repeater

<div class="messageBox">
  <p>The quick brown fox jumped over the lazy dog</p>
  <p>The quick brown fox jumped over the lazy dog</p>
  <p>The quick brown fox jumped over the lazy dog</p>
  <p>The quick brown fox jumped over the lazy dog</p>
  <p>The quick brown fox jumped over the lazy dog</p>
</div>

Inside the Repeater

<asp:Repeater ID="myRepeater" runat="server">
    <ItemTemplate>
        <br />
        <div class="messageBox">
            <p>
                <%# Eval("Message") %>                            
            </p>
        </div>
    </ItemTemplate>
</asp:Repeater>

Upvotes: 0

Views: 119

Answers (1)

Morpheus
Morpheus

Reputation: 9065

You need to move <div class="messageBox"> to the HeaderTemplate or before the repeater and closing </div> to the FooterTemplate or at the end of repeater.

The end result should look like:

<asp:Repeater ID="myRepeater" runat="server">
    <HeaderTemplate>
        <div class="messageBox">
    </HeaderTemplate>
    <ItemTemplate>
        <br />
        <p>
            <%# Eval("Message") %>                            
        </p>
    </ItemTemplate>
    <FooterTemplate>
        </div>
    </FooterTemplate>
</asp:Repeater>

or:

<div class="messageBox">
    <asp:Repeater ID="myRepeater" runat="server">       
        <ItemTemplate>
            <br />
            <p>
                <%# Eval("Message") %>                            
            </p>
        </ItemTemplate>     
    </asp:Repeater>
</div>

I like the first approach as it won't leave empty div element if there is no data.

Upvotes: 2

Related Questions