Popup edit click button twice after invalid value

[Dan]

Hi,

I am trying to use the telerik popup editor for a grid but I have discovered an inconvenience and I was wondering if there are solutions to this.

On the demo page of the telerik grid try to add a new row with only one invalid value. Press update button. The invalid message appears by changing the size of the popup. Also the position of the Update button has changed. Write a valid value and do not leave the control. Press the update button. The invalid message disappears but the popup remains open and the Update button changes position again. So you as a user have to press again the update button.

Is there a recommended solution for this?

[Stefan]

Hello, Dan,

Thank you for the steps.

I followed them, but the issue was not reproducible. Please view the video and advise if I missed something:

https://www.screencast.com/t/Q9M88NK8YI0

Sharing a video of the issue could prove helpful as well.

Regards,
Stefan
Progress Telerik

[Dan]

Hi Stefan,

Indeed you are using the material theme. Also you can see in the video that the window does not changes size when you press update. Please use the bootstrap theme, the one that display the validation message in a separate span and changes the size of the window.

PS: Could you please consider changing your avatar image, when I receive an email your avatar image is displayed fully in the email and the message is so small that I can barely read it 

[Stefan]

Hello, Dan,

Thank you for clarifying the used theme, this was indeed the missing part to reproduce the issue.

I can confirm that this is an issue with the current version of Kendo UI Grid.

I created an issue in our GitHub repository and forwarded it to our developers for fixing. You can track its progress at:

https://github.com/telerik/kendo-ui-core/issues/4109

For now, there is no available workaround, if one is found it will be added to the GitHub issue for reference.

Additionally, I updated your Telerik points for bringing this to our attention.

Regards,
Stefan
Progress Telerik

[Dan]

Hi Stefan,

Thank you for looking into this. As a workaround I am trying to give the popup a greater minim height, but the buttons are not sticking to the bottom of the popup. How can I make the buttons remain at the bottom of the popup so I can have the buttons remaining in the same place regardless if the validations spans are visible on the screen or not.

[Stefan]

Hello, Dan,

In my testing scenarios and the video attached to the issue to buttons, the position is not changed.

If the behavior shown in the video is different than the one in the real application, please share with us how the popup is moving the buttons on your end, so we can try to provide a suggestion for it?

Also, ensure that there are no additional styles interfering with the popup appearance.

Regards,
Stefan
Progress Telerik

[Dan]

Hi Stefan,

When I am talking of position of buttons, I am talking of the position of the buttons related to the screen. As you can see from the video you placed on the git issue the position of the buttons on the screen changes because the validation span becomes visible.

What I have tried is set a minim height on ".k-edit-form-container" but the buttons remain on the window in the same position fixed to the top instead on moving to bottom as I would like.

[Stefan]

Hello, Dan,

Some modifications could be made to buttons wrapper, but this could still not produce the desired result on 100%.

Please check the following example:

https://dojo.telerik.com/upIFimOt

In general, this is the built-in expected behavior for the new themes and event after the fix on the update button click the warning positioning will still be the same.

Apologies for the caused inconvenience.

Regards,
Stefan
Progress Telerik

[Dan]

Hi Stefan,

Unfortunally setting the max-height on the popup window does not solve the problem since the window still changes size when the validations appear.

Anyway the solution I found was to give the container a min-height that included the validation spans and for the edit buttons to place them absolute. The scss is:

.page-fix-editor .k-edit-form-container {
   min-height: 150.5px; // my popup has only one field
}

.page-fix-editor .k-edit-buttons {
   position: absolute;
   top: 85px;
   left: $window-inner-padding-y;
   width: 400px; // this is the default width of the popup
}

[Stefan]

Hello, Dan,

I'm glad to hear that you have found a solution to this and I would like to thank you for sharing it with the Kendo UI community.

Please let us know if you need information or assistance on this matter.

Regards,
Stefan
Progress Telerik