Progress® Telerik® UI for ASP.NET MVC Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 26 Oct 2020 12:40 by ADMIN
Stephen
Created on: 09 Mar 2020 15:55
Category: Toolbar
Type: Bug Report
0
Buttons with image in overflow area, image vertically misaligned

If you have a button in the ToolBar that uses an image(rather than an icon/font), the image's vertical alignment is different in the overflow area than it is in the main ToolBar area.

The button in the overflow area has the image up too high compared to the text, which also causes the button to be taller than the "main" button as well as taller than other overflow buttons using an icon/font.

Dojo example

 

The example is simple 2 buttons(one using an icon and one with an image) with overflow: "both" so you can see both styles at the same time for comparison.

The icon button is the same in both places while the image button in the overflow area is different/taller/etc.

 

Is this a bug or expected behaviour?  If it is a bug, is there any appropriate custom CSS to make the styling consistent?

 

Thanks.

1 comment
ADMIN
Ivan Danchev
Posted on: 10 Mar 2020 15:53

Hello Stephen,

I've converted this thread to bug report, since the behavior is not expected.

As a workaround, you can align the image with the following CSS rule:

<style> 
  .k-overflow-container a>img {
   vertical-align: middle; 
   display: inline-block;
  }
</style>

I've updated your Telerik points for reporting this issue.

Regards,
Ivan Danchev
Progress Telerik

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Create an account Log In
View
Type
Status
Category