V9 prevent overflow menu in form grid panel operations

joben

I have used some custom CSS to make the 3 buttons more mobile friendly (bigger), so that they use 33.3% of the width each in a mobile form:

This works fine in AwareIM V8, but in V9 the system forces an overflow menu:

I have tried to decrease the width by a lot, but it doesn't help. I can't see any option in the form grid panel operations to prevent the overflow menu like I can in a Visual Perspective. Anyone knows of a way to stop the automatic overflow? I guess it is some Javascript that injects the overflow menu.

hpl123

I have had similar issues before (I am not on v9 yet so haven't experienced this) and the problem I had before was related to margin/padding on the left/right side of the parent container divs etc. and that margin/padding together with the width you have set for the buttons means the total width "used" is more than 100% i.e the overflow settings etc. are used. Try lowering the width for each button e.g 25% per button first and see if that works (i.e you see all buttons) and if that works, increase button width in 1% increments until you find the max width per button. This is the easy fix, you can also try experimenting with the container (s) i.e you change margin/padding instead and find what is causing this but this is a mess as Aware use many different containers etc. so it gets complex real fast.

joben

Thanks for the advice.

Here is the conclusion what had to be done. Please take into consideration that these CSS rules are somewhat general and could break stuff in other places unless you make them more specific.

V9 panel operations are inside <button> tags instead of <a> tags like before. Thats the major structural difference I can find.

V9 also includes a CSS "gap" between the buttons, make sure to set that to 0.
.aw-horiz-top-toolbar.k-toolbar-md, .k-button{gap:0;}

The overflow menu would trigger around 25% width. Using this CSS prevented the menu from appearing:
.aw-horiz-top-toolbar .k-toolbar-overflow-button{display:none;}

Now it works to have full width (33.3% width on each of the 3 buttons). There is still about 10px of inexplanaible space to the right. But it is only a minor annoyance.