First time i'm using css grid and i have problems with getting an equal content of my 3 columns when adding gap between them.
I'm not sure it's a tailwind problem (with the predefined classes) or with the grip or where the solution can come from (what i'm missing).
Here is an illustrative example:
https://codepen.io/erkage/pen/VwmxeRG
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css">
<div class="grid grid-cols-3 space-x-3 items-stretch mt-10 m-auto border border-gray-900" style="width:800px">
<div class="bg-blue-200 py-2">
<label class="block">Label 1</label>
<input type="text" class="rounded-lg border border-gray-400 py-2 w-full" placeholder="266px">
</div>
<div class="bg-blue-200 py-2">
<label class="block">Label 2</label>
<input type="text" class="rounded-lg border border-gray-400 py-2 w-full" placeholder="254px">
</div>
<div class="bg-blue-200 py-2">
<label class="block">Label 3</label>
<input type="text" class="rounded-lg border border-gray-400 py-2 w-full" placeholder="254px">
</div>
</div>
The HTML:
<div class="parent">
<div class="child">this is larger than 2-3</div>
<div class="child2">this is equal with 3rd</div>
<div class="child2">this is equal with 2nd</div>
</div>
The used css are (which comes from tailwind):
.parent {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.child2 {
margin-right: calc(0.75rem * 0);
margin-left: calc(0.75rem * calc(1 - 0));
}
And i know that the main problem comes from that child 2 and 3 has a margin and 1 not but looking for a builtin solution (with css grid) if it exist.
Also child 1 can't have margin-left because of design circumstences.
replace space-x-3 by gap-x-3
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css">
<div class="grid grid-cols-3 gap-x-3 items-stretch mt-10 m-auto border border-gray-900" style="width:800px">
<div class="bg-blue-200 py-2">
<label class="block">Label 1</label>
<input type="text" class="rounded-lg border border-gray-400 py-2 w-full" placeholder="266px">
</div>
<div class="bg-blue-200 py-2">
<label class="block">Label 2</label>
<input type="text" class="rounded-lg border border-gray-400 py-2 w-full" placeholder="254px">
</div>
<div class="bg-blue-200 py-2">
<label class="block">Label 3</label>
<input type="text" class="rounded-lg border border-gray-400 py-2 w-full" placeholder="254px">
</div>
</div>
Related
I wanted to add spacing between the Choose Files button and the text on right side. How can I do so by tailwind CSS. I had added the code below .
<script src="https://cdn.tailwindcss.com"></script>
<section class="body-font text-gray-600">
<div class="container mx-auto px-5 py-24">
<div class="mx-auto flex flex-col items-start lg:w-2/3">
<label class="title-font mb-2 text-sm font-medium text-gray-900" for="multiple_files">Upload multiple files</label>
<input class="w-full cursor-pointer rounded-lg border border-gray-300 bg-gray-100 px-4 py-2 text-lg text-gray-600 file:rounded-lg file:border-none file:bg-indigo-600 file:p-2 file:text-white hover:file:cursor-pointer hover:file:bg-indigo-500" id="multiple_files" type="file" multiple="" />
</div>
</div>
</section>
you can add margin-right to file, use this selector file:mr-4
<input class="file:mr-4" id="multiple_files" type="file" multiple="" />
have a look here :
https://play.tailwindcss.com/scMYVnSVjY
In my vue component I have a form, there I'm trying to add two fields with labels
<div class="bg-certstyle-background-light " slot="modal_content">
<div class="flex justify-between">
<div class="container mx-auto flex bg-white px-6 py-4 border-b space-x-2">
<!-- Team member -->
<dashboard-input-label class="col-sm-2 mb-2 w-full" identifier="first_name">
{{ 'Team member' }}
</dashboard-input-label>
<div class="col-sm-10 mb-6 w-full">
<input
name="first_name"
type="text"
class="form-input w-full relative z-10"
placeholder="Search user"
>
</div>
<!-- Team member -->
</div>
<div class="container mx-auto flex bg-white px-6 py-4 border-b space-x-2">
<!-- Schedule name -->
<dashboard-input-label class="col-sm-2 mb-2 w-full" identifier="schedule_name">
{{ 'Schedule name' }}
</dashboard-input-label>
<div class="col-sm-10 mb-6 w-full">
<input
name="schedule_name"
type="text"
class="form-input w-full relative z-10"
placeholder="Schedule name"
>
</div>
<!-- Schedule namer -->
</div>
</div>
</div>
This is what I've tried so far, But the problem is, this gives me following output,
Instead of this way, I want to add the second label and field in a new row...
How can I do it?
You could have a outer div-container with a flex-direction: row with two div-container with flex-direction: column inside, which represent your label and field.
Or this bootstrap example could fit: "Two Columns With Two Nested Columns"
Example:
<div class="col">
<div class="row">
<div class="col-sm-6" style="background-color:green;">One</div>
<div class="col-sm-6" style="background-color:red;">Two</div>
</div>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">Three</div>
<div class="col-sm-6" style="background-color:blue;">Four</div>
</div>
<div class="col">
Another alternativ could be a css-grid.
Some nice tips for flex and grid
I am making form in next.js and i am unable to place the form vertically in the center of the screen. I am using one way that allows me to center it but it changes my form original size
the code without center of screen
import React from "react";
function SignUp() {
return (
<div className="h-screen bg-gray-50 pt-5 ">
<form className=" grid grid-cols-1 gap-4 p-9 rounded-xl shadow-xl bg-gray-50 max-w-sm mx-auto ">
<h1 className="text-2xl font-bold text-purple-600 ">
SignUp{" "}
<span className="text-sm font-normal text-gray-400">
to Trading Application
</span>
</h1>
<div>
<input className="input" type="text" placeholder="Company Name..." />
</div>
<div>
<input className="input" type="text" placeholder="Username..." />
</div>
<div>
<input className="input" type="text" placeholder="Email..." />
</div>
<div>
<input className="input" type="text" placeholder="Password..." />
</div>
<div>
<input
className="input"
type="text"
placeholder="Confirm Password..."
/>
</div>
<button className="btn btn-purple mt-3 rounded-full">
Create Account
</button>
</form>
</div>
);
}
export default SignUp;
code with center of screen trick but this trick changes the size of my form
<div className="h-screen bg-gray-50 pt-5 grid grid-cols-1">
<form className="place-self-center grid grid-cols-1 gap-4 p-9 rounded-xl shadow-xl bg-gray-50 max-w-sm mx-auto ">
<h1 className="text-2xl font-bold text-purple-600 ">
SignUp{" "}
<span className="text-sm font-normal text-gray-400">
to Trading Application
</span>
</h1>
<div>
<input className="input" type="text" placeholder="Company Name..." />
</div>
<div>
<input className="input" type="text" placeholder="Username..." />
</div>
<div>
<input className="input" type="text" placeholder="Email..." />
</div>
<div>
<input className="input" type="text" placeholder="Password..." />
</div>
<div>
<input
className="input"
type="text"
placeholder="Confirm Password..."
/>
</div>
<button className="btn btn-purple mt-3 rounded-full">
Create Account
</button>
</form>
</div>
tailwind code for btn, btn-purple & input
#layer components {
.input {
#apply border border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent shadow-md rounded-lg px-3 py-2 w-full font-light
transition duration-300;
}
.btn {
#apply rounded-md py-2 px-3 border-transparent focus:outline-none transition duration-500 uppercase font-medium;
}
.btn-purple {
#apply bg-purple-600 text-white hover:bg-purple-700;
}
}
these are the only line of code i used in my project and nothing more.
I want to vertically center the form without effecting any other changes to my form
i have got the solution of the problem
<div className="h-screen bg-gray-100 p-10 grid grid-cols-1 ">
<div className="place-self-center">
<form className=" grid grid-cols-1 gap-4 p-9 rounded-xl shadow-xl bg-gray-50 max-w-sm mx-auto ">
/* ..... some context ....*/
</form>
</div>
</div>
if we wrap our form into two divs and make parent div(div1) a grid and by using place-self-center class on child div(div2) then the size will not be effected and the context will automatically place in the vertical middle of the screen
<div className="h-screen grid grid-cols-1" >
1
<div className="place-self-center" >
2
<form>
context
</form>
</div>
</div>
I'm new using Tailwind and I have a simple text with input that consists of two rows
fiddle
Code:
<div>
<div
class="text-center p-4 flex flex-col space-x-5 space-y-4 md:flex-row md:space-y-0 md:space-x-4 md:justify-center"
>
<p class="text-center">Value:</p>
<div class="w-40">
<input
v-model="model.currentValue"
class="p-2 border-2 border-black-500 outline-none focus:bg-gray-100 w-10"
/>
</div>
</div>
<div
class="text-center p-4 flex flex-col space-x-5 space-y-4 md:flex-row md:space-y-0 md:space-x-4 md:justify-center"
>
<p class="text-center">Daily Value to upload:</p>
<div class="w-40">
<input
v-model="model.incrementBy"
class="p-2 border-2 border-black-500 outline-none focus:bg-gray-100 w-10"
/>
</div>
<button #click="update">Upload</button>
</div>
</div>
As you can see the two text are not vertically aligned, the same for inputs
issue
How can I align text to left and center it to input? Regards
Use CSS grid for this:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="p-4 grid grid-cols-2 gap-x-2">
<p class="text-right my-2">Value:</p>
<div class="text-left">
<input v-model="model.currentValue" class="p-2 border-2 border-black-500 outline-none focus:bg-gray-100 w-10" />
</div>
<p class="text-right my-2">Daily Value to upload:</p>
<div class="text-left">
<input v-model="model.incrementBy" class="p-2 border-2 border-black-500 outline-none focus:bg-gray-100 w-10" /><button #click="update">Upload</button>
</div>
</div>
With tailwindcss 2 / Alpinejs 2.8 I try to show items till 3 elements in 1 rows and
next 4th element must be on next line, something like I did wuth php/bootstrap :
<div class="row m-2">
#foreach($hostelFacilities as $nextFacility)
<div class="facility_item col-12 col-sm-4">
{!! $viewFuncs->showAppIcon('check') !!} {{ $nextFacility->name }}
</div>
#endforeach
</div>
I tried to make like :
<div class="flex w-full" >
<template x-for="nextCategory in categories" :key="nextCategory.id">
<div class="border px-2 cursor-pointer w-4/12 flex flex-nowrap" >
<input type="checkbox"
x-model="searchSelectedCategoryIds"
:value="nextCategory.id"
class="editor_checkbox_field"
>
<label :for="'cbx_' + nextCategory.id"
class="whitespace-nowrap md:flex-shrink-0"
x-text="nextCategory.name">
</label>
</div>
</template>
But failed, as all items are in 1 row...
How correct?
Thanks!
In such case, I highly recommend to use grid system.
Here's an exmaple of 3 in one row.
<div class="grid grid-cols-3 gap-1">
<div class="col-span-1 h-20 bg-gray-100">1</div>
<div class="col-span-1 h-20 bg-gray-100">2</div>
<div class="col-span-1 h-20 bg-gray-100">3</div>
<div class="col-span-1 h-20 bg-gray-100">4</div>
<div class="col-span-1 h-20 bg-gray-100">5</div>
<div class="col-span-1 h-20 bg-gray-100">6</div>
<div class="col-span-1 h-20 bg-gray-100">7</div>
<div class="col-span-1 h-20 bg-gray-100">8</div>
</div>