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

template not overflow

5 Answers 159 Views
Toolbar
This is a migrated thread and some comments may be shown as answers.
Peter
Top achievements
Rank 1
Peter asked on 19 Aug 2016, 05:13 PM

Hi,

How can a template overflow in a toolbar?

In http://demos.telerik.com/kendo-ui/toolbar/index  I change

{
    template: "<input id='dropdown' style='width: 150px;' />",
    overflow: "never"
},

to

{
    template: "<input id='dropdown' style='width: 150px;' />",
    overflow: "always"
},

but the dropdownlist doesn't overflow.

Peter

5 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 23 Aug 2016, 07:13 AM
Hello Peter,

As documented in the following help article, when you define a template without defining an overflowTemplate, the overflow of that item will be handled as "never", regardless of the fact that you are explicitly setting it to "always":
With that in mind, please define your overflowTemplate in order to get the desired behavior:


Regards,
Konstantin Dikov
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Peter
Top achievements
Rank 1
answered on 23 Aug 2016, 08:32 AM

Hi Konstantin,

thank you. But it doesn't work with the dropdownlist:

{
  template: "<input id='dropdown' style='width: 150px;' />",
  overflowtemplate: "<input id='dropdown' style='width: 150px;' />",
  overflow: "always"
},

 

would be nice, you can fix the modified example: Toolbar: dropdown with overflow

Regards,

Peter

0
Accepted
Konstantin Dikov
Telerik team
answered on 23 Aug 2016, 10:44 AM
Hello Peter,

The correct property is "overflowTemplate". Here is the working example:
Hope this helps.


Regards,
Konstantin Dikov
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Nicola Tramarin
Top achievements
Rank 1
answered on 07 Apr 2017, 10:22 AM

Hello,

I have the same problem of Peter, but I'd like to use overflow:"auto" for the dropdownlist.

If in the dojo I change the dropdown overflow from "always" to "auto" I have a wrong behavior:

http://dojo.telerik.com/aBAPi/18

Is there a way to have a dropdownlist in a toolbar in "auto" mode?

Thank you very much

0
Ianko
Telerik team
answered on 11 Apr 2017, 06:26 AM

Hello Enrico,

 

Note the auto mode (which is default) will show the item only when the viewport is shrinking to a size where the toolbar item is not visible.

 

Also, note that both overflow and normal templates are rendered to the DOM and same DOM elements with same IDs is not suggested to be used.

 

Check out this dojo here: http://dojo.telerik.com/aBAPi/20.

 

On a side note, due to UX best practices, when it comes to dropdown-like tools in the overflow, we recommend rather using plain buttons that open a dialog of some sort with the more complex tools instead of using them directly in the overflow part. Or, if the overflow functionality is to be used in mobile only, you can safely use the native select element.

 

Regards,
Ianko
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Toolbar
Asked by
Peter
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Peter
Top achievements
Rank 1
Nicola Tramarin
Top achievements
Rank 1
Ianko
Telerik team
Share this question
or