Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

radWindow blocks table styles

5 Answers 183 Views
Window
This is a migrated thread and some comments may be shown as answers.
Ed Lance
Top achievements
Rank 1
Ed Lance asked on 13 Dec 2010, 08:43 PM
I have a radWindow with an ASP.Net Formview inside of it, and a <table> in the Formview to show the data.  I used CSS to format the table and it looked correct when the Formview was on the page directly.  But when I put it inside the radWindow, the borders and padding from the CSS do not show up on the table.  Something in the radWindow is overriding the CSS I guess but I can't figure it out.

<telerik:RadWindow ID="SummaryRadWindow" runat="server" Behavior="Default" 
    InitialBehavior="None" Modal="True" Behaviors="Resize, Close, Move" 
    Height="300px" Title="Job Summary" Width="400px">
    <ContentTemplate>
<asp:FormView ID="SummnaryBlockFormView" runat="server" DataSourceID="SummaryBlockSqlDataSource">
    <ItemTemplate>
        <table cellpadding="3" border="1" class="summaryblock">
            <tr>
                <td style="font-weight: bold">
                    Job:
                </td>
                <td>
                    <%=cboJobs.SelectedItem.Text%>
                </td>
            </tr>
            <tr>
                <td style="font-weight: bold">
                    Period End Date:
                </td>
                <td>
                    <%=cboPeriodEndDate.SelectedItem.Text%>
                </td>
            </tr>
            <tr>
                <td style="font-weight: bold">
                    Trade:
                </td>
                <td>
                    <%=cboTrade.SelectedItem.Text%>
                </td>
            </tr>
        </table>
        <br />
    </ItemTemplate>
</asp:FormView>
    </ContentTemplate>
</telerik:RadWindow>

Also note that setting border="1" on the table does not show the border, so I know there is some hidden CSS that is overriding it.

And from the CSS file:

.summaryblock
{
    border-collapse: collapse;
    border: 1px solid #808080;
    font: 12px "segoe ui" , arial, sans-serif;
}
  
.summaryblock td
{
    border: 1px solid #A0A0A0;
    text-align: right;
    padding: 5px;
}

The table does pick up the font and text aling styles, but not the border or padding.  Any help much appreciated.

5 Answers, 1 is accepted

Sort by
0
Cori
Top achievements
Rank 2
answered on 13 Dec 2010, 09:47 PM
Hello Ed,

Have you tried removing border-collapse from your summaryBlock css class. That's most likely the cause for your borders not showing up. I would set on the td, not the table itself.

I hope that helps.
0
Ed Lance
Top achievements
Rank 1
answered on 13 Dec 2010, 10:11 PM
Cori,
Thanks for the reply.  Not sure why you think the border-collapse style would cause that?  Border-collapse is a table level style, it isn't for <td> tags.

The main thing is that these styles work perfectly if the Formview is directly in the page, but not when in the radWindow.  The radWindow should not have any style influence on its contents.
0
Bozhidar
Telerik team
answered on 14 Dec 2010, 10:10 AM
Hello Ed,

