Rendering Issue

[Rob]

I am using v2011.3.527.35 and I am having a rendering issue with the RadToolBar in IE8.  Please see attachment (RadToolBar2001.jpg).  There seems to be some overlapping or incorrect offset.  There is a default skin to use the "Default" theme.  The OnLoad function only set the visibility.  I am using the previous versions images, I believe.  Suggestions?

<telerik:RadToolBar ID="RadToolBar1" runat="server" EnableRoundedCorners="true" Style="float: right;"
                    OnButtonClick="MainToolbar_ButtonClick" OnClientButtonClicking="OnClientButtonClicking">
        <Items>
            <telerik:RadToolBarButton CommandName="Back" Text="Back" ImageUrl="~/Images/BackButton.gif" />
            <telerik:RadToolBarButton CommandName="Export" OnLoad="InquiryOrMaintenanceControl_Load" Text="Export" ImageUrl="~/Images/Export.gif" />
            <telerik:RadToolBarButton CommandName="Reset" OnLoad="InquiryOrMaintenanceControl_Load" Text="Reset" ImageUrl="~/Images/Reset.gif" />
            <telerik:RadToolBarButton CommandName="DeleteAll" OnLoad="DeleteAllButton_Load" Text="Delete All" ImageUrl="~/Images/Delete.gif" DisabledImageUrl="~/Images/Delete_d.gif" />
            <telerik:RadToolBarButton CommandName="Retrieve" OnLoad="InquiryOrMaintenanceControl_Load" Text="Retrieve" ImageUrl="~/Images/Retrieve1.gif" />
            <telerik:RadToolBarButton CommandName="Import" OnLoad="MaintenanceOnlyControl_Load" Text="Upload" ImageUrl="~/Images/uploadIcon.gif" />
        </Items>
</telerik:RadToolBar>

Thanks,
Rob

[Kate]

Hi Rob,

I tested the code that you provided with the 2011.3.1305.40 version of the Telerik controls but I cannot get the appearance that you get. Can you check if you apply any custom styles that might be causing the problematic appearance?

Regards,
Kate
the Telerik team

[Rob]

Hi Kate,

I found the customized styles that were causing the rendering issues and excluded them from the solution.  Now all I need is to get the rounded corner appearance of the RadToolBar for v2011.3.527.35.  I need to maintain this version for the app, because it was developed a couple of years ago w/ the older version and works well.   I have EnableRoundedCorners="true" but the corners of the RadToolBar are not rounded.  They are square.  Do you have any suggestions?

Thanks,
Rob

[Kate]

Hi Rob,

Thank you for letting me know.

Attached to this ticket you can find a simplified runnable page where I implemented rounded corners for the RadToolBar control. However, please keep in mind that if you need to alter the width of the RadToolBar control you will also need to alter the width of the background image that is applied (background.png).

Considering the property that you set, indeed all it currently does is to set a css class whose definition is still not implemented.

Please give it a try and let me know how it goes and if you have any further questions I can assist you with.

Kind regards,
Kate
the Telerik team

[Kate]

Here is the attached file.

All the best,
Kate
the Telerik team

[Rob]

I applied your most recently attached code example and the ToolBar is rendering better, but there are still 2 issues. 

1)  If I define the ToolBar control to have 5 buttons with separators in between each button, the rounded corners background image only covers the width of 3 1/2 buttons. 

2) The corners are rounded on the left side of the control, but not on the right side.  Can you make the corners on the right side of the control rounded as well.

We're almost there!

Thanks,
Rob

[Kate]

Hello Rob,

Whit the simplified project that I sent you it is expected that you get this appearance since the sprite image that I used has a fixed width (background.png). Since the project that I attached to my previous post is a simplified example you can further alter it and enlarge the sprite image so that it matches the width of the toolbar in your scenario.  

All the best,
Kate
the Telerik team