Vertical Scrolling and Control Over Height

5 posts, 0 answers
  1. Kevin
    Kevin avatar
    5 posts
    Member since:
    Nov 2012

    Posted 20 Mar 2013 Link to this post

    I was fiddling around with the demo and discovered one can set a fixed height on the div containing the selected list items and set overflow to auto to enable vertical scrolling.  This allows rudimentary control over the height of the selections area.

    Trouble is, the new item selection drops down when the scrollbar on the containing div is clicked.  Also the div does not scroll down to the last selected item as items are selected.  If we could use the scrollbar without the item selection dropping down and have the div auto-scroll down to the last selected item we'd have a solution!

    It'd be awesome to have an example or two controlling demonstrating this, or a similar solution to control how the MultiSelect grows in height.
  2. Kevin
    Kevin avatar
    5 posts
    Member since:
    Nov 2012

    Posted 20 Mar 2013 Link to this post

    I've found that using max-height and overflow:hidden on the UL gives a lot of control over this. 

    By using focusin and focusout on the containing div, I can detect when to expand / shrink the UL via max-height.

    The next challenge is to animate the max-height changes and not open the dropdown until the UL has achieved its full max-height.  There must be a way to intercept events that cause the dropdown to open and cancel those events so I can programmatically open the dropdown after the max-height expand animation has finished.
  3. Kendo UI is VS 2017 Ready
  4. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 21 Mar 2013 Link to this post

    Hi Kevin,

    The logic of preventing the dropdown from opening is tricky - how will you distinguish between the case when the user wants to go through the already selected items and the case when the dropdown should open?

    Animation of the widget's size can be achieved with standard jQuery methods.

    What we may implement in the future is to support automatic scrolling to the focused item in the <ul> when using keyboard navigation.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Kevin
    Kevin avatar
    5 posts
    Member since:
    Nov 2012

    Posted 21 Mar 2013 Link to this post

    Successfully customized the MultiSelect to do what I want.  The important code is added directly to the end of the MultiSelect init function, right before kendo notify:
    $(that.wrapper).focusin(function(e) {
                    nextMultiSelectZIndex++;
                    $(that.wrapper).css('z-index',nextMultiSelectZIndex);
                    $(that.wrapper).children().eq(0).css('z-index',nextMultiSelectZIndex);
                    $(that.wrapper).css('max-height','400px');
                    $(that.wrapper).children().eq(0).css('max-height','400px');
                    $(that.wrapper).css('width','350px');
                    $(that.tagList).animate( { 'max-height':'400px' }, 400, function () {
                        that.options.openable = true;                  
                        if (!that.options.preventOpenOnDelete)
                            that.open();
                    });
                });
     
                $(that.wrapper).focusout(function() {
                    that.options.openable = false;
                    $(that.tagList).animate( { 'max-height':'32px' }, 400, function() {
                        $(that.wrapper).css('width','150px');
                        $(that.wrapper).css('z-index','0');
                        $(that.wrapper).css('max-height','33px');
                        $(that.wrapper).children().eq(0).css('z-index','0');
                        $(that.wrapper).children().eq(0).css('max-height','33px');
                    });
                });
    Combined with some CSS to set absolute positioning to the wrappers and set overflow:hidden on the tag list, and custom options for controlling when the widget can open (used to cancel default open on mousedown when focused) you can successfully expand/shrink the MultiSelect and have it overlay other elements when it is expanded. 

    Works great!   Thanks for creating such an awesome widget, it was very simple to customize!
  6. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 22 Mar 2013 Link to this post

    Hello Kevin,

    I am glad that you have managed to customize the widget to suit your needs and thank you for the positive feedback.

    By the way, you can move all inline styles to two external CSS rules and apply the styles via custom CSS class set to the widget wrapper.

    Greetings,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready