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
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
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
The correct property is "overflowTemplate". Here is the working example:
Hope this helps.
Regards,
Konstantin Dikov
Telerik by Progress
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
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