RadScriptManager and JQueryUI Background Image URLs

8 posts, 0 answers
  1. Rob sherwood
    Rob sherwood avatar
    3 posts
    Member since:
    Jun 2009

    Posted 10 Aug 2011 Link to this post

    Hi there,

    I'm using:

    Visual Studio 2010
    AJAX Q2 2011 2011.2.712.35 (Bin35)

    I use the RadScriptManager to include all my CSS - I'm successfully including my own stylesheets, as well as a custom skin:

    (web.config)
    <add key="Telerik.Web.UI.StyleSheetFolders" value="~/_Resources/CSS/" />
    <add key="Telerik.Skin" value="IntranetSkin" />
    <add key="Telerik.EnableEmbeddedSkins" value="false" />
    <add key="Telerik.EnableEmbeddedBaseStylesheet" value="false" />

    (Base.Master)
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" EnableStyleSheetCombine="true">
        <StyleSheets>
            <telerik:StyleSheetReference Path="~/_Resources/CSS/base.css" />
            <telerik:StyleSheetReference Path="~/_Resources/CSS/start/jquery-ui-1.8.15.custom.css" />
            <telerik:StyleSheetReference Path="~/_Resources/CSS/styles.css" />
            <telerik:StyleSheetReference Name="Telerik.Web.UI.Skins.Menu.css" Assembly="Telerik.Web.UI" />
            <telerik:StyleSheetReference Name="Telerik.Web.UI.Skins.Grid.css" Assembly="Telerik.Web.UI" />
        </StyleSheets>
    </telerik:RadStyleSheetManager>

    However, when I do something like this (these classes apply background images to the elements):

    (index.aspx)
    <div class="ui-state-default ui-corner-all">
        <span class="ui-icon ui-icon-circle-zoomin"></span>
    </div>

    I get the following 404 errors (via Chrome's error console):

    GET http://localhost:411/images/ui-bg_glass_45_0078ae_1x400.png 404 (Not Found)
    GET http://localhost:411/images/ui-icons_e0fdff_256x240.png 404 (Not Found)

    The files in question exist in http://localhost:411/_Resources/CSS/start/images/, and they're referenced correctly by the JQuery UI CSS file:

    (_Resources/CSS/start/jquery-ui-1.8.15.custom.css)
    .ui-state-default .ui-icon { background-image: url(images/ui-icons_e0fdff_256x240.png); }

    If I include the CSS outside of the StyleSheetManager:

    (Base.Master)
    <link type="text/css" href="~/_Resources/CSS/start/jquery-ui-1.8.15.custom.css" rel="Stylesheet" />

    then things work as expected. I don't seem to have problems with background-image URLs in my other included CSS files.

    Any ideas?

    Thanks,
    Rob
  2. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 16 Aug 2011 Link to this post

    Hello Rob Sherwood,

    This behavior is caused to the following fact: the external style sheets are requested through Telerik.Web.UI.WebResource.axd, which is in the web site root. So the URLs of the images referenced in these CSS files have to be also relative to the root, e.g. the one from your example has to be:
    .ui-state-default .ui-icon { background-image: url(/_Resources/CSS/images/ui-icons_e0fdff_256x240.png); }

    I hope this helps.

    Greetings,
    Simon
    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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kevin Warnke
    Kevin Warnke avatar
    35 posts
    Member since:
    Feb 2010

    Posted 25 Oct 2011 Link to this post

    Are there plans to make the RadStyleSheetManager smarter so that it would parse through CSS content to see if any paths need to be updated when it's including a CSS file?  This seems like a feature that it could do pretty easily (maybe a new attribute on the manager as to whether this step should be performed).

    Thanks,
    Kevin
  5. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 27 Oct 2011 Link to this post

    Hi Kevin,

    Could you please elaborate more - what kind of path modifications do you mean?

    Regards,
    Simon
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  6. Kevin Warnke
    Kevin Warnke avatar
    35 posts
    Member since:
    Feb 2010

    Posted 27 Oct 2011 Link to this post

    Let's say you have AppRoot/MyDesign/Css/External1.css that contains the following:

    .MyClass
    {
        background-image: url(myimage.jpg);
    }

    Let's also assume that myimage.jpg is located in the AppRoot/MyDesign/Css folder.

    Using the CSS above by including the CSS file will work fine because the myimage.jpg path is relative to where the CSS came from.

    Using the RadStyleSheetManager to combine CSS, though, will break this since the CSS is served from AppRoot.  To fix this one would have to change the style def to:

    .MyClass
    {
        background-image: url(/AppRoot/MyDesign/Css/myimage.jpg);
    }

    This works and all, but the Manager knows where the CSS files are located and could do this automatically when combining the CSS together so that we could still use relative paths in our CSS even when combining with a manager, etc.

    Thanks,
    Kevin
  7. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 28 Oct 2011 Link to this post

    Hello Kevin Warnke,

    Thank you for the clarification.

    We are aware of this problem will consider fixing it in future versions of the control. (Currently the existence of this limitation is only mentioned it in our documentation.)

    Unfortunately the Q3 2011 release is coming close and we may not have enough time to test the code properly, so probably we will do that for the Service Pack.

    Greetings,
    Simon
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  8. eric
    eric avatar
    4 posts
    Member since:
    Apr 2011

    Posted 24 Feb 2012 Link to this post

    It would be beneficial to have the StyleSheetManager resolve URLs in the standard way ASP.net does it and have it look for relative paths in the CSS and resolve them upon combining:

    body
    {
        background: #FFFEEF url(~/img/background.jpg) scroll top center;
        font-family: 'Droid Sans';
        font-size:13px;
    }


    It would also be awesome if it removed comments and minifed the CSS as well :)
  9. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 08 Mar 2012 Link to this post

    Hello eric,

    Thank you for the suggestions.

    We will consider implementing the first one for the Q1 2012 SP release. As for dynamic CSS minification we will consider it for future versions of RadStyleSheetManager.

    I updated your Telerik points.

    All the best,
    Simon
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017