Extra box using Simple skin

10 posts, 0 answers
  1. Clive Hoggar
    Clive Hoggar avatar
    341 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

     

     

     

  2.
  3. Rumen
    Admin
    Rumen avatar
    13197 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.
  5. Ryan
    Ryan avatar
    1 posts
    Member since:
    Sep 2014

    Posted 23 Aug 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.

  7. Rumen
    Admin
    Rumen avatar
    13197 posts

    Posted 28 Aug 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.
  9. Sam
    Sam avatar
    65 posts
    Member since:
    Mar 2011

    Posted 02 Oct 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;
            }

  11. Rumen
    Admin
    Rumen avatar
    13197 posts

    Posted 05 Oct 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.
  13. Sam
    Sam avatar
    65 posts
    Member since:
    Mar 2011

    Posted 09 Oct 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. 
  14.
  15. Rumen
    Admin
    Rumen avatar
    13197 posts

    Posted 11 Oct 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.
  17. Sam
    Sam avatar
    65 posts
    Member since:
    Mar 2011

    Posted 11 Oct 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>

  19. Rumen
    Admin
    Rumen avatar
    13197 posts

    Posted 11 Oct 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.
Back to Top