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

RadButton Styles not working on initial entry

4 Answers 313 Views
Button
This is a migrated thread and some comments may be shown as answers.
Marcel
Top achievements
Rank 1
Marcel asked on 07 Jan 2016, 10:55 PM

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>
                                  

4 Answers, 1 is accepted

Sort by
0
Marcel
Top achievements
Rank 1
answered on 07 Jan 2016, 11:14 PM

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

0
Marcel
Top achievements
Rank 1
answered on 08 Jan 2016, 06:11 PM

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>

0
Marcel
Top achievements
Rank 1
answered on 08 Jan 2016, 06:24 PM
Works fine in Chrome, but not in IE11 (with or without compatibility mode).
0
Danail Vasilev
Telerik team
answered on 12 Jan 2016, 11:31 AM
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
Tags
Button
Asked by
Marcel
Top achievements
Rank 1
Answers by
Marcel
Top achievements
Rank 1
Danail Vasilev
Telerik team
Share this question
or