Vertically centring elements of a CSS grid in tailwind - html

I'm trying to lay out a grid of checkboxes in CSS, using Tailwind CSS. The basic structure is this:
<div class="grid sm:grid-cols-3 gap-4">
<div>
<div>
<label for="-exact"><input type="checkbox" id="-exact" value="-exact">-exact</label>
</div>
<div>
<label for="-exact"><input type="checkbox" id="-exact" value="-exact">-exact</label>
</div>
</div>
<div>
<label for="-exact"><input type="checkbox" id="-exact" value="-exact">-exact</label>
</div>
...
</div>
So I have an outer div which is the grid, then a series of "content" divs. The first content is 2 lines high (2 checkboxes). The second is one line high (one checkbox).
My problem is that the checkbox in the second grid box is aligned to the top of the box, and I want it centred vertically. I've added background colours so I can see that the div spans the whole height of the previous grid box, but I can find no way of centring the checkbox in the containing div.
Can anyone tell me how to get the effect I want? And more so, can someone explain to me how the box model works in a way that explains why it's not doing what I want? Ideally, I'd like to be able to do this with Tailwind, for consistency, but raw CSS would be OK as well.

Align your items to the center by applying the class items-center to your grid (this method will align all your items and might affect your other child elements in an undesired manner later on when you add more elements to the grid).
<div class="grid gap-4 sm:grid-cols-3 items-center">
You can also apply either grid or flex to the parent's container, which you want to center vertically (using items-center):
<div class="flex items-center">
<label for="-exact">
<input type="checkbox" id="-exact" value="-exact"> -exact
</label>
</div>
<-- or -->
<div class="grid items-center">
<label for="-exact">
<input type="checkbox" id="-exact" value="-exact"> -exact
</label>
</div>
I'm not sure if it exactly answers your question, but the reason the elements stick to the top-left side is that it's still displayed as a block. Changing the parent to a grid doesn't change the display type of child elements.
A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.

As far as I understood your error, the second div element positions on the top of the whole grid element but you want it to be in the center. Check this snippet out if that's the issue: (I have vertically centered the second grid column)
<!doctype html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!--Main grid element with 2 child divs-->
<div class="grid grid-flow-col gap-4">
<!--First child div with 2 sub child div displayed as columns-->
<div class="flex flex-col">
<div class="p-5 bg-yellow-300">
<label for="-exact"><input type="checkbox" id="-exact" value="-exact">-exact</label>
</div>
<div class="p-5 bg-red-300">
<label for="-exact"><input type="checkbox" id="-exact" value="-exact">-exact</label>
</div>
</div>
<!--Second child with 1 div element, centered in its place-->
<div class="p-5 bg-green-300 h-full flex items-center">
<label for="-exact"><input type="checkbox" id="-exact" value="-exact">-exact</label>
</div>
</div>
</body>
</html>
Explanation: To place elements in center (or change their position), you have to give it a display name e.g. block, flex, grid etc. Then there are couple ways you could go and center/position your element. The most efficient one would be to use the relevant styles related to the display name. For example:
For Flex model, you'd use justify-content: center which in Tailwind would be justify-center classname to center an element vertically. And to horizontally center it, you'd use align-items: center which in Tailwind would be items-center classname.
For Grid model, you'd use place-items: center which in Tailwind would be place-items-center classname to center an element vertically & horizontally.
These are a bit different for each display property. You can look that up on google if you don't know. Hope that helps.

Related

Justify content and align items not working in flexbox

