Solved

Repeater overflowing out of div in Firefox.

Posted on 2010-09-09
5
586 Views
Last Modified: 2012-05-10
I have a repeater that is overflowing outside of a div rather than extending it in Firefox but it looks fine in IE, Chrome and Safari.
<asp:Panel ID="pnlNotes" Visible="true" runat="server">
	    <br />
        <h2>Notes</h2>
        <br />
        <asp:Button ID="btnNote" Text="Add Note" OnClick="btnNote_Click" runat="server" />
        <asp:Repeater id="rptNotes" runat="server">
            <HeaderTemplate>
                <table class="indentedTable" cellSpacing="3" cellPadding="0" width="600px" align="left" border="1">
            </HeaderTemplate>

            <ItemTemplate>
                <tr>
                    <td align="left" width="10%">
                        <label class="coloredText">Name:</label>
                    </td>
                    <td width="45%">
                        <%# DataBinder.Eval(Container.DataItem, "Name") %>
                    </td>
                    <td align="left" width="10%">
                        <label class="coloredText">Time:</label>
                    </td>
                    <td width="35%">   
                        <%# DataBinder.Eval(Container.DataItem, "ActionTime") %>
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        <%# DataBinder.Eval(Container.DataItem, "Note") %>
                    </td>
                </tr>
            </ItemTemplate>
    
            <SeparatorTemplate>
                <tr>
                    <td colspan="4"><hr color="black" /><br /></td>
                </tr>
            </SeparatorTemplate>

            <FooterTemplate>
                </table>
            </FooterTemplate>
        </asp:Repeater>
	    <br />
	</asp:Panel>

Open in new window

repeater.jpg
0
Comment
Question by:FIM2003
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 30

Expert Comment

by:MlandaT
ID: 33648235
You need to post the CSS code which you are using otherwise it is not possible to help you figure this one out. Particularly "indentedTable".



0
 
LVL 30

Expert Comment

by:MlandaT
ID: 33648251
Maybe post the HTML being output by the page as well then we just look at where the problem is coming from. This type of problem is normally just related to your CSS.
0
 

Author Comment

by:FIM2003
ID: 33648812
indentedTable is actually an old class that is no longer used in the current CSS file (I just missed it to take it out) so it wasn't specifying anything. Here is the outputted HTML code. coloredText is just font-weight: bold.
<div id="ctl00_contentplaceholder2_pnlNotes">
	
	    <br />

        <h2>Notes</h2>
        <br />
        
        
                <table class="" cellSpacing="3" cellPadding="0" width="600px" align="left" border="1">
            
                <tr>
                    <td align="left" width="10%">
                        <label class="coloredText">Name:</label>
                    </td>
                    <td width="45%">

                        ---
                    </td>
                    <td align="left" width="10%">
                        <label class="coloredText">Time:</label>
                    </td>
                    <td width="35%">   
                        10/12/2009 4:00:18 PM
                    </td>
                </tr>
                <tr>

                    <td colspan="4">
                        Assigned to --- in Purchasing
                    </td>
                </tr>
            
                <tr>
                    <td colspan="4"><hr color="black" /><br /></td>
                </tr>
            
                <tr>
                    <td align="left" width="10%">

                        <label class="coloredText">Name:</label>
                    </td>
                    <td width="45%">
                        ---
                    </td>
                    <td align="left" width="10%">
                        <label class="coloredText">Time:</label>
                    </td>

                    <td width="35%">   
                        10/12/2009 3:58:15 PM
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        Assigned to --- in Purchasing
                    </td>
                </tr>
            
                </table>

            
	    <br />
	
</div>

Open in new window

0
 
LVL 30

Accepted Solution

by:
MlandaT earned 500 total points
ID: 33648989
Try this:

1. Give the asp:Panel a width of 100%.
2. Add a style="overflow:auto" to the asp:Panel as well.

Works fine if the DIV is rendered as:

<div id="ctl00_contentplaceholder2_pnlNotes" style="overflow: auto; width:100%">
0
 

Author Closing Comment

by:FIM2003
ID: 33649342
This did the trick. Thank you!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I have helped a lot of people on EE with their coding sources and have enjoyed near about every minute of it. Sometimes it can get a little tedious but it is always a challenge and the one thing that I always say is:   The Exchange of informatio…
I was asked about the differences between classic ASP and ASP.NET, so let me put them down here, for reference: Let's make the introductions... Classic ASP was launched by Microsoft in 1998 and dynamically generate web pages upon user interact…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question