+1-888-365-2779
Try Now
More in this section

Forums / Bugs & Issues / RadStyleSheetManager breaks page

RadStyleSheetManager breaks page

11 posts, 0 answered
  1. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    15 Mar 2011
    Link to this post
    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
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    15 Mar 2011
    Link to this post
    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
  3. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    15 Mar 2011
    Link to this post
    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
  4. Jono
    Jono avatar
    4 posts
    Registered:
    15 Aug 2012
    17 Dec 2012 in reply to higgsy
    Link to this post
    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?
  5. Atanas Valchev
    Atanas Valchev avatar
    414 posts
    Registered:
    04 Jan 2016
    20 Dec 2012
    Link to this post
    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
  6. Jono
    Jono avatar
    4 posts
    Registered:
    15 Aug 2012
    10 Jan 2013 in reply to Atanas Valchev
    Link to this post
    Hi Atanas,

    Thanks for your comment, though am still having serious issues.
    I've been through the steps in this page: http://www.telerik.com/help/aspnet-ajax/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.
  7. Atanas Valchev
    Atanas Valchev avatar
    414 posts
    Registered:
    04 Jan 2016
    14 Jan 2013
    Link to this post
    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
  8. Jono
    Jono avatar
    4 posts
    Registered:
    15 Aug 2012
    15 Jan 2013 in reply to Atanas Valchev
    Link to this post
    Hi Atanas,

    I am already loading the CSS and images through the frontend theme. (as described in your links http://www.sitefinity.com/documentation/documentationarticles/designer-s-guide/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.

  9. Rodolfo
    Rodolfo avatar
    2 posts
    Registered:
    04 Oct 2012
    30 Apr 2013 in reply to Jono
    Link to this post
    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. 
  10. Jono
    Jono avatar
    4 posts
    Registered:
    15 Aug 2012
    03 May 2013 in reply to Rodolfo
    Link to this post
    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.
  11. Rodolfo
    Rodolfo avatar
    2 posts
    Registered:
    04 Oct 2012
    03 May 2013 in reply to Jono
    Link to this post
    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"
            };
        }

11 posts, 0 answered