Rank 1
Hi
I am seeing a strange effect in all browsers when using radcheck box with the 'Simple' skin; there is a separate light grey box appearing behind the box using the Simple skin, offset by a couple of pixels. It looks like it is being rendered in Default skin AND simple skin. (attached file)
What could explain this?
I do need to use the simple skin for consistency with all other controls, so change ins not really an option.
I am using 2016 asp.net ajax control set
Thanks for advice on this
Thanks
Clive
16 Answers, 1 is accepted
The problem is most likely due to some CSS style in your web app stylesheet.
You can try to inspect with the HTML inspector tool of the browser and find it yourself. Another approach is to provide a live URL or a sample runnable project where the issue can be observed so that we can inspect it and to provide a solution.
Best regards,
Rumen
Telerik by Progress
Rank 1
I had the same problem (and also the checkbox text had 20px of left padding for some reason). It appeared that the problem was with a background image (which looked like the <asp:CheckBox when the FormDecorator is used to style it). I was able to override this background image with this css change on my page:
.rbToggleCheckbox {
background-image: none !important;
}
.rbToggleCheckboxChecked {
background-image: none !important;
}
.rbText {
padding-left: 0 !important;
}
The .rbText change is only needed if you're experiencing the padding issue as well.
Thank you for sharing your solution with the community!
Which version of Telerik.Web.UI.dll do you use?
Can you please perform a test with the latest 2017.2.711 and see whether the problem happens with RenderMode set to Classic or Lightweight?
Looking forward to hearing from you
Best regards,
Rumen
Progress Telerik
Rank 1
This is still not fixed in the latest release. Issue happens on radio buttons as well. Seems like something that should have been caught easily, but oh well. If you have forms like mine that still have the old radio/checkboxes, use the following:
.rbIcon.rbToggleCheckbox
{
background-image: none !important;
}
.rbIcon.rbToggleCheckboxChecked
{
background-image: none !important;
}
.RadCheckBox.RadButton .rbText
{
padding-left: 0 !important;
}
.rbIcon.rbToggleRadio
{
background-image: none !important;
}
.rbIcon.rbToggleRadioChecked
{
background-image: none !important;
}
.RadRadioButton.RadButton .rbText
{
padding-left: 0 !important;
}
Can you send us a sample markup or a runnable project which demonstrates the problem?
We want to investigate your scenario and fix the problem.
Best regards,
Rumen
Progress Telerik
Rank 1
Unfortunately I am still unable to reproduce the issue.
What do you mean by a custom style?
Can you specify the browser where the issue happens and share the markup of the page?
Do you experience the problem with this configuration:
<telerik:RadFormDecorator id="RadFD1" runat="server" Skin="Bootstrap" DecoratedControls="All" RenderMode="Lightweight" /><input type="checkbox" />Best regards,
Rumen
Progress Telerik
Rank 1
Below is a sample file. Attached is the result.
<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="TelerikWebApp1._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<script type="text/javascript">
//Put your JavaScript code here.
</script>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<telerik:RadProgressManager ID="RadProgressManager1" runat="server" />
<telerik:RadProgressArea ID="RadProgressArea1" runat="server"></telerik:RadProgressArea>
<div>
<telerik:RadCheckBox ID="chkTest" runat="server" Text="Test" ToolTip="TestTt"></telerik:RadCheckBox>
</div>
<telerik:RadButton ID="btnSave" runat="server" Text="Save"></telerik:RadButton>
</form>
</body>
</html>
Thank you for providing the configuration markup.
I was able to reproduce the problem with the Classic render mode. It happens because RadCheckbox is a new lightweight component that supports only the lightweight rendering and there is a mixture of render modes because of the RadButton CSS classes.
To solve the issue, please, switch to Lightweight to solve this problem:
Web.config
<?xml version="1.0"?><configuration> <appSettings> <add key="Telerik.Web.UI.RenderMode" value="classic"/> </appSettings>...You can also set the RenderMode property inline inside the controls declarations.
Best regards,
Rumen
Progress Telerik
Rank 1
Setting the RenderMode="Lightweight" didn't solve the problem for me (see attached file)?? I have no other CSS definitions so this issue is entirely a Telerik problem.
FYI, the RadCheckBox issue is ONLY present with specific Skins ... for example "Web20" skin will product the problem.
Is there any work around that actually works? Without this getting fixed it makes using Skins impossible.
Cheers, Rob.
I tried to reproduce the problem with the Web20 skin and lightweight rendering but without success.
Can you please help me in replicating it:
- Under which browser version the issue occurs?
- Is it reproducible with the latest version 2018.3.910 (R3 2018)?
- Are you able to reproduce it in the live demos of RadCheckBox?
- Ensure that the Doctype is of type HTML5 or XHTML.
- Can you reproduce it with the attached web site project? If no, can you please modify it so that it starts to reproduce it and send it back for examination via a support ticket.
Thank you! Your assistance is much appreciated.
Best regards,
Rumen
Progress Telerik
Rank 1
Rank 1
Hi Sam/Rumen,
Unfortunately setting the control itself and/or the RadSkinManager to "lightweight" didn't solve it. However, I was able to solve the problem by adding this:
<add key="Telerik.Web.UI.RenderMode" value="lightweight"/>
to my Web.Config.
Cheers, Rob.
The <add key="Telerik.Web.UI.RenderMode" value="lightweight"/> in the web.config is a global setting which applies Lightweight rendering to all Telerik controls in the web application.
This leads me believe that the problem might be due to mixed render modes, i.e. some component had lightweight, other classic rendering. This is now fixed with the global setting.
Best regards,
Rumen
Progress Telerik
Rank 1
Rumen,
I have not explicitly set the RenderMode on any individual controls. My understanding is that all controls are supposed to default to "Lightweight" if the RenderMode is not explicitly set? If that is correct, then I think the root cause of this problem is that "some" controls in your suite are NOT defaulting to "Lightweight" and instead could be defaulting to "Classic" or something else ... this would explain why the global setting in Web.Config worked.
Perhaps Telerik need to verify all their controls and make sure the default is "Lightweight"?
Cheers, Rob.
The default value of the RenderMode is still Classic (documentation) and this is mainly due to backwards compatibility reasons since there are millions of sites out there built for the Classic rendering.
The RenderMode is Lightweight when building new Telerik ASP.NET AJAX websites/applications from scratch in Visual Studio.
Kind regards,
Rumen
Progress Telerik