template not overflow

[Peter]

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

[Konstantin Dikov]

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":

• http://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar#configuration-items.template

With that in mind, please define your overflowTemplate in order to get the desired behavior:

• http://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar#configuration-items.overflowTemplate

Regards,
Konstantin Dikov
Telerik by Progress

 

 

[Peter]

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

[Konstantin Dikov]

Hello Peter,

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

• http://dojo.telerik.com/aBAPi/4

Hope this helps.


Regards,
Konstantin Dikov
Telerik by Progress

 

 

[Nicola Tramarin]

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

[Ianko]

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