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

Image Clipping on Split Button DropDown and menus

3 Answers 305 Views

RibbonBar

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

Damon asked on 02 Mar 2012, 06:48 PM

Cutoff-Image-1.png

Cutoff-Image-2.png

SheetDelete.png

ArrangeCases.png

I noticed that on my menu dropdowns and split button dropdowns certain icons/images seem to get cut off if they have anything in their bottom area. The images are 16x16 as specified in documentation and to Microsoft standards. You can see it in the attached images. I'll attach the original icons/images as well so you can see their size. Is this as designed? Bug? What should I do?

3 Answers, 1 is accepted

answered on 07 Mar 2012, 11:21 AM

menu1.png

menu2.png

Hello Damon,

I tested your scenario with one of the images that you provided but I am not able to get the appearance that you do (you can refer to the attached images). Can you please provide the markup of the RadRibbonBar that you are using as well as clarify the version of the controls?

Greetings,
Kate
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 07 Mar 2012, 07:33 PM

I'm using RAD Controls for ASP.Net Ajax Q3 2011 (file version 2011.3.1115.35)



The issue seems to be with compatibility mode. :( If I run this in non compatibility mode it does not clip the image.



Here is the xml file I use to load the ribbon with:

<RibbonBar Width="100%" Skin="Office2007">

<Tab Text="MyRibbon">

<Group Text="Sheet">

<SplitButton Size="Large" Text="Sheet" Value="CopySheet" ToolTip="Copy Current Sheet">

<Button size="Medium" text="Copy..."></Button>

<Button size="Medium" text="Delete..." ImageUrl="Images/SheetDelete.png"></Button>

<Button size="Medium" text="Arrange..." ImageUrl="Images/ArrangeCases.png"></Button>

<Button size="Medium" text="Rename..."></Button>

<Button size="Medium" text="Manage..."></Button>

</SplitButton>

</Group>

</Tab>

</RibbonBar>

aspx file:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Untitled Page</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager ID="mymanager" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>

</Scripts>

</telerik:RadScriptManager>

<telerik:RadRibbonBar EnableViewState="false" ID="SpreadRibbon" runat="server" ImageRenderingMode="Dual" style="z-index:1000"></telerik:RadRibbonBar>

</div>

</form>

</body>

</html>

Code Behind VB:

Partial Class _Default

Inherits System.Web.UI.Page

Protected Sub SpreadRibbon_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles SpreadRibbon.Init

Me.SpreadRibbon.LoadContentFile("MyRibbon.xml")

End Sub

End Class

answered on 15 Mar 2012, 02:33 PM

Ribbon.png

Hi Damon,

I tested your code and indeed the issue occurs with the 2011.3.1115.35 version of the Telerik controls. However, after upgrading to the latest one - 2012.1.215.35 - the image render as expected and the issue not longer persists.

All the best,
Kate
the Telerik team