RadButton Styles not working on initial entry

5 posts, 0 answers
  1. Macrel
    Macrel avatar
    32 posts
    Member since:
    Aug 2008

    Posted 07 Jan Link to this post

    Hello,

    I have a custom style sheet, which I use successfully with various controls. I have an issue with a RadButton which I am trying to use as an image button. I find that on initial entry the RadButton styles are not taking effect. On postback the styles DO take effect. Other styles from the same stylesheet DO take effect immediately on initial entry against other controls defined in the same user control.

    Some specifics: 1) This is a SharePoint web part which defines user controls dynamically. One of these user controls has the RadButton (which has the problem) and also contains other controls (which DO work).

    2) I am using a RadAjaxPanel - all User Controls are added to this Panel.

    3) The buttons are disabled in the code on initial entry.

    4) the gradient styling does not work at all.

    Here is an extract from the styles.css:

     

    .classImage
    {
        background: url(images/previousAsset200x23.png), linear-gradient(to bottom, #f2f2f2, #a9a9a9),
           -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cbcbcb)),
           -moz-linear-gradient(top, #f2f2f2, #a9a9a9) ;
        background-position: 8px 2px;
        background-repeat:no-repeat;
        width: 250px;
        height: 23px;
        border: solid;
        border-radius: 4px;
        border-width: 1px;
        border-color:black;
        /*padding: 0px 7px 0px 4px ;*/  /* top right bottom left */
        padding: 2px 4px;
    }
     
    .classHoveredImage
    {
        /*background-position: 0 -10px;*/
    }
     
    .classPressedImage
    {
        /*background-position: 0 -20px;*/
    }

    Here is an extract of the ascx file:

    <SharePoint:CssLink ID="cssLink1" runat="server" DefaultUrl="XXX.SharePoint.YYY/Styles.css" />
        <telerik:RadPanelBar ID="RadPanelBar1" runat="server" ExpandMode="FullExpandedItem" Width="900px" Height="116px">
            <Items>
                <telerik:RadPanelItem Text="Asset Search" Expanded="true" >
                    <ContentTemplate>
                        <table style="width:100%; text-align:center">
                            <tr>
                                <td>       
                                    <telerik:RadButton ID="PreviousAssetRadButton" runat="server" Width="210px"
                                         Height="23px" Text="Previous Asset" ButtonType="StandardButton"
                                        ToolTip="Find the prior asset on the pipeline."
                                        OnClick="PreviousAssetRadButton_Click"
                                        CssClass="classImage" HoveredCssClass="classHoveredImage"
                                        PressedCssClass="classPressedImage"
                                        Image-IsBackgroundImage="true">
                                        <Image
                                       ImageUrl="/_layouts/15/images/XXX.SharePoint.YYY/previousAsset56X23.png"
                                            EnableImageButton="true"  />
                                    </telerik:RadButton>
                                      

  2. Macrel
    Macrel avatar
    32 posts
    Member since:
    Aug 2008

    Posted 07 Jan in reply to Macrel Link to this post

    Well I found the issue. I had the following code in OnPreRender page event. Removing the disabling of the controls allows the CSS to take effect immediately. I wonder whether I need a DisabledImageUrl parameter on the Image tag? Moving this code to OnLoad did not change the behavior, so I still need some help please.

    // disable the buttons until they are usable
    if (!Page.IsPostBack)
    {
        _searchUserControl.PreviousAssetRadButton.Enabled = false; 
        _searchUserControl.NextAssetRadButton.Enabled = false;
    }

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Macrel
    Macrel avatar
    32 posts
    Member since:
    Aug 2008

    Posted 08 Jan in reply to Macrel Link to this post

    My issue has moved on a bit - now the width of the RadButton is being set incorrectly on the client side. I set it to 120px in the ASCX, but it is somehow set to 94px on the client (seems to depend on the button text). I checked the width in the server code in OnPreRender and it is 120px.

    Below I show latest stylesheet, ascx and F12 Developer Tools.

    div .rbImageButton   /* see article: How To Override Styles in a RadControl for ASP.NET AJAX' */
    {
        text-align:right;
    }
    .classImage
    {
        background: url(images/previousAsset56x23.png), linear-gradient(to bottom, #f2f2f2, #a9a9a9);
        background-position: 8px 2px;
        background-repeat:no-repeat;
        text-align:right;
        border: solid;
        border-radius: 4px;
        border-width: 1px;
        border-color:#a9a9a9;
        /*padding: 0px 7px 0px 4px ;*/  /* top right bottom left */
        padding: 2px 12px;
    }

    <%@ Register Assembly="Telerik.Web.UI, Version=2015.3.1111.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <SharePoint:CssLink ID="cssLink1" runat="server" DefaultUrl="XXX.SharePoint.YYY/Styles.css" />
        <telerik:RadPanelBar ID="RadPanelBar1" runat="server" ExpandMode="FullExpandedItem" Width="900px" Height="116px">
            <Items>
                <telerik:RadPanelItem Text="Asset Search" Expanded="true" >
                    <ContentTemplate>
                        <table style="width:100%; text-align:center">
                            <tr>
                                <td>       
                                    <telerik:RadButton ID="PreviousAssetRadButton" runat="server" Width="140px" Height="23px" Text="Previous Asset" 
                                        ToolTip="Find the prior asset on the pipeline." OnClick="PreviousAssetRadButton_Click"
                                        CssClass="classImage"
                                        Image-IsBackgroundImage="true" Image-EnableImageButton="True" Image-ImageUrl="/_layouts/15/images/PCS.SharePoint.ADS/previousAsset56X23.png">
                                    </telerik:RadButton>
                                      
                                    <telerik:RadButton ID="NextAssetRadButton" runat="server" Width="120px" Height="23px" Text="Next Asset"
                                        ToolTip="Find the next asset on the pipeline." OnClick="NextAssetRadButton_Click" 
                                        CssClass="classImage" Image-IsBackgroundImage="true" Image-ImageUrl="/_layouts/15/images/PCS.SharePoint.ADS/nextAsset56X23.png" Image-EnableImageButton="True">
                                    </telerik:RadButton>
                                </td>

  5. Macrel
    Macrel avatar
    32 posts
    Member since:
    Aug 2008

    Posted 08 Jan in reply to Macrel Link to this post

    Works fine in Chrome, but not in IE11 (with or without compatibility mode).
  6. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 12 Jan Link to this post

    Hello Macrel,

    This behavior is expected - the computed width will be 120px which consists of borders and paddings as well - http://screencast.com/t/aG8ohsdc231

    Regarding Chrome and IE - both browsers render the same output - http://screencast.com/t/Fp5w1NCn9hV4. I have also attached an isolated version of the mentioned sample.

    Regards,
    Danail Vasilev
    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
UI for ASP.NET Ajax is Ready for VS 2017