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

Extra box using Simple skin

16 Answers 199 Views

CheckBox

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

Clive Hoggar asked on 03 Sep 2016, 03:44 PM

screen-shot-2016-09-03-at-16-39-46.png

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

answered on 23 Aug 2017, 10:12 PM

example.png

chrome-debug.png

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.

answered on 02 Oct 2017, 04:29 PM

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

answered on 09 Oct 2017, 12:45 PM

checkbox_before-custom-style.png

checkbox_after-custom-style.png

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.

answered on 11 Oct 2017, 02:12 PM

checkbox.png

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>

answered on 11 Oct 2017, 03:00 PM

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.

answered on 25 Sep 2018, 10:11 PM

radcheckboxweb20issue.jpg

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.

answered on 27 Sep 2018, 12:02 PM

RadCheckBoxWeb20WebSite.zip

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.