19 Answers, 1 is accepted
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.
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
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
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?
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
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.
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; }
ehm, fixed CSS fix, sorry :-)
.RadWindow .rwTitleWrapper {
box-sizing: content-box;
}
Raptor,
You are a ROCK STAR!!! Thank you so much!!! Did the trick!
Dave
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.
Regards,
Marin Bratanov
Progress Telerik
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.
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
;
}
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
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.
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é
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