RadStyleSheetManager breaks page

Posted by Community Admin on 04-Aug-2018 12:14

RadStyleSheetManager breaks page

All Replies

Posted by Community Admin on 15-Mar-2011 00:00

Hi,

I have dropped a stylesheetmanager control onto my master page, just within the form tag, like so:

<telerik:RadStyleSheetManager ID="RadStyleSheetManager" runat="server" EnableStyleSheetCombine="false" >
            <StyleSheets>
                <telerik:StyleSheetReference Assembly="SitefinityWebApp" Name="mynamespace.lib.css.screen.css" />
            </StyleSheets>
        </telerik:RadStyleSheetManager>

If I check FireBug I can see that the screen.css file is being loaded by the handler, however the Sitefinity backend is completely messed up when I view a page that uses this template. I mean the entire interface is broken.

Is there a known-bug with the stylesheetmanager, or is there a workaround?

Thanks
higgsy

Posted by Community Admin on 15-Mar-2011 00:00

Hello higgsy,

Yes, there are some issues with the RadStyleSheetMananger and we logged an issue about it - ID#109945 which was also reported by you.


Kind regards,
Ivan Dimitrov
the Telerik team

Posted by Community Admin on 15-Mar-2011 00:00

Hi Ivan,

The bug I reported was that the RadStyleSheetManager broke the page when an empty Style Sheet Manager was added to the page. Are you essentially saying the StyleSheetManatger does not work at all? You can see from my code snippett has a <stylesheets> element.

Thanks
higgsy

Posted by Community Admin on 17-Dec-2012 00:00

Hi Higgsy,

Did you ever manage to solve this problem? I've got the exact same issue, and I'm wondering if there is anything I can do to fix it?

Posted by Community Admin on 20-Dec-2012 00:00

Hello,

The RadStyleSheetManager is used to minify and combine resources of the RadControls (or custom skins for them). If you want to minify your own style sheets you have to perform what is described in this 
documentation article.

You can also try to check in your code if you are in DesignMode and disable the RadStyleSheedManager.
Example:
 

using System.Web.UI;
 
protected override void OnInit(EventArgs e)
 
 
   if (this.IsDesignMode())
 
   
 
     //TODO: Disable RadStyleSheedManager
 
   
 

Hopefully this information will be useful to others as well.

Regards,
Atanas Valchev
the Telerik team
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 10-Jan-2013 00:00

Hi Atanas,

Thanks for your comment, though am still having serious issues.
I've been through the steps in this page: www.telerik.com/.../stylesheetmanager-serving-external-style-sheets.html to allow my site to host the external CSS style sheets. 

This is from my master page:

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
               <StyleSheets>
                   <telerik:StyleSheetReference IsCommonCss="False" Path="~/App_Skin/Css/forms.css" />
                   <telerik:StyleSheetReference IsCommonCss="False" Path="~/App_Skin/Css/layout.css" />
                   <telerik:StyleSheetReference IsCommonCss="False" Path="~/App_Skin/Css/text.css" />
                   <telerik:StyleSheetReference IsCommonCss="False" Path="~/App_Skin/Css/navigation.css" />
               </StyleSheets>
           </telerik:RadStyleSheetManager>

And the following in my web.config file:

<add key="Telerik.Web.UI.StyleSheetFolders" value="~/App_Skin/; " />


This works perfectly in the frontend, and it is loading all the CSS files and combining them into a single request.

However when I go into the backend and try to edit a page, the entire page layout is broken, and I can't see any of the Sitefinity control panels or anything.  (The content is there, but the styles are totally breaking the backend styles.).

I've tried something like this to disable the stylesheet manager when in design mode, but even though its clearing all the styles, (and not loading any of my stylesheets that I specify) its still loading some default telerik ones, which are still breaking the sitefinity backend.
protected override void OnPreRender(EventArgs e)
            if (this.IsDesignMode())
                RadStyleSheetManager1.StyleSheets.Clear();
            
        

If you could please help me with how I can disable StyleSheet manager in the backend, so it doesn't break the layout of the Sitefinity backend page editor. 

Ideally, I just want the StyleSheetManager to load and combine my stylesheets, so I can still see my layout / design in the backend, but not load all the extra telerik styles that seem to be breaking the backend layout.

Thank you for your help.

Posted by Community Admin on 14-Jan-2013 00:00

Hello,

What are these telerik styles that are breaking the backend, would it be possible to share a screenshot, please?

You can try adding your CSS to the frontend theme. It combines and loads all the CSS in one request, that way you can avoid using the stylesheet manager. You can find more info here: Themes and Working with themes.

With the RadStyleSheet manager you can also try the following: Set it not to be visible by default and then in code check if the page is in NOT in design mode and if this is true then set it to be visible.

protected override void OnInit(EventArgs e)
  
  
   if (!this.IsDesignMode())
  
   
  
     //Set RadStyleSheedManager to be visible
  
   
  

It is basically the same thing but with a different order that way when you enter design mode it will not load the styles and then clear them or disable them.

Regards,
Atanas Valchev
the Telerik team
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 15-Jan-2013 00:00

Hi Atanas,

I am already loading the CSS and images through the frontend theme. (as described in your links www.sitefinity.com/.../themes above) . When I load the CSS files this way, the site looks correct and the backend also works, however the files are NOT combined into a single request, (which is the reason I have been trying to get the stylesheetmanager to work).  If you can tell me how I can combine the CSS files that are loaded via the frontend theme to be combined automatically into a single request that'll solve my problem.

See the screenshots of "Working Backend" for a sample of what our backend page looks like, and the screenshot "Working CSS" too see how the CSS files are requested (as shown by firebug).

As soon as I remove those files from the Frontend theme, and put a RadStyleSheetManager on the master page, when editing the EXACT same page as above it now looks like following screenshots:

  • Broken Top - The top of the page
  • Broken Middle - The middle of the page
  • Broken Bottom - the bottom of the page
  • Broken - CSS Requests - the css files that are loaded as shown by firebug.

As you can see when using the stylesheetmanager, my stylesheets are now combined into single request (which is what I'd like), BUT the backend page is unusable.

I also have tried setting the visibility of the RadStyleSheetManager to false (by default) though this still doesn't seem to make any difference at all. The backend pages still render exactly the same way.

Posted by Community Admin on 30-Apr-2013 00:00

I'm having the same issue. Did you guys ever figure this one out? I've thought about adding the stylesheetmanager dynamically but I'm not sure of the side effects of this. 

Posted by Community Admin on 03-May-2013 00:00

Hi Rodolfo
Nope we never got this sorted. Ended up just not using the rad style sheet manager, and had to manually combine the stylesheets.  A bit frustrating, but ended up spending too long trying to get it to work without any success.

Posted by Community Admin on 03-May-2013 00:00

Hey Jono,

Thanks for the reply. I was wondering if something like this would work: 


    protected override void OnInit(EventArgs e)
   
        if (!this.IsDesignMode())
       
            // Every page should have a script manager and style sheet manager
            if (Page.Header != null)
           
                if (Telerik.Web.UI.RadStyleSheetManager.GetCurrent(Page) == null)
               
                    Page.Header.Controls.AddAt(0, CreateStyleSheetManager());
               
           
       
        base.OnInit(e);
   

    

    private Telerik.Web.UI.RadStyleSheetManager CreateStyleSheetManager()
   
        return new Telerik.Web.UI.RadStyleSheetManager()
       
            ID = "styleSheetManager"
        ;
   

This thread is closed