i'm facing this problem with grid where when i add a row-gap property the grid items will overflow in the bottom and cover other elements..how can i prevent this from happening? is there a way to make the grid parent's height increase automatically to fit the changes after gap is added?
i'm using react and bootstrap in my project..but to style the grid i'm using mainly CSS only
CSS
.items-grid{
display: grid;
grid-template-columns: repeat(4,1fr);
row-gap: 3%;
}
REACT.JS JSX
<div>
<div>
<div className="items-grid w-80 mx-auto">
{itemsList.map((item) => {
return <Item key={item._id} title={item.title} image={item.image} />
})}
</div>
</div>
<div className="w-90 mx-auto text-center my-5">
<h4 className="d-inline">"Some text"</h4>
</div>
</div>
here is what i end up with, as you can see the last row is overflowing in the bottom covering the elements below..what can i do to fix this?
Related
I have a design where I have 3 items. 2 items should be placed vertically and 1 item has to be in it's own cell. So, 2 items should be placed in 1 cell vertically and 1 item takes it's own whole cell. To demonstrate, below is the image
How can I achieve this design using tailwind?
You can make such layout using grid - separate your layout on three columns (sidebar + main content spans on two columns) and 2 rows like #ChenBr did
<div class="border-2 grid grid-cols-3 grid-rows-2">
<div class="border-2 col-span-1">1</div>
<div class="border-2 col-span-2 row-span-2">2</div>
<div class="border-2 col-span-1">3</div>
<div>
However grid-rows-2 will be compiled as
.grid-rows-2 {
grid-template-rows: repeat(2, minmax(0, 1fr));
}
1fr for both rows means 2 rows will be sized equally. So I would recommend to change this class into grid-rows-[min-content_1fr] - that mean first row will take place base on its minimum content
min-content - is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.
and the second one will take the rest - but it's up to your application
Basic example
<div class="grid grid-cols-3 grid-rows-[min-content_1fr]">
<div>1</div>
<div class="col-span-2 row-span-2">2</div>
<div>3</div>
<div>
DEMO
You can achieve this setup using grid/flex. Using one or the other depends on your content.
Grid:
Create a three-by-two grid using grid-cols-3 and grid-rows-2 on the grid's container. Then, set each container's span to fit your structure (using col-span-n row-span-n).
Read about grid-cols here and about grid-row here.
<div class="border-2 grid grid-cols-3 grid-rows-2">
<div class="border-2 col-span-1">1</div>
<div class="border-2 col-span-2 row-span-2">2</div>
<div class="border-2 col-span-1">3</div>
<div>
Tailwind-play
Flex:
We are going to have two containers. The main container will wrap all the elements (including the second container), and the inner container will wrap your first two elements. Each of those containers will have a flex utility applied to it.
Then, we will apply flex-col on the second container. This way, the container will place its children on top of each other, just like the first column of your image.
The first container's default flex-direction is flex-row which is why the inner container and the third element will be positioned next to each other, just like a row.
To give the structure a proportion similar to your image, we can set the inner container's width to 30% (w-[30%]), and the third element to 70% (w-[70%]).
Read about flex-direction here.
<div class="flex border-2">
<div class="flex w-[30%] flex-col">
<div class="border-2">1</div>
<div class="border-2">2</div>
</div>
<div class="w-[70%] border-2">3</div>
<div></div>
</div>
Tailwind-play
I'm looking for a way to maximize a map inside a Bootstrap row. In the following syntax, the left col-md-9 div is the map, and the right side is a fixed 240px wide image.
<div class="row">
<div class="col-md-9">
<div id="mapid" style="width: 100%; height: 400px;"></div>
</div>
<div class="col-md-3">
<p id="delta">
<%= #myimage %>
<br>
</p>
</div>
</div>
With a fluid layout, it can get ugly quickly. Is there a way to maximize the map in a fluid layout? I want the map to increase with the fluidity and the image retaining 240px with a small margin.
You can just do it with flexbox, and there are utilities from Bootstrap you can use: https://getbootstrap.com/docs/4.3/utilities/flex/
<div class="d-md-flex flex-md-row flex-md-nowrap align-items-md-start">
<!-- map -->
<iframe />
<!-- image -->
<img />
</div>
Since the map/iframe is setup as 100% width, normally this will push the other item off the row. But with flexbox, by default, the flexbox children have flex-shrink: 1; turn on. That means it will shrink for you. That's how you can get the width maximization for the map.
demo: https://jsfiddle.net/davidliang2008/x56ao2pz/8/
here's the image
Like showing in this image I want to pack divs inside short eats div. For example, the fish bun div can put beside chinese rolls div likewise. I just want no white space there. Those divs are dynamically appear though.
I've added my laravel view code below if you need.
<div class="col-md-4 border border-primary rounded">
<h4>Short Eats</h4>
#foreach($shorteats as $shrt)
<div>
{{$shrt->dish_name}}
</div>
#endforeach
</div>
<div class="col-md-4 border border-primary rounded">
<h4>Rice</h4>
#foreach($rice as $ric)
<div>
{{$ric->dish_name}}
</div>
#endforeach
</div>
You can add a class (e.g. .menu-container) to your <div>, that is the parent of your anchor tag, and use flexbox to (hopefully) achieve what you're after:
HTML:
<div class="menu-container">
{{$ric->dish_name}}
</div>
CSS:
.menu-container {
display: flex;
flex-wrap: wrap;
}
.food-item {
// styles for your anchor tag go here
}
UPDATE: The css style:
height: 100vh;
was causing the initial problem below. I was using this so that a specific section of the webpage filled the screen when a 'page-jump' button was clicked. Is there another way to have the section(div class="row")fill the screen, but it was adjust to contain all the content when the window is resized smaller? When using the above style, it fits the screen perfectly but on window resizing, the height stays at 100vh, but the content within the row is adjusted to stack vertically, so it ovefrlows the row height.
INITIAL PROBLEM:
I am trying to use flexbox style in CSS/Bootstrap to vertically align the content within 3 columns, that are within a row.
Here is a js fiddle with the issue: http://jsfiddle.net/coopwatts/fnh4exxs/
The HTML is something like this:
<div class="row">
<div class="col-sm-4 col-md-4">
<img></img>
<h2></h2>
<p></p>
</div>
<div class="col-sm-4 col-md-4">
<img></img>
<h2></h2>
<p></p>
</div>
<div class="col-sm-4 col-md-4">
<img></img>
<h2></h2>
<p></p>
</div>
</div>
And the CSS for flexbox is something like:
.row {
display: flex;
align-items: center;
justify-content: center;
}
Flexbox works fine for aligning the content but when the window is minimized down to say xs, the content escapes the row and is jumbled all over the place. I'm trying to utilize bootstraps grid system so things look nicely on mobile and laptops so this is an issue. What am I doing wrong?
I was able to solve my issue by adding the following jQuery:
$(window).resize(function() {
if($(window).width() <= 768) {
$(".customer-options").css("height", "auto");
}
else if ($(window).width() > 768) {
$(".customer-options").css("height", "");
$(".customer-options").css("height", "100hv");
}
});
Everything is working great, thank you!
I'm using the Bootstrap 3 grid to hide/show nav bar content based on whether or not the user is using an extra small device.
I'm using .hidden-xs and .visible-xs classes. These classes appropriately hide/show the content, but I'm running into two problems:
(1) Hiding the content also shrinks the column spacing by .col-xs-5 because the div is hidden. I tried adding .visible-xs to a subsequent div and using .col-xs-5 to make up the empty space. This works, but only if I place content inside the divs. I just want the columns to be spaced out.
(2) On XS view size, the final item on the Nav bar "Nav" jumps to the next row. I have only accounted for 12 total columns.
See this JSFiddle. I'm trying to nly show "Welcome" on large view and show nothing on XS view.
I here's an idea, you can try instead of adding content. This CSS trick uses :before and :after CSS pseudo-classes.
.no_content {
display: block;
content: "";
width: 151px;
height: 35px;
background: transparent url(tape.png) 0 0 no-repeat;
}
<div class="no_content"></div>
I would look at the grid system further. I believe there is an offset that you can use to offset the div like this:
<div class="row">
<div class="col-xs-5 col-xs-offset-5></div>
<div class="col-xs-2></div>
</div>
Use the pull-right bootstrap class instead of trying to make empty div's fill in the space.
Completely remove the div you added in item (1) to "make up the space". On the div containing "Nav" set the class as pull-right col-xs-1. So the code from your JSFiddle becomes:
<div class="container">
<div class="row" id="header">
<div class="col-xs-5" id="brand-wrapper">
<div class="brand">Brand</div>
</div>
<!-- Hidden on XS Devices -->
<div class="hidden-xs col-xs-5">
<p>
Welcome
</p>
</div>
<!-- Nav -->
<div class="pull-right col-xs-1" id="toggle-wrapper">
<p>Nav</p>
</div>
</div>
</div>