This is a migrated thread and some comments may be shown as answers.

[Solved] Content Template overriding styles

5 Answers 222 Views

Window

This is a migrated thread and some comments may be shown as answers.

Michael Landy asked on 03 Mar 2010, 11:07 PM

I have dynamic content that goes into an RadAjaxPanel that is inside a RadWindow. The content I am adding has styles and float attributes to create a multi-column display of information. However, when I add the content to the window, the styles appear to be lost and my dynamic content is presented top down. In addition, the auto-resize ends up with scrollbars on my content...sometime. Other times is appears ok. It never works the first time the window is opened.

Is there a way to keep the dynamic content styles?

Here is the code setup for the RadWindow.

    
                <telerik:RadWindow ID="RadWindow1" runat="server" Animation="Fade"   
        
                    AutoSize="True" Modal="True" Behavior="Resize, Close, Move"   
        
                    Behaviors="Resize, Close, Move" InitialBehavior="None" Left=""   
        
                    ShowContentDuringLoad="False" Top="" VisibleStatusbar="False"   
        
                    VisibleTitlebar="False">  
        
                <ContentTemplate> 
        
                <div id="criteriapanel" class="criteriapanel">  
        
                <telerik:RadAjaxPanel ID="updatePanel" runat="server"   
        
                    HorizontalAlign="NotSet" LoadingPanelID="RadAjaxLoadingPanel1" > 
        
                        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server"   
        
                        Height="39px" InitialDelayTime="300" IsSticky="True" MinDisplayTime="200"   
        
                        Skin="Default" BackColor="yellow" OnClientShowing="MyClientShowing" OnClientHiding="MyClientHiding">  
        
                    </telerik:RadAjaxLoadingPanel> 
        
                </telerik:RadAjaxPanel> 
        
                <asp:Button runat="server" ID="GenerateReport" CssClass="button" Text="Generate Report" />    
        
                <asp:Button runat="server" ID="CancelReport" CssClass="button" Text="Cancel" OnClientClick="CloseCriteria();return false;" />     
        
                </div> 
        
                </ContentTemplate> 
        
                </telerik:RadWindow>

5 Answers, 1 is accepted

answered on 09 Mar 2010, 12:50 PM

Hello Michael,

Please make sure that you are using XHTML Doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

If this doesn't help, it will be best to open a support ticket and to send us a small sample project that isolates the problem so we could check it locally.

Greetings,
Georgi Tunev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 12 Mar 2010, 03:47 PM

Hello Michael,

I am still not sure that I completely understand your scenario's logic - in the code I see only one DIV. From your last post I see that you found a solution for your scenario, but if you want, you could send us a small sample in a support ticket and we will check it right away - if there is a problem with our control, we will fix it as soon as possible.

Sincerely yours,
Georgi Tunev
the Telerik team

answered on 12 Mar 2010, 04:34 PM

The code above adds items dynamically, so it was a bad example. To reproduce the issue, here is what you can do.

1. Put two panels in the the ContentTemplate section. Put some text in each of them.
2. Set the width of the panels to 300px.
3. Using CSS, set the panel's "float" property to left. This would create side by side columns of the panel...if the browser window is big enough. If it is not, the panels will "float" where the second panel is moved underneath the first panel.
4. Open the window with these two panels and set the resize to true. The code rightlyfully attempts to get the largest panel size (300px) and generate the window to this size. This means that the panels are displayed vertically and not side by side.

To fix this issue, I added a third panel and set it's width to the combined width of panel 1 and 2. This panel does not float. Now the resize sees a much larger window size and places panel 1 and 2 side by side.

In the end, there is not a bug in the resize functionality. The problem was my understanding of how to force the width of a resizeable window so that it would render the two column display I wanted correctly.

I hope this helps.

answered on 18 Mar 2010, 03:01 PM

Hi Michael,

Thank you for the details - I was able to reproduce the case. This behavior is due to the way the AutoSizing feature works when RadWindow is used as controls' container. To avoid it, you could use the workaround that you found, or as an alternative - you could wrap these 2 DIVs in a third one with its width equal to the sum of the 2 DIVs inside it.

Sincerely yours,
Georgi Tunev
the Telerik team