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

Change radwindow titlebar height, skin/color and font

19 Answers 416 Views
Window
This is a migrated thread and some comments may be shown as answers.
Fakhrul
Top achievements
Rank 1
Fakhrul asked on 17 Mar 2009, 03:48 PM
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

19 Answers, 1 is accepted

Sort by
0
Fakhrul
Top achievements
Rank 1
answered on 18 Mar 2009, 12:31 PM
Is this possible? Is there no solution for this?
0
Fiko
Telerik team
answered on 19 Mar 2009, 02:24 PM
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.
0
J2K
Top achievements
Rank 1
answered on 07 Jan 2014, 01:49 PM
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???
0
Marin Bratanov
Telerik team
answered on 08 Jan 2014, 01:23 PM
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.
0
Robert
Top achievements
Rank 1
answered on 18 Sep 2018, 09:12 PM
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.
0
Marin Bratanov
Telerik team
answered on 19 Sep 2018, 08:54 AM
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.
0
Robert
Top achievements
Rank 1
answered on 19 Sep 2018, 04:27 PM

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?

0
Marin Bratanov
Telerik team
answered on 19 Sep 2018, 05:01 PM
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

0
David
Top achievements
Rank 1
answered on 25 Sep 2018, 10:13 PM

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.

0
René
Top achievements
Rank 2
answered on 26 Sep 2018, 01:29 PM

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; }

0
René
Top achievements
Rank 2
answered on 26 Sep 2018, 01:51 PM

ehm, fixed CSS fix, sorry :-)

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

0
David
Top achievements
Rank 1
answered on 26 Sep 2018, 03:11 PM

Raptor,

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

Dave

0
Marin Bratanov
Telerik team
answered on 26 Sep 2018, 05:53 PM
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.
0
Robert
Top achievements
Rank 1
answered on 26 Sep 2018, 06:09 PM
[quote]Raptor said:

ehm, fixed CSS fix, sorry :-)

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

[/quote]

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.

 

0
René
Top achievements
Rank 2
answered on 26 Sep 2018, 06:23 PM

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;
}
0
Marin Bratanov
Telerik team
answered on 26 Sep 2018, 06:30 PM
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.
0
Robert
Top achievements
Rank 1
answered on 26 Sep 2018, 06:45 PM

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.  

0
René
Top achievements
Rank 2
answered on 21 Nov 2018, 08:50 AM

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é

0
Marin Bratanov
Telerik team
answered on 21 Nov 2018, 08:17 PM
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.
Tags
Window
Asked by
Fakhrul
Top achievements
Rank 1
Answers by
Fakhrul
Top achievements
Rank 1
Fiko
Telerik team
J2K
Top achievements
Rank 1
Marin Bratanov
Telerik team
Robert
Top achievements
Rank 1
David
Top achievements
Rank 1
René
Top achievements
Rank 2
Share this question
or