This is a  standard browser behavior when applying border-collapse to the table. I have used your code to create a simple page without RadWindow or any other control on it, at it behaves the same way - the border set to the table is not applied:

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
    <style type="text/css">
        .summaryblock
        {
            border-collapse: collapse;
            border-left: 1px solid #f00;
            font: 12px "segoe ui" , arial, sans-serif;
        }
         
        .summaryblock td
        {
            border: 1px solid #A0A0A0;
            text-align: right;
            padding: 5px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <table cellpadding="3" border="1" class="summaryblock">
        <tr>
            <td style="font-weight: bold">
                Job:
            </td>
            <td>
                some job
            </td>
        </tr>
        <tr>
            <td style="font-weight: bold">
                Period End Date:
            </td>
            <td>
                some date
            </td>
        </tr>
        <tr>
            <td style="font-weight: bold">
                Trade:
            </td>
            <td>
                some trade
            </td>
        </tr>
    </table>
    </form>
</body>
</html>


As an alternative I would suggest to use combination of styles set to table cells in order to have the desired result:

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
    <style type="text/css">
        .summaryblock
        {
            border-collapse: collapse;
            border-left: 1px solid #f00;
            font: 12px "segoe ui" , arial, sans-serif;
        }
         
        .summaryblock td
        {
            border: 1px solid #A0A0A0;
            text-align: right;
            padding: 5px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <table cellpadding="3" border="1" class="summaryblock">
        <tr>
            <td style="font-weight: bold">
                Job:
            </td>
            <td>
                some job
            </td>
        </tr>
        <tr>
            <td style="font-weight: bold">
                Period End Date:
            </td>
            <td>
                some date
            </td>
        </tr>
        <tr>
            <td style="font-weight: bold">
                Trade:
            </td>
            <td>
                some trade
            </td>
        </tr>
    </table>
    <telerik:RadWindow ID="SummaryRadWindow" runat="server" Behavior="Default" InitialBehavior="None"
        Modal="True" Behaviors="Resize, Close, Move" Height="300px" Title="Job Summary"
        Width="400px" VisibleOnPageLoad="true">
        <ContentTemplate>
            <table cellpadding="3" border="1" class="summaryblock">
                <tr>
                    <td style="font-weight: bold; border-top: 1px solid #808080; border-left: 1px solid #808080;">
                        Job:
                    </td>
                    <td style="border-top: 1px solid #808080; border-right: 1px solid #808080;">
                        some job
                    </td>
                </tr>
                <tr>
                    <td style="font-weight: bold; border-left: 1px solid #808080;">
                        Period End Date:
                    </td>
                    <td style="border-right: 1px solid #808080;">
                        some date
                    </td>
                </tr>
                <tr>
                    <td style="font-weight: bold; border-left: 1px solid #808080; border-bottom: 1px solid #808080;">
                        Trade:
                    </td>
                    <td style="border-right: 1px solid #808080; border-bottom: 1px solid #808080;">
                        some trade
                    </td>
                </tr>
            </table>
            <br />
        </ContentTemplate>
    </telerik:RadWindow>
    </form>
</body>
</html>


Best wishes,
Bojo
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Ed Lance
Top achievements
Rank 1
answered on 14 Dec 2010, 06:47 PM
Firefox36.jpg
IE8.jpg
radWindow.JPG
Bojo,
Thanks for replying.  It is not standard behaviour of the browser.  I created a simple HTML page, below, and the borders work as expected in IE8 and FF3.6.  I added attachments to show you what I am seeing.  In firefox36.jpg and ie8.jpg, which are screenshots of the below HTML, you can see that that borders are showing.  In radwindow.jpg, which is a screenshot of the radWindow in my app, you can see that the borders, with the same styles are NOT showing.  Note I am using strict doctype.

The point of all this is, whatever the browser behaviour is, the radWindow should display its contents EXACTLY in the same way as they would be displayed outside of the window.  At this point I am considering this a BUG of the radWindow.  I have worked around it for now by adding inline styles to the table.  It's messy but it works.  Please investigate this and consider a fix for your next release.

Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>Test border-collapse</title>
<style type="text/css">
.summaryblock
{
    border-collapse: collapse;
    border: 1px solid #808080;
    font: 12px "segoe ui" , arial, sans-serif;
}
  
.summaryblock td
{
    border: 1px solid #A0A0A0;
    text-align: right;
    padding: 5px;
}</style>
</head>
<body>
    <table cellpadding="3" border="1" class="summaryblock">
        <tr>
            <td style="font-weight: bold;">
                Job:
            </td>
            <td>
                cboJobs.SelectedItem.Text
            </td>
        </tr>
        <tr>
            <td style="font-weight: bold;">
                Period End Date:
            </td>
            <td>
                cboPeriodEndDate.SelectedItem.Text
            </td>
        </tr>
        <tr>
            <td>
                Trade:
            </td>
            <td>
                cboTrade.SelectedItem.Text
            </td>
        </tr>
    </table>
</body>
</html>
0
Bozhidar
Telerik team
answered on 15 Dec 2010, 08:49 AM
tableborders.zip
Hello Ed,

Sorry for the misunderstanding, I thought your problems is that the border color of the table is overwritten by the table cells borders which is browser behavior.

I have tested your code on a simple HTML page and on page with RadWidnow with a strict doctype and it works fine in both projects. This make me to think that you are using an older version of Telerik Controls. Please, upgrade to the latest Q3 2010 release, where the problem does not exist. Also today will be released Q3 2010 Service pack 1.

Attached is tableborders.zip containing a video file showing the tests with your code and the table within RadWindow with borders applied.

Kind regards,
Bojo
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Tags
Window
Asked by
Ed Lance
Top achievements
Rank 1
Answers by
Cori
Top achievements
Rank 2
Ed Lance
Top achievements
Rank 1
Bozhidar
Telerik team
Share this question
or