Please note the following MVC code:
Bug 1: The Window should have the top set by the Top() method. It does not.
Bug 2: The Window should have the top set by the HtmlAttributes() method. That does not work either.
Bug 3: The scrollable method also does nothing to the window. So this entire line seems to be omitted.
Bug 4: The window is supposed to be centered by the Kendo native code. It isn’t. The recurring editor div element is not shown until after the window centers. So the window generates, centers on the screen, then the recurring DIV is shown which expands the window downwards, then the window is shown. This makes it go off the bottom of the screen. I didn’t need vertical center anyways so I fixed this by setting the top to 40px. Which is when I ran into the above issues. However if I was not doing this, the center() issue would still be there. I fixed this in JavaScript on the event’s edit event.
Hello Paul,
I am so glad the provided solutions by my colleague Ivan has proven helpful.
Feel free to turn back to us if new questions arise.
Regards,
Eyup
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Thank you for adding the Github item for the Top and HtmlAttributes issue.
Thank you also for the Resizable option. I had totally missed that and it solves my max/min height issues.
On the remaining question - centering, I disabled my 40px top and tested again. I am unable to reproduce the centering issue. What I had been seeing was that the window got centered, and then the recurring editor was added to the edit template. So the issue only appeared when editing a recurring event. It still causes an issue when creating new though I would not consider it a bug. What I mean is, create a new event. Window pops up and is centered. Now click Daily for recurrence. Window expands downwards, and not both upwards and downwards. It is no longer centered. I swear this was happening on EDIT and not just create but it is no longer happening. So we can disregard. I am still keeping the 40px top in my app due to what I just described.
Hello Paul,
Thank you for reporting this behavior.
I've logged the following issue, which is about the Top position and the HtmlAttributes not being applied: https://github.com/telerik/kendo-ui-core/issues/7141
However, note MaxHeight and MinWidth should be set through the Resizable configuration, as shown below:
editable.Window(w => w.Position(p => p.Top(40)).HtmlAttributes(new { @class="test", style = "top: 40px;" }).Scrollable(true).Resizable(res => res.MaxHeight("calc(100vh - 400px)").MinWidth(680)));
See the effect of this configuration in the scheduler-popup-options.png screenshot. The window is 680px wide and it is scrollable.
As for the centering issue you mentioned, at my end the editor window is correctly centered vertically by default. See the scheduler-popup-centered.png screenshot. Do you happen to have any additional custom CSS that might be affecting the default behavior? I might be missing something.
Could you post your Layout <head> tag content, so I can verify whether the theme is loaded correctly?
I've updated your Telerik points for reporting this issue.
Regards,
Ivan Danchev
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.