RadButton Styles not working on initial entry

[Marcel]

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>

[Marcel]

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;
}

[Marcel]

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>

[Marcel]

Works fine in Chrome, but not in IE11 (with or without compatibility mode).

[Danail Vasilev]

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