What's causing the filter menu container to drop all the way down.

[David]

 

I'm not sure why the menu container is all the way down to the browser bottom.  Did I miss a CSS style sheet?

 

kendo.common-fiori.min.css
kendo.fiori.min.css
kendo.fiori.mobile.min.css
kendo.mobile.fiori.min.css
kendo.dataviz.fiori.min.css

[David]

adding screen shot

[David]

screenshot

[Alexander Valchev]

Hi David,

This is not a known issue. Is it possible for you to create a Kendo Dojo example that isolates the issue so I can examine it and investigate what is going wrong?

Looking forward to your reply.

Regards,
Alexander Valchev
Telerik

 

 

[David]

It's a little tough since I don't know what causes it.  It does seem like the grid calculates the size of the window and populates in the the DIV container with class "k-animation-container".  In the following screen shot, the 767px height is what is set by the grid.  The next screen shots shows the correct height that I edited.

Can you give me clues how that height is determined?  Setting it to Auto collapsed the DIV and thus no border.

 

 

[Alexander Valchev]

Hello David,

The height is calculated based on the available screen space and anchor position. If you are interested you may examine the src/kendo.popup.js and src/kendo.filtermenu.js.

Issue are likely to occur if the parent container is hidden (or being animated and the animation is not finished yet).

Regards,
Alexander Valchev
Telerik

 

 

[David]

Is there something I need to set if I handled my own filter menu options.  I also use a javascript function to handle the AJAX call for the filter options.

 

var dataSource =
            {
                transport: {
                    read: function (options) {                        
                        $.ajax({
                            type: "POST",
                            url: column.filterUrl,
                            datatype: "json",
                            contentType: "application/json; charset=utf-8",
                            data: data,   // ParameterMap does not work when transport methods are using functions
                            success: function (result) {                            
                                if (result.d.Success) {
                                    // notify the DataSource that the operation is complete
                                    options.success(result.d.Data);
                                } else {
                                    toastr.error("There was an issue loading the filter options.", "Error");
                                    options.error(result);
                                }
                            }
                        });                       
                    }                   
                }
            };

[David]

Is there a JS function for me to call to tell it to resize?  

[David]

I found the issue.  the FORM was set to height of 100% in a custom CSS that got applied for the filter menus since it has a form in it.