Problem with RadSwitch in Web User Control

1 Answer 71 Views

Ajax Switch

Jorge asked on 17 Aug 2024, 01:06 AM

RSOffWrong-Inspect-1.JPG

RSOffWrong-Inspect-2.JPG

RSOffWrong.JPG

RSOnRight-Inspect-1.JPG

RSOnRight-Inspect-2.JPG

RSOnRight-Inspect-3.JPG

RSOnRight.JPG

RSOnWrong-Inspect-1.JPG

RSOnWrong-Inspect-2.JPG

RSOnWrong-Inspect-3.JPG

RSOnWrong.JPG

Hi,

I am trying to implement RadSwitch in a Web Forms application. I copied the CSS from the Telerik Demo. When I apply the CSS class to a RadSwitch contained directly in the web form, it displays correctly. However, when I apply the same class to a RadSwitch contained in a web user control, it doesn’t display correctly.

I have tried several workarounds, including copying the CSS and embedding it into the web user control, but nothing works. The RadSwitch still displays incorrectly. The web user control and the RadSwitch that displays correctly are not in the same web form.

Here is the CSS:

/*Create elastic RadSwitch*/
.RadButton.RadSwitch.elasticSwitch .k-switch-handle {
width: 2em !important;
height: 2em !important;
display: flex !important;
}

.RadButton.RadSwitch.k-switch-on.elasticSwitch .k-switch-handle {
left: calc( 100% - 2em) !important;
display: flex !important;
}

.RadButton.RadSwitch.elasticSwitch,
.RadButton.RadSwitch.elasticSwitch .k-switch-container {
width: 4em !important;
display: flex !important;
}

Here are the CSS references for the web form and the web user control:

Web form CSS reference:

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<link href="<%= Page.ResolveUrl("~/CSS/Custom.css") %>" rel="stylesheet" type="text/css" />
</asp:Content>

Web user control CSS reference:

Here is the HTML for the correctly displaying RadSwitch:

<telerik:RadSwitch runat="server" ID="TipoRequerimientoRequiereAcuse" Checked="false"
CssClass="elasticSwitch"
AutoPostBack="false">
</telerik:RadSwitch>

And here is the HTML for the RadSwich in the web user control:

<telerik:RadSwitch runat="server" ID="chkInformativo" Checked="false"
CssClass="elasticSwitch"
AutoPostBack="false">
</telerik:RadSwitch>

I am including some captures of both controls in runtime and some captures from both element analyses.

Has anyone else experienced this situation before? How did you solve it?

1 Answer, 1 is accepted

answered on 21 Aug 2024, 01:36 PM

Hello Jorge,

Thank you for the provided files.

Do you reference the CSS file inside the USerControl as well? Because the Switch inside the UserCotrol will use the same CSS file being used by the page it is currently inside:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
<%@ Register Src="~/WebUserControl.ascx" TagPrefix="uc1" TagName="WebUserControl" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="~/CSS/Custom.css" rel="stylesheet" type="text/css" />
</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>

        <telerik:RadSwitch runat="server" ID="chkInformativo" Checked="false"
            CssClass="elasticSwitch"
            AutoPostBack="false">
        </telerik:RadSwitch>

        User control
        <uc1:WebUserControl runat="server" ID="WebUserControl" />
    </form>
</body>
</html>

UserControl:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>


<telerik:RadSwitch runat="server" ID="chkInformativo" Checked="false"
    CssClass="elasticSwitch"
    AutoPostBack="false">
</telerik:RadSwitch>

CSS:

.RadButton.RadSwitch.elasticSwitch .k-switch-handle {
    width: 6em !important;
    height: 6em !important;
    display: flex !important;
}

.RadButton.RadSwitch.k-switch-on.elasticSwitch .k-switch-handle {
    left: calc( 100% - 2em) !important;
    display: flex !important;
}

.RadButton.RadSwitch.elasticSwitch,
.RadButton.RadSwitch.elasticSwitch .k-switch-container {
    width: 10em !important;
    display: flex !important;
}

Result:

Regards,
Vasko
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!

Jorge

commented on 28 Aug 2024, 04:09 AM

Hi Vasko

Thanks for your answer. Yes, I referenced the CSS in the web user control as well, but it didn’t display correctly. Later, I embedded the CSS directly, and it still didn’t work. I wonder why, even if I remove the CSS class from the switch in the web user control, it keeps displaying the same odd way.

Regards

Vasko

commented on 28 Aug 2024, 07:53 AM

Hi Jorge,

I noticed the URL to the stylesheet is being added by using the Page.ResolveUrl() method, whereas I'm using the regular link tag,

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <link href="<%= Page.ResolveUrl("~/CSS/Custom.css") %>" rel="stylesheet" type="text/css" />
</asp:Content>

<link href="~/CSS/Custom.css" rel="stylesheet" type="text/css" />

Can you try using just the URL without the method, to see if that will load it correctly?

Regards,
Author nickname
Progress Telerik