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>- make html text input field grow as I type?
- HTML text-overflow ellipsis detection
- Dynamic Flickr background image for CSS tag
- Applying a Stylesheet Within One Div Only
- Why `cursor: pointer` and `:hover` property is not being applied?
- Height of flex element is not respected unless display: table is set?
- InertiaJS - Vue - Laravel : Utilizing CSS Files
- How can I center the title in Appbar.Header in react-native-paper?
- How to exactly specify the height of a navigation bar
- Javascript carousel like-presentation gallery
- min-height:100%; height:100%; not working
- I'm trying to place the placeholder in the border of the input field
- Float CSS attribute causing parent div not to inherit height?
- Using margin on flex items
- CSS After Element to insert mailto link?
- Can I create a div with a Curved bottom?
- Position sticky on thead
- Is it possible to have a default CSS style if no other styles are applied?
- Lenis Scroll: Unable to scroll to bottom of page
- Svelte Responsive Menu does not show vertical items on narrow screen
- CSS Print Layout - Printing on a Single Page
- CSS print media query prints only first page
- Triple dot CSS animation on a loading screen
- Choosing the most ideal font format
- How can I make the contents of a fixed element scrollable only when it exceeds the height of the viewport?
- Logging when a CSS variable not found
- Why does `justify-content: stretch` require `flex-grow` to make input elements expand
- Add CSS cursor property when using "pointer-events: none"
- Auto-adjusting textarea to be the same height as inner-text onkeydown
- Continuous CSS rotation animation on hover, animated back to 0deg on hover out