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
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
Rank 1
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
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
Rank 1
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
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
Rank 1
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
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