Trouble with popupCollision option

[Bridge24]

Hi, we have a menu that is near the right edge of our screen.

So, we need to use the popupCollision option to prevent it to went over the window.

We tried the [popupCollision = "fit"] attribute, and that works fine by allowing the menu to be displayed a little bit to the left of the "top box", without going over the windows edge.

Also, we have submenus. So we also need to make these submenu open to the left instead of right if there's no place.

So, we also tried the [popupCollision = "flip"].  
Now, the submenu opens to the left, but we have the intial problem of the menu being outside the screen.

Third option, like your documentation suggests, we used [popupCollision = "fit flip"]

(http://docs.telerik.com/kendo-ui/api/javascript/ui/menu#configuration-popupCollision)

But, I think there's a bug, both can't be used together.

"flip" is applied, but "fit" is not.

Can we get both working at the same time? Your documentation said we can.

http://dojo.telerik.com/@foxontherock/UkIZa/2

Can I suggest, if it works fine, to set the "fit flip" as the default option? :-)
I don't see any use case where I wouldwant to use it!

[Dimiter Topalov]

Hello Dani,

The described behavior is not a bug, but maybe the "fit" and "flip" behavior explanations from the documentation are not clear enough.

The popupCollision option configures the collision in two directions - horizontally and vertically. If only "fit" or "flip" is set, this corresponds to "fit fit" or "flip flip" - fit both horizontally and vertically or flip in both directions.

When "fit flip" is passed this translates to "fit" horizontally and "flip" vertically. What you seem to expect is when "fit flip" is passed the behavior to be to both fit and flip horizontally - this is not supported and cannot be configured.

I can recommend several of alternatives:

1) Use the "k-rtl" class instead of the floating, to make the whole menu right-to-left oriented:

http://dojo.telerik.com/OmoQI/3

2) Use the direction option to configure the menu opening direction:

http://dojo.telerik.com/OmoQI

3) Utilize the open event and conditionally change the opening direction, depending on some custom logic (in the following example - if the currently opened item is a submenu of the right-most column, the direction is set to "bottom left", else - to "bottom right"):

http://dojo.telerik.com/OmoQI/4

I hope this helps.

Regards,
Dimiter Topalov
Telerik

[Bridge24]

Hi. I don't really want my menu to be "right aligned", I need it as it works "by default". But, I did that to prevent you to resize the center bar to see the bug.

So, let's start again: 

http://dojo.telerik.com/@foxontherock/iFUvE
From that "doho", resize the right zone with the vertical center bar, to make the"item 5" fit the border of the window, just before it goes on the second row, you will get the issue we need to fix.

We don't want to change the direction or orientation for normal menus (1 to 4 are OK), only the last, only if it's near the edge.

So, when we are in that situation, the "fit" and "flip" both does part of what we need.
But, we need them together at the same time.  

So, I still think that this is a bug, because:
   when we set the "fit flip",the "flip" is applied, but the "fit" is ignored.

It's not because it is not well explained in the documentation, it just doesn't work.

[Dimiter Topalov]

Hello Dani,

My understanding is that you would like the "fit" and "flip" settings to be able to work at the same time for the same direction, i.e. horizontally. Unfortunately, such a behavior is currently not supported. When both words are supplied as a popupCollision property value, the first word corresponds to resolving horizontal collision, and the second one - to vertical one. Vertical collisions typically occur when the menu appears at the bottom of the screen, and maybe this is why you have not seen the effect of the second setting (in this case - "flip").

Generally, "fit" and "flip" does not make sense to be activated at the same time for the same menu item group. The best option would be to use "fit" when expanding the root item, and "flip" when expanding a child item. This will need some research to confirm if it is possible or feasible to implement and I can suggest submitting a feature request on our feedback portal:

http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback

In the meantime, I suggest the following workaround to achieve the desired behavior:

http://dojo.telerik.com/OmoQI/4

Regards,
Dimiter Topalov
Telerik