Can add scroll only on tbody? I try write in tailwind scrollable table, I use grid. I add on the whole element, it doesn't look good.
The example shows a table in a grid 3x3, the table has 2 rows and 2 columns
My Code
<div class="h-screen w-full grid gap-2 p-2" style="grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);">
<div class="col-span-2 row-span-2 rounded-xl bg-white overflow-auto">
<table class="table-auto w-full">
<thead class="sticky top-0 bg-gray-700 text-white">...</thead>
<tbody>...</tbody>
</table>
</div>
<div class="rounded-xl bg-white">02</div>
</div>
example https://jsfiddle.net/z6seLjgq/12/
Related
This project is done with Angular and Tailwind CSS.
Issue:
My divs do not take up all the space available. Each 'a' is a div with a blue background color. The whitespace is the empty space I would like to get rid of
My code:
Here are the simplified contents of my main html file
<div class="container !mx-0 flex flex-row justify-between">
<app-photo-card
*ngFor="let photo_card of photo_cards"
[photo_card]="photo_card"
[class]="'w-full'"
></app-photo-card>
</div>
simplified contents of main ts file
photo_cards = [
{
title: 'a',
content: "",
img_src: '',
},
];
and here are the contents of my photo card component html file
<div class="w-full">
<div class="w-full bg-blue-500">a</div>
</div>
Tried a similar version of this code with vanilla html and css and it seemed to work as expected. Really unsure on what I'm doing wrong here.
Expected output would be the 4 'a' divs with the blue background spanning across the screen which would result in no whitespace.
If you are using flexbox, use class flex-grow instead of w-full.
here is an example check here
<div class="container flex flex-row justify-around">
<div class="flex-grow">
<div class="w-full bg-red-500 text-center">a</div>
</div>
<div class="flex-grow">
<div class="w-full bg-red-400 text-center">a</div>
</div>
<div class="flex-grow">
<div class="w-full bg-red-300 text-center">a</div>
</div>
<div class="flex-grow">
<div class="w-full bg-red-200 text-center">a</div>
</div>
</div>
Angular's component have implicitely set display: inline to it, which means that the component will take as much space as it's content. That's the reason setting a width to it, does not have any effect. Try setting display: inline-block to your app-photo-card component (either from the parent or from the component itself using the host selector.
Here is a much simpler solution in my opinion, while still using flexbox. I achieve that by adding flex-grow class to the component instead of w-full.
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class="container flex flex-row justify-around bg-gray-300">
<div class="flex-grow">
<div class="w-full bg-blue-500 text-center">a</div>
</div>
<div class="flex-grow">
<div class="w-full bg-blue-400 text-center">a</div>
</div>
<div class="flex-grow">
<div class="w-full bg-blue-300 text-center">a</div>
</div>
<div class="flex-grow">
<div class="w-full bg-blue-200 text-center">a</div>
</div>
</div>
It turns out my issue was that the tailwind css container class has a max-width property setting.
class breakpoint properties
container None width: 100%;
sm (640px) max-width: 640px;
md (768px) max-width: 768px;
lg (1024px) max-width: 1024px;
xl (1280px) max-width: 1280px;
2xl (1536px) max-width: 1536px;
Removing the container class worked for me.
I'm using tailwind for CSS.
I have a simple div that has 3 children.
I want them to have space between them in the main-axis. Here's my whole code:
<div className="grid grid-cols-12 text-white justify-between">
<div className='col-span-5'>COL_SPAN_5</div>
<div className='col-span-3'>COL_SPAN_3</div>
<div className='col-span-3'>COL_SPAN_3</div>
</div>
But it is not working. The items in the grid don't move.
I tried using the justify-items-center property to see if anything changes. It works.
Using justify-between or any justify-content property doesn't work.
It's also not working in vanilla CSS.
Here's the working example:
https://codepen.io/anas-ansari/pen/xxparoM
I know that it can be fixed by adding gap-{n} but it I want space in between (not around in any case).
My question is why can't I apply justify-content even when I have seen (I think) some examples using justify-content on grid?
Can you please help me?
If you want space around the items like:
item1 <space> item2 <space> item3. You can add the css property (for example: gap:20px;) to your .container class. In Tailwind the class named gap-{n} (for example: gap-4).
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="grid grid-cols-12 justify-between gap-4">
<div class='col-span-5 bg-yellow-400'>COL_SPAN_5</div>
<div class='col-span-3 bg-green-400'>COL_SPAN_3</div>
<div class='col-span-3 bg-red-300'>COL_SPAN_3</div>
</div>
You can use any of the two property gap-4 or space-x-4.
<script src="https://cdn.tailwindcss.com"></script>
<!-- using gap property -->
<div class="grid grid-cols-12 text-black bg-red-100 space-x-10 mb-10">
<div class='col-span-5 bg-red-300'>COL_SPAN_5</div>
<div class='col-span-3 bg-green-300'>COL_SPAN_3</div>
<div class='col-span-3 bg-blue-300'>COL_SPAN_3</div>
</div>
<!-- using space-x property -->
<div class="grid grid-cols-12 text-black bg-red-100 gap-10 ">
<div class='col-span-5 bg-red-300'>COL_SPAN_5</div>
<div class='col-span-3 bg-green-300'>COL_SPAN_3</div>
<div class='col-span-3 bg-blue-300'>COL_SPAN_3</div>
</div>
Try to put gap-4 or gap-6
<div className="grid grid-cols-12 text-white justify-between gap-4">
<div className='col-span-5'>COL_SPAN_5</div>
<div className='col-span-3'>COL_SPAN_3</div>
<div className='col-span-3'>COL_SPAN_3</div>
</div>
I'm using TailwindCSS and want to display the example 2D grid of 4 x 4 cells. Each cell should have a width of w-8 and a height of h-8.
The first solution would be using flexbox rows
<script src="https://cdn.tailwindcss.com"></script>
<div>
<div class="flex">
<div class="w-8 h-8 shadow">1</div>
<div class="w-8 h-8 shadow">2</div>
<div class="w-8 h-8 shadow">3</div>
<div class="w-8 h-8 shadow">4</div>
</div>
<div class="flex">
<div class="w-8 h-8 shadow">5</div>
<div class="w-8 h-8 shadow">6</div>
<div class="w-8 h-8 shadow">7</div>
<div class="w-8 h-8 shadow">8</div>
</div>
<div class="flex">
<div class="w-8 h-8 shadow">9</div>
<div class="w-8 h-8 shadow">10</div>
<div class="w-8 h-8 shadow">11</div>
<div class="w-8 h-8 shadow">12</div>
</div>
<div class="flex">
<div class="w-8 h-8 shadow">13</div>
<div class="w-8 h-8 shadow">14</div>
<div class="w-8 h-8 shadow">15</div>
<div class="w-8 h-8 shadow">16</div>
</div>
</div>
I would like to know if I can achieve the same result using a grid
<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-4">
<div class="shadow">1</div>
<div class="shadow">2</div>
<div class="shadow">3</div>
<div class="shadow">4</div>
<div class="shadow">5</div>
<div class="shadow">6</div>
<div class="shadow">7</div>
<div class="shadow">8</div>
<div class="shadow">9</div>
<div class="shadow">10</div>
<div class="shadow">11</div>
<div class="shadow">12</div>
<div class="shadow">13</div>
<div class="shadow">14</div>
<div class="shadow">15</div>
<div class="shadow">16</div>
</div>
The example above shows that the grid stretches along the x axis. I have no control over the cell size. How can I tell the grid to use a specific width and height for each cell?
For my case width and height are equal, because each cell is a square. I don't mind if solutions use plain CSS!
1st way - parent's width
You cannot control size of a cell in a Tailwind's grid-cols-{n}, but you may still control parent's width. w-32 and h-32 are just w-8 times 4 (as you need 4 on 4 cells)
<div class="grid grid-cols-4 w-32 h-32">
<div class="shadow">1</div>
...
<div class="shadow">16</div>
</div>
2nd: CSS utilities
Tailwind's grid-cols-{n} will be rendered as grid-template-columns: repeat(n, minmax(0, 1fr)); in CSS - every column will has equal sizes. To specify width you may change minmax(0, 1fr) to a required value. More about CSS grid templates you may find here
Tailwind provides you a way to add custom utility classes
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer utilities {
.grid-32px-css {
grid-template-columns: repeat(4, theme('width.8')); /* or just use 32px instead of theme('width-8') like grid-template-columns: repeat(4, 32px) */
grid-template-rows: repeat(4, theme('height.8'));
}
}
and use ot like
<div class="grid grid-32px-css">
<div class="shadow">1</div>
...
<div class="shadow">16</div>
</div>
3rd: utitlity plugin
Basically same thing as above but within tailwind.config.js file
const plugin = require('tailwindcss/plugin');
module.exports = {
plugins: [
plugin(({ addUtilities }) => {
const utilities = {
'.grid-32px': {
'grid-template-columns': "repeat(4, theme('width.8'))",
'grid-template-rows': "repeat(4, theme('height.8'))",
}
};
addUtilities(utilities);
}),
],
}
<div class="grid grid-32px">
<div class="shadow">1</div>
...
<div class="shadow">16</div>
</div>
Note: name of utility class could be any - you're in charge
DEMO
I have a built a split page layout that, is perfectly aligned as it was intended:
Constructed using:
<div className="flex flex-wrap">
<div className="w-full md:w-1/2 h-screen overflow-hidden order-last lg:order-first md:order-first">
<div className="flex h-screen">
<div class="m-auto max-w-3xl px-5">
{TeamData.slice(0, 1).map((item, index) => {
return (
<div>
<h1 className="text-3xl xs:text-2xl md:text-3xl lg:text-5xl xl:text-6xl mb-5">{item.name}</h1>
<p className="text-xl leading-10 uppercase mb-5 text-gray-700">{item.title}</p>
<p className="text-xl leading-10 mb-5">{item.bio}</p>
</div>
);
})}
</div>
</div>
</div>
<div className="bg-green w-full md:w-1/2 h-screen order-first lg:order-last md:order-last">
<img className=" object-contain h-screen w-full" src={require('../images/johne_doe.png').default} data-aos="fade-up" alt="John Doe" />
</div>
</div>
Upon screen resizing to sizes smaller than 1440px in width, however, the portrait images get considerably offset from the bottom.
How can I keep in its bottom alignment on smaller viewports using tailwind?
Add object-bottom to an image tag.
Yoг can find information about object-{side} here
So I'm writing a code where I need to evenly place cards next to each other with rows when using flex. However, I'm getting some spacing on the right side and can't work out a reason why is that happening. I tried inspecting the element, but it just shows the entire card extends to the right, but there is no real reason behind why it does that. I've scrolled through CSS code, and there's no additional width on the right.
<section id="jobs">
<!--Employing cards-->
<div class="container-fluid container-fluid-shorter bg-white">
<!--Assistant card-->
<div class="row">
<div class="col-md-6 col-lg-4 my-3">
<div class="card width-37">
<div class="card-body d-flex align-items-center justify-content-between">
<h6 class="card-title font-weight-lighter pb-3">Custom units</h6>
<p class="card-text">
<h4 class="text-grey font-weight-light text-capitalize pb-3 pt-3">home page hero</h4>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 my-3">
<div class="card width-37">
<div class="card-body d-flex align-items-center justify-content-between">
<h5 class="card-title font-weight-lighter pb-3">Vlastní jednotky</h5>
<p class="card-text">
<h4 class="text-grey font-weight-light text-capitalize pb-3 pt-3">home page hero</h4>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 my-3">
<div class="card width-37">
<div class="card-body d-flex align-items-center justify-content-between">
<h5 class="card-title font-weight-lighter pb-3">Vlastní jednotky</h5>
<p class="card-text">
<h4 class="text-grey font-weight-light text-capitalize pb-3 pt-3">home page hero</h4>
</div>
</div>
</div>
</div>
</div>
<!--End of employing cards section-->
</section>
Adjustments I've made to the CSS :
.width-37{
max-width: 37.5vh;
}
.card-body{
padding-left: 0; !important;
padding-right: 0; !important;
}
I'm trying to place all the items in the row where there is a small spacing between each item and all items will create rows as you set rows for different screen sizes large, medium, small. For some reason flex item is doing spacing on the right side of each item there is. It is 480 pixels wide and 180 height. I would like it to be 180 x 180 pixels so same height and width. Anyone got an idea on why is this happening?
.width-37{
max-width: 37.5vh;
}
This is causing the spacing on right side. Also, there should be no ; before !important
This is due to how block level elements are rendered and not a Flexbox specific issue. Block level elements always take up the full width of the containing element. If you set a width on a block level element, and it does not fill the containing element, the remaining space will be filled with margin.
Example
div {
min-height: 24px;
}
div:nth-child( 1 ) {
width: 100px;
background-color: rebeccapurple;
}
div:nth-child( 2 ) {
max-width: 200px;
background-color: gold;
}
div:nth-child( 3 ) {
width: 20vw;
background-color: silver;
}
<div></div>
<div></div>
<div></div>
The default flow of content is left to right and why the element is to the left. All the space to the right of each element is margin. This is what is happening inside of your Bootstrap column elements.
This is the why
*Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
Documentation here
In order to remove the padding on your gutter you can add the class no-gutters to your row.