Rad Button Style Problem 2016.1.113

4 posts, 0 answers
  1. Joshua
    Joshua avatar
    3 posts
    Member since:
    Jun 2014

    Posted 03 Feb Link to this post

    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.

     

     

     

     

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 08 Feb Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Joshua
    Joshua avatar
    3 posts
    Member since:
    Jun 2014

    Posted 09 Feb in reply to Marin Bratanov Link to this post

    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>

  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 10 Feb Link to this post

    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
Back to Top