DataGrid Modal: Fixes fullscreen modal by applying min-height instead of height.

[tesar-tech]

Description

Closes #5718

[stsrki]

I would not call this a fix as it is not guaranteed that it would work for all providers. Also it feels "dirty" to me.

Instead, I would fix it by changing CSS where needed in our _modal.scss files. And see if it makes sense for all providers.

[tesar-tech]

There is no problem with modals; the issue is only with _DataGridModal.razor, and the root cause lies in the document structure—the Form was causing the behavior.

Another issue with the DataGrid modal was the placement of the footer. It was positioned too low, requiring scrolling to reach it. In contrast, a normal modal has its footer fixed at the bottom of the screen.

With the Form now placed differently, both modals behave the same.

The git change seems crazy, but I really just change the placement of the form

[stsrki]

There was a reason why Form was structured withing Modal. Because we need to be able to process ENTER key to submit modal form. Now that you have moved it inside of ModalMody, the buttons that are within ModalFooter no longer submits the form.

That's why CSS is a better way to fix this, as you will not break any behavior without knowing it.

You can also add a custom classname to the DataGrid modal so that you can specifically target it. eg b-datagrid-modal

[tesar-tech]

Editing the css is just a hot-fix (which you called dirty the first time), not a solution. The dataGrid modal will still behave differently then Modal (the "need to scroll to footer" issue).

We can fix both - the different modals behavior and the transparent issue - by structuring the form correctly and by
placing this

  <Button Type="ButtonType.Submit" PreventDefaultOnSubmit Disabled Display="Display.None"></Button>

inside the form. That without adding another piece of css.

Placing hidden button is technique used also in datagrid itself.

[stsrki]

I don't have problem with CSS, but with inline and strongly typed styles.

[tesar-tech]

Ok.
So, what solution you prefer now?

[stsrki]

Adding custom CSS classname to DataGrid and or DataGridModal, and then adding CSS as in your original commit seems like the best way.

[tesar-tech]

I tried, but:
What do you mean by "adding custom css classname to DataGrid"? There is no datagrid.css. Or what am I missing?

[stsrki]

Hm, I was sure we had more of them. We have one in Blazorise.FluentUI2/styles/extensions/_datagrid.scss.

[tesar-tech]

To me, this is a statement about how Blazorise extensions are constructed—by using Blazorise components. For DataGrid, it’s almost entirely built without custom styles, so it would be a shame to break that for just one CSS class.