shesha-io / shesha-framework

An open-source Low-Code development framework for .NET developers. Create .NET based business applications with 80% less code.
https://shesha.io
Apache License 2.0
370 stars 73 forks source link

DataTable overflow affects ButtonGroup/Actions styling when `Freeze Headers` is enabled #2212

Open hlayisanimazuze opened 1 week ago

hlayisanimazuze commented 1 week ago

When the dataTable content exceeds the container boundaries, it causes layout issues that affect the styling of the ButtonGroup or Actions components. This results in misalignment or overlapping of UI elements, disrupting the overall appearance. The overflow issue occurs specifically when the Freeze Headers option is set to true

Steps to reproduce the behavior from scratch:

  1. Navigate to: https://functional-adminportal-test.azurewebsites.net/dynamic/shesha/forms
  2. Click on create new and create a new table view
  3. Afterwards, configure the dataTable and also add action configuration
  4. Save your changes
  5. From the dataTable, set Freeze Headers to true
  6. Preview the form
  7. Afterwards, exist the preview mode
  8. Check if the dataTable is still within the main container region or it goes beyond it, if it does, then proceed to check the buttonGrouo and action column styling

Actual Behavior: When Freeze Headers is enabled, the overflow from the dataTable distorts the styling of the ButtonGroup or Actions, causing misalignment

Expected Behavior: The dataTable should remain contained within the region, and the Freeze Headers feature should not affect the styling of the ButtonGroup or Actions components.

Here's a link that is already affected: https://functional-adminportal-test.azurewebsites.net/shesha/forms-designer?id=eb5f4fa8-2cd1-45bd-a157-e070e7739eee

See attached video: https://jam.dev/c/2de25520-8039-4bb4-a6cc-36441bd79189

hlayisanimazuze commented 1 week ago

Related #758