csshtml-tableflexboxtailwind-cssdaisyui
How to set a dynamic table be scrollable in a dynamic fixed size, determined by the viewport and a neighbor div?
I'm using Preact with Tailwind and daisyUI to make my app. The idea is that the screen will have two tabs, each tab has one textarea on the left and instruction/result on the right.
I use daisyUI's radio tab lifted + tab content for tabbing, together with Tailwind's columns-2 for each tab panel for columns:
<div role="tablist" className="tabs tabs-lifted tabs-lg">
<input type="radio" name="my_tabs_2" role="tab" className="tab" aria-label="Tab 1" />
<div role="tabpanel" className="tab-content bg-base-100 border-base-300 rounded-box p-6 columns-2">
<Tab1 />
</div>
<input type="radio" name="my_tabs_2" role="tab" className="tab" aria-label="Tab 2" checked />
<div role="tabpanel" className="tab-content bg-base-100 border-base-300 rounded-box p-6 columns-2">
<Tab2 />
</div>
</div>
My problem mostly in tab 2, where I have a textarea on the left and a table on the right. Its numbers of rows and columns will be vary. I use this daisyUI's table with pinned-rows and pinned-cols code:
<textarea
rows={15}
cols={40}
/><br />
<div className="overflow-x-auto">
<table className="table table-xs table-pin-rows table-pin-cols">
...
When there is no table to display yet, the result is as expected:
However, when table appears it is pushed far away, and the tab lables width are shrunk:
If I don't use columns-2 but grid grid-cols-4 the table is not pushed far away anymore, but the result is still not desired:
Even when I try flex shrink w-30 for the table, it is still not shrunk.
I have tried to disable all the style from the devtool but still can't figure out the reasons for these behaviors.
My goal is to have everything in one screen:
- The table width is to be fixed with the rest of the width of the screen,
- The table height not limited, but its maximum is equal to the textarea
- There is a footer with fixed height. The textarea height should fill the gap between the tab name and the footer
- On phones the table should be below the textarea. The width should be fixed and scrollable, while the height has no limit
- (Optional) The widths of the textarea and the table are divided harmonically: if the sum of them is smaller than the viewport width, then the ratio between the two should equal the golden ratio and center in the screen. If not, then the minimum width of the textarea should be 40.
I guess that these can be achieved with flex or grid, but at first I need fix the above problem.
Solution
Consider having a child element of the .tab-content element that has the grid layout. This is because .tab-content has display properties to hide or show its content, so it is best not to interfere with the display property.
We can apply something like grid-template-columns: auto 1fr to have the first grid column track be as wide as the <textarea> and then the remaining content to be the remaining space available.
<script src="https://cdn.tailwindcss.com/3.4.1"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css" />
<div role="tablist" class="tabs tabs-lifted tabs-lg">
<input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 1" />
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
Tab 1
</div>
<input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 2" checked />
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
<div class="grid grid-cols-1 min-[500px]:grid-cols-[min-content_1fr] gap-5">
<textarea rows="15" cols="40"></textarea>
<div class="overflow-x-auto">
<table class="table table-xs table-pin-rows table-pin-cols">
<!-- head -->
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Job</th>
<th>Favorite Color</th>
</tr>
</thead>
<tbody>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>To have the height of the table be maximally the same as the <textarea>, we can make it absolutely-positioned so that we can guarantee it does not participate in layout calculations of the grid. I'll also assume this stipulation only applies when the <textarea> and the table are side-by-side (above 500px viewport width). I'll also assume you'd want to be able to scroll vertically through the table and thus replace overflow-x: auto with overflow: auto.
<script src="https://cdn.tailwindcss.com/3.4.1"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css" />
<div role="tablist" class="tabs tabs-lifted tabs-lg">
<input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 1" />
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
Tab 1
</div>
<input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 2" checked />
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
<div class="grid grid-cols-1 min-[500px]:grid-cols-[min-content_1fr] gap-5">
<textarea rows="15" cols="40"></textarea>
<div class="relative">
<div class="min-[500px]:absolute inset-0 overflow-auto">
<table class="table table-xs table-pin-rows table-pin-cols">
<!-- head -->
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Job</th>
<th>Favorite Color</th>
</tr>
</thead>
<tbody>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>Ideally StackOverflow, one should focus on one problem only, so I should not address the query about the layout of the footer, but I digress.
We can use a vertical flex layout to ensure the height of the <textarea> (and by extension, the table) fills any empty space between the tab headers and this imaginary footer. We'll need to adjust the grid layout within the .tabs too, so that the tabs are pinned to the top with the .tab-content stretched out as needed:
<script src="https://cdn.tailwindcss.com/3.4.1"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css" />
<div class="flex flex-col min-h-screen">
<div role="tablist" class="tabs tabs-lifted tabs-lg grow grid-rows-[max-content]">
<input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 1" />
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6 min-h-0 self-stretch">
Tab 1
</div>
<input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 2" checked />
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6 min-h-0 self-stretch">
<div class="grid grid-cols-1 min-[500px]:grid-cols-[min-content_1fr] gap-5 h-full">
<textarea rows="15" cols="40" class="h-full"></textarea>
<div class="relative">
<div class="min-[500px]:absolute inset-0 overflow-auto">
<table class="table table-xs table-pin-rows table-pin-cols">
<!-- head -->
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Job</th>
<th>Favorite Color</th>
</tr>
</thead>
<tbody>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<footer>footer</footer>
</div>- SASS inserts code comments periodically into my compiled CSS
- How to prevent text moving when transitioning sibling element's width
- MJML : Outlook 1px horizontal when using direction rtl on mj-section
- CSS in cshtml for MVC : Conditional formatting based on a keyword in text
- Semantic colors in an Angular Material component
- Flowbite CSS plugin is not working when including it in tailwind.config.js
- Can I have an onclick effect in CSS?
- Tailwind CSS height screen in mobile browser
- Margin different in Windows (Chome, Edge, etc.) and Mac OS (Safari)
- How do I use the reverse border radius at the top of a card? (CSS)
- Stacked Bootstrap progress to show multiple ranges with tooltip
- Dynamically set the printed page size using '@page'
- Creating an end screen for my game using javascript, css, and html
- CSS table layout: why does table-row not accept a margin?
- Add fontawesome to shadowroot of webcomponent
- CSS animation with the oblique
- How to change width of a Sidenav in Angular Material Design?
- Darkening an image when clicked is requiring an initial click on that image, and I don't know why
- Adding margins between Bootstrap columns
- css border: 1px appear as 0.667px or 1px depending on the computer / display resolution (?)
- How can I use a linear-gradient in a VS Code theme?
- Formatting numbers (decimal places, thousands separators, localization, etc) with CSS
- A basic jQuery slider is not sliding through images properly
- prevent :after element from wrapping to next line
- Photoshop export gradient ( .grd files )
- Display hidden not working with flex in Tailwind
- Footer on last printed page
- Make image size responsive to container dimensions while maintaining its aspect ratio
- Vertical Alignment of SVG in CSS
- Spinning number animation on value update