Extra box using Simple skin

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

     

     

     

  2. Rumen
    Admin
    Rumen avatar
    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.
  3. Ryan
    Ryan avatar
    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.

  4. Rumen
    Admin
    Rumen avatar
    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.
  5. Sam
    Sam avatar
    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;
            }

  6. Rumen
    Admin
    Rumen avatar
    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.
  7. Sam
    Sam avatar
    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. 
  8. Rumen
    Admin
    Rumen avatar
    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.
  9. Sam
    Sam avatar
    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>

  10. Rumen
    Admin
    Rumen avatar
    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.
  11. Rob Ainscough
    Rob Ainscough avatar
    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.

  12. Rumen
    Admin
    Rumen avatar
    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.
  13. Sam
    Sam avatar
    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. 
  14. Rob Ainscough
    Rob Ainscough avatar
    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:

    <add key="Telerik.Web.UI.RenderMode" value="lightweight"/>

    to my Web.Config.

    Cheers, Rob.

  15. Rumen
    Admin
    Rumen avatar
    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.
  16. Rob Ainscough
    Rob Ainscough avatar
    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.

  17. Rumen
    Admin
    Rumen avatar
    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.
Back to Top