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

Rad Button Style Problem 2016.1.113

3 Answers 184 Views

Button

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

Joshua asked on 03 Feb 2016, 08:38 PM

radbutton.png

When adding a RadButton with an icon to a RadSlidingPane it messes up the formatting of the button and places the text under the icon.

This is the button code:

<telerik:RadButton ID="RadButton2" runat="server" Text="Test" Width="125px" Skin="Default" RenderMode="Lightweight">

<Icon PrimaryIconCssClass="rbAdd"></Icon>

</telerik:RadButton>

When I view the generated source it is adding the following in-line styles to the button.

<span class="rbText rbPrimary" style="width: 100%; padding-right: 0px; padding-left: 4px;">Test</span>

If I take the same exact button and place it outside of the RadSlidingPane the inline styles are gone and the button looks normal.

See attached image for an example of how the button displays improperly.

3 Answers, 1 is accepted

answered on 08 Feb 2016, 11:20 AM

Hello Joshua,

Thank you for your report. I am logging this for fixing and you can track its status in the following page: http://feedback.telerik.com/Project/108/Feedback/Details/182225. I hope the workaround provided there will suffice for the time being:

<script>

//this script is the workaround

function clearButtonTextInlineStyles(sender, args) {

$telerik.$(".rbText").attr("style", "");

Sys.Application.remove_load(clearButtonTextInlineStyles);

}

Sys.Application.add_load(clearButtonTextInlineStyles);

</script>

<telerik:RadButton ID="RadButton1" runat="server" Text="Test" Width="125px" Skin="Default" RenderMode="Lightweight">

<Icon PrimaryIconCssClass="rbAdd"></Icon>

</telerik:RadButton>

<telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter1" runat="server" Width="800" Height="500">

<telerik:RadPane ID="LeftPane" runat="server" Width="22px" Scrolling="none">

<telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22px" DockedPaneId="RadSlidingPane1">

<telerik:RadSlidingPane ID="RadSlidingPane1" Title="Pane1" runat="server" Width="250px"

MinWidth="130">

<telerik:RadButton ID="RadButton2" runat="server" Text="Test" Width="125px" Skin="Default" RenderMode="Lightweight">

<Icon PrimaryIconCssClass="rbAdd"></Icon>

</telerik:RadButton>

<telerik:RadButton ID="RadButton3" runat="server" Text="Test 2" Skin="Default" RenderMode="Lightweight">

<Icon PrimaryIconCssClass="rbAdd"></Icon>

</telerik:RadButton>

</telerik:RadSlidingPane>

</telerik:RadSlidingZone>

</telerik:RadPane>

<telerik:RadSplitBar ID="Radsplitbar1" runat="server">

</telerik:RadSplitBar>

<telerik:RadPane ID="MiddlePane1" runat="server" Scrolling="None">

content

</telerik:RadPane>

</telerik:RadSplitter>

I have also updated your Telerik points for bringing this to our attention.

Regards,

Marin Bratanov
Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

answered on 09 Feb 2016, 02:42 PM

radbutton2.png

Thank you for looking into this.

I tested the code above and your workaround does not seem to work for me.

I created a new project with the following code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_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">

//this script is the workaround

function clearButtonTextInlineStyles(sender, args) {

$telerik.$(".rbText").attr("style", "");

Sys.Application.remove_load(clearButtonTextInlineStyles);

}

Sys.Application.add_load(clearButtonTextInlineStyles);

</script>

<telerik:RadButton ID="RadButton1" runat="server" Text="Test" Width="125px" Skin="Default" RenderMode="Lightweight">

<Icon PrimaryIconCssClass="rbAdd"></Icon>

</telerik:RadButton>

<telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter1" runat="server" Width="800" Height="500">

<telerik:RadPane ID="LeftPane" runat="server" Width="22px" Scrolling="none">

<telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22px" DockedPaneId="RadSlidingPane1">

<telerik:RadSlidingPane ID="RadSlidingPane1" Title="Pane1" runat="server" Width="250px"

MinWidth="130">

<telerik:RadButton ID="RadButton2" runat="server" Text="Test" Width="125px" Skin="Default" RenderMode="Lightweight">

<Icon PrimaryIconCssClass="rbAdd"></Icon>

</telerik:RadButton>

<telerik:RadButton ID="RadButton3" runat="server" Text="Test 2" Skin="Default" RenderMode="Lightweight">

<Icon PrimaryIconCssClass="rbAdd"></Icon>

</telerik:RadButton>

</telerik:RadSlidingPane>

</telerik:RadSlidingZone>

</telerik:RadPane>

<telerik:RadSplitBar ID="Radsplitbar1" runat="server">

</telerik:RadSplitBar>

<telerik:RadPane ID="MiddlePane1" runat="server" Scrolling="None">

content

</telerik:RadPane>

</telerik:RadSplitter>

</form>

</body>

</html>

answered on 10 Feb 2016, 09:13 AM

workarounds.zip

Hi,

I have updated the workarounds in the Feedback portal page and I am attaching the improved versions here as well.

Regards,

Marin Bratanov
Telerik