Extra box using Simple skin in UI for ASP.NET AJAX CheckBox

Clive Hoggar

348 posts

Member since:
Nov 2008

Posted 03 Sep 2016 Link to this post

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

Screen Shot 2016-09-03 at 16.39.46

Rumen

Admin

14106 posts

Posted 05 Sep 2016 Link to this post

Hi Clive,

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

Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.

Ryan

7 posts

Member since:
Sep 2014

Posted 23 Aug 2017 Link to this post

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.

Rumen

Admin

14106 posts

Posted 28 Aug 2017 Link to this post

Hi Ryan,

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

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Sam

66 posts

Member since:
Mar 2011

Posted 02 Oct 2017 Link to this post

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

Rumen

Admin

14106 posts

Posted 05 Oct 2017 Link to this post

Hi Sam,

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

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Sam

66 posts

Member since:
Mar 2011

Posted 09 Oct 2017 in reply to Rumen Link to this post

Hi Rumen,see screen shots attached. First is before styling. Second is after styling. There is no additional relevant styling being done on the page that would affect this. The above styling is what I must do to fix it.

Rumen

Admin

14106 posts

Posted 11 Oct 2017 Link to this post

Hi,

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

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Sam

66 posts

Member since:
Mar 2011

Posted 11 Oct 2017 in reply to Rumen Link to this post

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>

Checkbox.png

Rumen

Admin

14106 posts

Posted 11 Oct 2017 Link to this post

Hi,

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

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Rob Ainscough

262 posts

Member since:
Jan 2010

Posted 25 Sep 2018 in reply to Rumen Link to this post

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.

RadCheckBoxWeb20Issue.jpg

Rumen

Admin

14106 posts

Posted 27 Sep 2018 Link to this post

Hi 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

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.

RadCheckBoxWeb20WebSite.zip

Sam

66 posts

Member since:
Mar 2011

Posted 27 Sep 2018 in reply to Rob Ainscough Link to this post

Rob, ensure you are setting lightweight directly on the control and not in a RadSkinManager. I still occasionally run into this with some of our older code and setting the control itself to lightweight will fix it. You are correct that the problem only happens with specific skins - Web20 and WebBlue being the two I've come across.

Rob Ainscough

262 posts

Member since:
Jan 2010

Posted 27 Sep 2018 Link to this post

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:

to my Web.Config.

Cheers, Rob.

Rumen

Admin

14106 posts

Posted 28 Sep 2018 Link to this post

Great news, 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

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.

Rob Ainscough

262 posts

Member since:
Jan 2010

Posted 28 Sep 2018 in reply to Rumen Link to this post

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.

Rumen

Admin

14106 posts

Posted 01 Oct 2018 Link to this post

Hi guys,

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

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.