I am trying to format some divs using flex box. However, justify content or align items properties are not working and I can't figure out why. In 2 flex column divs, I have tried to use the mentioned properties but they have had no effect. I have put the code below. I am using tailwind and react.
The HTML is basically displaying one div whose width is the screen size. Inside the div, there are two divs. The first is an absolute div that is just there to provide a special background to the left half of the parent div. The second div is in the foreground and has some padding on the sides so it is in line with the page style. It has two divs in it that occupy the left and right half. I want to apply flex properties to the child divs here.
{/* container */}
<div className="w-screen relative mb-10">
// background div that provides a colour background to only the left half of the parent div
<div
id="backgroundShape"
className="w-1/2 bg-grey-400 absolute h-full -z-20"
></div>
// div that holds the actual text and image content for the foreground
<div className="mx-auto container px-6 xl:px-28 flex py-10">
// left half of content, this gets displayed over the background div
<div className="w-1/2 flex-col justify-center pr-20 ">
<div>
Heading 1
</div>
<div className="text-4xl">
Heading 2
</div>
<div className="grid grid-cols-2 grid-rows-2 gap-x-6 gap-y-3">
<div>
<FaScroll className="" />
<h3 className="text-lg">
Subheader
</h3>
<p className="text-sm">
Description
</p>
</div>
</div>
</div>
// right half of content displaying two images in a column
<div className="w-1/2 flex-col pl-10 justify-center">
<div>
<img
src="https://www.w3schools.com/images/w3schools_green.jpg"
alt="image"
/>
</div>
<div>
<img
src="https://www.w3schools.com/images/w3schools_green.jpg"
alt="image"
/>
</div>
</div>
</div>
</div>
The id="backgroundShape" uses a clip-path property to give the background a special shape. I think it is irrelevant to my issue but I have included the style.
#backgroundShape {
clip-path: polygon(95% 0, 100% 50%, 95% 100%, 0 100%, 0 0);
}
If I can clarify anything please do comment. Would appreciate any help with this, thanks!
the items-center and justify-center because you didn't add the flex class to the child divs, the only change you need to do is this:
// div that holds the actual text and image content for the foreground
<div className="mx-auto container px-6 xl:px-28 flex py-10">
// left half of content, this gets displayed over the background div
<div className="w-1/2 flex flex-col justify-center pr-20 ">
<div>
Heading 1
</div>
<div className="text-4xl">
Heading 2
</div>
<div className="grid grid-cols-2 grid-rows-2 gap-x-6 gap-y-3">
<div>
<FaScroll className="" />
<h3 className="text-lg">
Subheader
</h3>
<p className="text-sm">
Description
</p>
</div>
</div>
</div>
// right half of content displaying two images in a column
<div className="w-1/2 flex flex-col pl-10 justify-center">
<div>
<img
src="https://www.w3schools.com/images/w3schools_green.jpg"
alt="image"
/>
</div>
<div>
<img
src="https://www.w3schools.com/images/w3schools_green.jpg"
alt="image"
/>
</div>
</div>
</div>

Using flexbox grow but allow the content to overflow

I'm a bit new to using flexbox and I've ran into one problem I can't seem to fix.
What I want:
I want to have a container taking the available height, but whenever the content inside it takes up more space than the containers height, apply overflow:scroll
Context:
Ref image:
container image
As you see on the image, everything inside of the red brackets are covered inside of a div with flex-grow:1, I want this because the images might be different sizes so therefore I need the div to take the reamining space.
As for the white container, that is also using flex-grow:1 so that the button can be on the bottom of the div.
Now, what I would like is for the content inside of the blue brackets to be taking the available height, but if there is more content than the available height, then I want it to be scrollable.
The thing that happens now if I add a lot more content to the container inside of the blue brackets, it pushes everything below it further down, meaning the overflow isn't working.
E.g Like so
As you see in the image, everything is just pushed further down and the div is being stretched.
Here is the code I have so far:
<div class="flex flex-col grow overflow-y-auto w-3/4 my-2 mx-auto bg-white max-h-full">
<!-- img -->
<div>
<img [src]="currentUser.photoURL" class="w-full mx-auto">
</div>
<!-- information -->
<div class="flex flex-col text-black grow">
<!-- Info -->
<div class="flex flex-col p-2 divide-y grow overflow-y-auto">
<div class="flex flex-col">
<p class="font-bold">{{currentUser.displayName}}</p>
<p class="font-thin">{{currentUser.email}}</p>
</div>
<div class="p-2 overflow-y-auto max-h-[90%]">
<div class="h-full grow-0 overflow-y-auto">
<p>
some information about {{currentUser.displayName}}
</p>
<ul>
<li>
Some values are
</li>
<li>
Some experience are...
</li>
<li>
Why im helping people...
</li>
</ul>
</div>
</div>
</div>
<!-- Message -->
<div class="shrink-0 p-2 text-center w-full bg-blue-500">
<button>Send melding</button>
</div>
</div>
</div>
I'm using tailwindCSS for this project, but will happily take suggestions in normal css as well.
I think the simplest solution for this would be to set the div you want to be a scrollable as "display: block" (or at least some version of block) with a fixed height. Once you apply that fixed height, your overflow content ought to be scrollable.

