Change radwindow titlebar height, skin/color and font

20 posts, 0 answers
  1. Fakhrul
    Fakhrul avatar
    26 posts
    Member since:
    Aug 2008

    Posted 17 Mar 2009 Link to this post

    Hi,

    How can i change radwindow titlebar height, skin/color and font of text?  If possible provide some sample code for each.

    Thanks in advance!

    Fakhrul
  2. Fakhrul
    Fakhrul avatar
    26 posts
    Member since:
    Aug 2008

    Posted 18 Mar 2009 Link to this post

    Is this possible? Is there no solution for this?
  3. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 19 Mar 2009 Link to this post

    Hello Fakhrul,

    You can achieve the desired behavior by  creating a custom skin.



    Greetings,
    Fiko
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  4. J2K
    J2K avatar
    34 posts
    Member since:
    Sep 2005

    Posted 07 Jan 2014 Link to this post

    Build a new skin???? That's it??? There's no way to fix the problem that your haphazard work on built in skins results in letters being chopped (such an english "g") since you apparently didn't leave sufficient height for your selection of font/font-size???
  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4614 posts

    Posted 08 Jan 2014 Link to this post

    Hello,

    Could you share with us a small snippet that shows the issue you are experiencing and a screenshot from it?

    I am asking for this because things seem to look fine on my end with this:
    <telerik:RadWindow runat="server" Title="qtypfghjl" VisibleOnPageLoad="true"></telerik:RadWindow>

    These are letters that have elements below or above the standard small height of most other letters. You can find a screenshot attached here as a reference.


    What I can suggest at this point is the following:
    - try upgrading to the latest version. The thread is originally from the beginning of 2009 and it is possible that there may have been some bug 5 years ago
    - try the lightweight RenderMode: http://www.telerik.com/help/aspnet-ajax/window-render-modes.html.
    - if neither helps, examine the rendered HTML in the browser's dev toolbar and see how to override the title's CSS. Here is a small example for the Classic rendering, with the lightweight mode it should be even easier to customize it:
    div.RadWindow .rwTitleRow em
    {
        line-height: 12px;
        font-size: 12px;
        height: 16px;
    }

    This will bring the title element slightly up so there is more room for the lower portions of the letters.

    Regards,
    Marin Bratanov
    Telerik
    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 the blog feed now.
  6. Robert
    Robert avatar
    4 posts
    Member since:
    Apr 2018

    Posted 18 Sep 2018 in reply to Marin Bratanov Link to this post

    This appears to be a problem with a number of the built in skins when using the lightweight render mode.  In classic they appear fine, but in lightweight the titlebar is not big enough for the title and they get cut off on the bottom.
  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4614 posts

    Posted 19 Sep 2018 Link to this post

    Hello Robert,

    Do you see this issue in our demos: https://demos.telerik.com/aspnet-ajax/window/examples/rendermodes/defaultcs.aspx

    If yes, could you show me how to reproduce it? 

    If not, the most likely problem is a CSS interference from a site-specific stylesheet, and you can read more about dealing with such problems in the following article: https://docs.telerik.com/devtools/aspnet-ajax/general-information/troubleshooting/skins-troubleshooting#incorrect-or-distorted-appearance.


    Regards,
    Marin Bratanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  8. Robert
    Robert avatar
    4 posts
    Member since:
    Apr 2018

    Posted 19 Sep 2018 in reply to Marin Bratanov Link to this post

    The demo example does render correctly for me.

    I ran a comparison, with both set to lightweight/BlackMetroTouch and for some reason my example has the rwTitleBar and rwTitleWrapper heights smaller. 28/20 and 20/12 respectively.

    If I add the items you've mentioned above to .rwTitle the title displays correctly.  To fix the icon I need to remove the margin element from .rwIcon

    I've looked through the rendered files and don't see anywhere where my css is overriding yours, so not sure where the problem is originating.  For a solution, should I then create a custom skin?

  9. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4614 posts

    Posted 19 Sep 2018 Link to this post

    Hi Robert,

    If you can't find where the origin of the CSS that causes the problem is, you can add a CSS rule similar to my old post to the page's stylesheet, so that it produces the desired RadWindow appearance. It does not have to be in a custom skin, it just has to be on the page where the RadWindow is declared.

    --Marin

  10. David
    David avatar
    2 posts
    Member since:
    Jan 2013

    Posted 25 Sep 2018 in reply to Marin Bratanov Link to this post

    Hello Marin,

     

    I just want to add that my RadWindows were just fine until I upgraded to 2018.3.910.45 today (9-25-2018). I have made no changes at all, but now all of my RadWindows exhibit the same shortened title bar. I have to say that it sure looks like a bug that should be investigated ASAP. I am on a really tight deadline to deliver some functionality, but I can't with my RadWindows looking like this. I can't seem to get your suggested CSS to work either.

  11. Raptor
    Raptor avatar
    53 posts
    Member since:
    Aug 2011

    Posted 26 Sep 2018 Link to this post

    Hello,

    got this problem too, but I have solution :-)

    It is bug in lightweight mode related to box model. If you are using border-box (as in Bootstrap etc.), padding from rwTitleWrapper is not counted. So solution is to set:

    .RadWindow .rwTitleWrapper { box-model: content box; }

  12. Raptor
    Raptor avatar
    53 posts
    Member since:
    Aug 2011

    Posted 26 Sep 2018 Link to this post

    ehm, fixed CSS fix, sorry :-)

    .RadWindow .rwTitleWrapper {
        box-sizing: content-box;
    }

  13. David
    David avatar
    2 posts
    Member since:
    Jan 2013

    Posted 26 Sep 2018 in reply to Raptor Link to this post

    Raptor,

    You are a ROCK STAR!!! Thank you so much!!! Did the trick!

    Dave

  14. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4614 posts

    Posted 26 Sep 2018 Link to this post

    Hi everyone,

    Just to add some details on this - the most likely origin of this problem is Bootstrap. It changes the box sizing on everything on the page. You can read more about this in the article I will link below.

    The solution is as Raptor outlined - to restore the box-sizing our controls are created for, and the article also offers a few more generic selectors to that end. 

    Link: https://www.telerik.com/support/kb/aspnet-ajax/details/fix-incorrect-appearance-in-telerik-controls-when-using-bootstrap-library.


    Regards,
    Marin Bratanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  15. Robert
    Robert avatar
    4 posts
    Member since:
    Apr 2018

    Posted 26 Sep 2018 in reply to Raptor Link to this post

    Raptor said:

    ehm, fixed CSS fix, sorry :-)

    .RadWindow .rwTitleWrapper {
        box-sizing: content-box;
    }

    Nice.  That fixed the title issue for me (using bootstrap 3.3.7), though the Icon is still not positioned correctly.

    The offending CSS seems to be the bult in - .RadWindow .RadIcon {margin: 3px 5px 0 0;} 

    If I disable this in devtools everything looks good (Margin then inherited from .RadWindow_Material .rwIcon). 

    Not sure how to fix this though as any custom CSS I add gets overridden by the built in CSS.

     

  16. Raptor
    Raptor avatar
    53 posts
    Member since:
    Aug 2011

    Posted 26 Sep 2018 in reply to Robert Link to this post

    This fix should be related only to lightweight controls. I have Bootstrap theme with some color customizations and this theme is based on em, not px units. But in my case everything works fine. rwIcon is positioned OK.

    .RadWindow .rwIcon {
        margin: -.5em 0 0 0;
        width: 1em;
        height: 1em;
        font-size: 16px;
        line-height: 1;
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 0.64em;
    }
  17. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4614 posts

    Posted 26 Sep 2018 Link to this post

    Hello Robert,

    Such a problem will arise if you have a RadWindow with  RenderMode=Classic on the page. You can easily reproduce it like this:

    <telerik:RadWindow runat="server" ID="rw1" Skin="Material" RenderMode="Lightweight" VisibleOnPageLoad="true" Title="Lorem ipsum dolor"></telerik:RadWindow>
    <telerik:RadWindow runat="server" ID="rw2" RenderMode="Classic" Title="I will break the other RadWindow"></telerik:RadWindow>

    The CSS rules for both modes are different and can cause such clashes, this is why mixing them on a single page is not supported: https://docs.telerik.com/devtools/aspnet-ajax/controls/window/mobile-support/render-modes. In fact, this applies to all our controls, not just the RadWindow.

    So, the solution is to find which is the RadWindow that has the Classic render mode and move it to the Lightweight mode, because the Material skin is available with the Lightweight mode only.

    That said, you can also work around this particular issue (although there may be others) with the following CSS selector that puts the default values in place through a selector heavier than the one from the Classic skin that adds the undesired margin:

    div.RadWindow_Material span.rwIcon {
        margin: -0.5em 0 0;
    }


    Regards,
    Marin Bratanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  18. Robert
    Robert avatar
    4 posts
    Member since:
    Apr 2018

    Posted 26 Sep 2018 in reply to Marin Bratanov Link to this post

    Yep, found it.  Was just about to reply that all my windows were set to lightweight, and then I found one I missed.

    That did the trick.  

  19. Raptor
    Raptor avatar
    53 posts
    Member since:
    Aug 2011

    Posted 21 Nov 2018 Link to this post

    Hello,

    just a friendly advice - do NOT use Global solution from Telerik :-)

    If you do this, it will break all your containers, because [class^="Rad"] affects Ajax update panels, Docs etc. So whole content will be broken ;-)

    Just use Per control solution and test result. There is no universal solution.

    Regards

    René

  20. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4614 posts

    Posted 21 Nov 2018 Link to this post

    Hi René,

    Thank you for sharing your experience with the community.

    The standard <asp:UpdatePanel> does not have a default CSS class and if there is a conflict coming from the global selector, that would mean some class the application or any third party components in it, uses classes that being with "Rad". While not impossible, that's a bit unlikely and many applications could still use this global selector (even though its performance may not be the best on large pages).

    Bootstrap attempt to force their rules on everything through a * {} rule and there is no elegant way for us to fix that, because a lot of our controls expose containers or templates where we'd break the developer's code if we added a heavy selector to override what Bootstrap does. So, it's a bit of a lose-lose situation and the developer would have to choose the lesser evil sometimes. There are also many other similar rules in bootstrap or other boilerplates and sometimes they may affect the page or components like ours - the more generic the rule, the higher the chance it will break something. So, as René noted, you may have to examine what happens in your case and test out the most suitable solution for your situation.


    Regards,
    Marin Bratanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top