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

Toolbar has double hight with button right in Firefox ESR

7 Answers 18 Views
Toolbar
This is a migrated thread and some comments may be shown as answers.
Peter
Top achievements
Rank 1
Peter asked on 05 Dec 2018, 02:36 PM

Hi ,

in a toolbar with 2 buttons at right side the toolbar has 2 rows:

Dojo and screenshot in Firefox 60.3.0esr (64bit).

In Firefox 63.0.3  it is ok: the toolbar has only one row like expected.

Is there a workaround  for Firefox esr?

Peter

 

 

 

7 Answers, 1 is accepted

Sort by
0
Ivan Zhekov
Telerik team
answered on 07 Dec 2018, 03:05 PM
Hello, Peter.

It appears that "float: right" is causing the new line.

The quickest workaround I can think of is to make the toolbar not resizable (via a property) and make it flex via css. That will not work in IE 9 for sure, but should be fine in IE11 and any newer browser.

See the sample dojo -- http://dojo.telerik.com/@joneff/ehaJajOg.

Regards,
Ivan Zhekov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Peter
Top achievements
Rank 1
answered on 10 Dec 2018, 05:23 PM

Hi Ivan,

then no overflow menu is not working.

Here is example with more buttons.

http://dojo.telerik.com/OYikusOw/2

And also the right buttons must go in the overflow menu if the window is to small. The toolbar must also work on mobile device.

Regards,

Peter

 

0
Ivan Zhekov
Telerik team
answered on 11 Dec 2018, 10:47 AM
Peter,

take a look at the following example: https://dojo.telerik.com/@joneff/ADelEDEB. In the top part there is your original example, only stripped down to use ad-hoc css.

The bottom example is virtually the same, with the minor difference that I've reversed the order of the items (first the floated, then the normal). If the example looks correctly in Firefox ESR,  then you could do the same with the toolbar.

Regards,
Ivan Zhekov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Peter
Top achievements
Rank 1
answered on 14 Dec 2018, 10:04 AM

Hi Ivan,

this is not my example - I need buttons in a toolbar, the last at right position. And on small window the button should go in the overflow menu. See  http://dojo.telerik.com/OYikusOw/2  and move the splitter right until some buttons go in overflow menu.

Regards,

Peter

0
Accepted
Ivan Zhekov
Telerik team
answered on 17 Dec 2018, 08:19 AM
Peter,

The issue was with firefox 60 ESR deals with floating elements and whitespace wrapping. I've created styles to specifically target Firefox ESR 60 on top of your example: http://dojo.telerik.com/@joneff/edAPITUv.

Do note that I am undoing built in styles needed for collapsible toolbar. In other words, those styles might affect how the toolbar is behaving. I performed a couple of quick tests and I didn't find any issues, but still, there might be some.

Regards,
Ivan Zhekov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Peter
Top achievements
Rank 1
answered on 17 Dec 2018, 09:09 AM

Hi Ivan,

perfect! I did read some times ago browser-specific-css but didn't remembered.

With the inspector of the browsers I see, that the classes added to the html tag:

<html class="k-ff k-ff60">
<html class="k-ie k-ie11">
<html class="k-webkit k-webkit70">
<html class="k-edge k-edge16">

 

This make a first call of a kendo widget? i.e.  $("#toolbar").data("kendoToolBar");

What are the other browser names for Mac, Android and iOS browsers?

Regards,

Peter

 

0
Ivan Zhekov
Telerik team
answered on 18 Dec 2018, 01:28 PM
Hello, Peter.

For iOS and Android we add a "k-mobile" class to the html element. If the browser is safari, the it gets "k-safari k-safariVERSION" class. With the combination of "k-mobile" and "k-BROWSER" you pretty much have things covered. Thus far, we haven't found the need to expose a separate class. If you do need, you can check for kendo.support.mobileOS.name and it will give you ios / android depending on the version. You can then expose that class name to the HTML element.

The script is executed on document.ready, as long as you have kendo scripts loaded i.e. no widget is required on the page.

Regards,
Ivan Zhekov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Toolbar
Asked by
Peter
Top achievements
Rank 1
Answers by
Ivan Zhekov
Telerik team
Peter
Top achievements
Rank 1
Share this question
or