Center vertically while ignoring other elements

I'm trying to center this burger. I used "grid place-items-center" so it gets centered and "h-screen" in order to let it be centered in the full height.
The problem is that it's not in the center, obviously because of the logo at the top.
how do i ignore this logo and center it anyways?
The navbar i'm coding
Greetings, PixelPage
You are almost there. The only thing you need to do is add a w-full to the parent div of logo (the one with the absolute class).
<div class="fixed left-0 h-screen bg-gradient-to-t from-[#07C8F9] to-[#6D8AE4] w-24">
<div class="w-full absolute grid place-items-center mt-8">
<img src="/assets/branding/logo-white.png" class="w-12 h-12"></img>
</div>
<div class="grid place-items-center h-full">
<img src="/assets/common/Burger.png" class="w-16 h-16"></img>
</div>
</div>
Hope this helps.
Read through this guide, it is invaluable, and I reference it all the time. It should help you figure out how to use grid to place your items: https://css-tricks.com/snippets/css/complete-guide-grid/

how to make html label text inherit div properties

I have a test label in a col-6 div. the text should have the width of the div with col-6 class.
this is how it looks now
how can i make the text inherit the div's width?
<div class="col-md-6">
<div class="form-group">
<div>
<input type="checkbox"/>
<div class="state p-danger">
<div [inlineSVG]="'assets/svg/accept.svg'"></div>
<label>I will also be available to meet during the event so list me with the available resources</label>
</div>
</div>
</div>
</div>
Put white-space: nowrap in your .state.p-danger element. This will make texts getting outside of bounds go the next line instead.

HTML / CSS Vertical align two lines next to radio

I'm trying to have two lines aligned to the middle of a radio button, shown below.
What is the best way to achieve this with CSS? I can line up the top line but the bottom line is super stubborn. I'm trying not to float the radio, if possible, as it is being restyled using a jquery plugin.
Thanks for your help!
EDIT:
here's my code that I've been working with:
<div>
<input id="method-{{Description}}" type="radio" name="project[shipping-method]" value="{{Description}}" />
<label for="method-{{Description}}" class="pb-shipping-method-label">{{Description}} ({{DeliveryTime}})
<span>{{Price}}</span></label>
</div>
Two divs, one holding the radio and one holding the text. Set the line-height of the radio div to equal the height of the text div. Also add a vertical-align:middle to the radio itself.
Here's a demo: http://jsfiddle.net/AlienWebguy/JffCD/
Play with vertical-align or margin-top property of your input element.
I achieved this with no extra markup whatsoever. http://jsfiddle.net/KFpXQ/
Good luck :)
Bootstrap 4 with flexbox way:
<div class="d-flex flex-column">
<div class="d-flex flex-row">
<div class="pr-2"><input type="radio" /></div>
<div><label for="...">Name 1<br />Price 1</label></div>
</div>
<div class="d-flex flex-row">
<div class="pr-2"><input type="radio" /></div>
<div><label for="...">Name 2<br />Price 2</label></div>
</div>
</div>
Result: