Power-Components / livewire-powergrid

⚡ PowerGrid generates modern, powerful and easy-to-customize data tables using Laravel Livewire.
https://livewire-powergrid.com
MIT License
1.48k stars 217 forks source link

Added Theme Table container and base for Tailwind Custom Themes #1583

Closed marcheffels closed 3 months ago

marcheffels commented 4 months ago

⚡ PowerGrid - Pull Request

Welcome and thank you for your interest in contributing to our project!. You must use this template to submit a Pull Request or it will not be accepted.


Motivation

Description

This Pull Request adds Tailwind Custom Theme container and base.

Related Issue(s): #_____.

Documentation

This PR requires Documentation update?

luanfreitasdev commented 3 months ago

Thank you @marcheffels

luanfreitasdev commented 3 months ago

I'm afraid this is a breaking change. If the theme was previously published and the class was not extended, there will be a break.

marcheffels commented 3 months ago

Hi @luanfreitasdev, I'm understanding why you cannot marge this PR.

The problem I'm trying to solve is that the current theme is breaking my site. The negative margin on the container causes the container size to be larger than the parent div.

My current workaround for my site is that I wrap all the tables in a separate div with overflow-hidden.

Suggested solutions:

1. Remove negative margin: Container changes: From class="-my-2 overflow-x-auto sm:-mx-3 lg:-mx-8" To class="overflow-x-auto" Base changes: From class="p-3 align-middle inline-block min-w-full w-full sm:px-6 lg:px-8" To class="align-middle inline-block min-w-full w-full" (I tried to find a reason for the negative margin. If there is a reason, please explain it to me.)

2. Add "overflow-hidden" to the wrapper: Change parent of container: From class="flex flex-col" To class="flex flex-col overflow-hidden"

Are any of the suggested solutions acceptable? Then I can create a new PR.

Thanks.

marcheffels commented 3 months ago

Can you check for a bootstrap theme too?

in Bootstrap theme I can't find any container, base div tag or negative margin, so I believe this problem exists only in Tailwind theme.