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

Rad Button Style Problem 2016.1.113

3 Answers 142 Views
Button
This is a migrated thread and some comments may be shown as answers.
Joshua
Top achievements
Rank 1
Joshua asked on 03 Feb 2016, 08:38 PM

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

Sort by
0
Marin Bratanov
Telerik team
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
0
Joshua
Top achievements
Rank 1
answered on 09 Feb 2016, 02:42 PM

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">
 
<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>

0
Marin Bratanov
Telerik team
answered on 10 Feb 2016, 09:13 AM

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
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
Tags
Button
Asked by
Joshua
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Joshua
Top achievements
Rank 1
Share this question
or