The text col-xs-9 col-md-9 overlaps with the image col-xs-3 col-md-3. I tried to include img-responsive in the img src but it doesn't work. I didn't use CSS in this part of my activity.
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container-fluid padding">
<div class="p-3 my-4 bg-light rounded-3">
<div class="row">
<div class="col-xs-3 col-md-3">
<img src="https://via.placeholder.com/500" height="224" width="224" class="img-responsive">
</div>
<div class="col-xs-9 col-md-9">
<h1> HELLO!</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
The img-responsive was renamed to img-fluid. Replace the class name and that should solve your problem.
Related
I am trying to make it so the text on the left stays in the position it is in but the red block becomes full-width on the right side.
This is the code below which is using Bootstrap 3.
<!-- Bootstrap-3 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Body -->
<div class="hero">
<div class="container">
<div class="row row-split">
<div class="col-sm-7">
<div class="col-sm-12">
<h2 class="hero__title primary-font dullblue">Some really cool text.</h2>
</div>
<div class="col-sm-12">
<div class="hero__paragraph secondary-font">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="col-sm-12">
<button class="hero__button secondary-font">Shop Now</button>
</div>
</div>
<div class="col-sm-5 hero__background">
</div>
</div>
</div>
</div>
So - yes, it's some sort of vertical align thing again (sorry!). I read the documentation and other questions regarding this topic, did my first projects and tried out different approaches, but somehow I can't figure out how to do this the "right way" with bootrap.
I want the elements inside of the columns to align on the same horizontal line (starting from the top) with the respective element from the other column. So, the h3 elements are all on the same horizontal line , the buttons are all on the same line etc.
I made 3 columns
<div class="container">
<div class="row justify-content-around>
<div class="col-md-4 d-flex flex-column align-items-center">
<h3> A Title </h3>
<hr>
<p> looooong text </p> <br>
<img src="an icon" width="55" height="55">
<button> A button </button>
</div>
<div class="col-md-4 d-flex flex-column align-items-center">
<h3> A Title </h3>
<hr>
<p> looooong text </p> <br>
<img src="an icon" width="55" height="55">
<button> A button </button>
</div>
<div class="col-md-4 d-flex flex-column align-items-center">
<h3> A Title </h3>
<hr>
<p> Short text </p> <br>
<img src="an icon" width="55" height="55">
<button> A button </button>
</div>
</div>
</div>
I could use "justify-content-between" on each column. But then, if one of the "p" content is longer than the one of another column, it won't work as intended - the shorter text would not start on the same horizontal line as the other texts, as my example below will demonstrate. Fixing it with manual margins would mess it up, should the text be changed later on by a client.
Justify-Content-Between: This is what I don't want
What would be a good way to achieve this kind of alignment?
You can divide your content and your icon/button into separate rows within each column, and then align the div with the icon/button to the bottom of the column.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-around">
<div class="col-md-4 d-flex flex-column mb-5">
<div class="row">
<div class="col">
<h3> A Title </h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<div class="row align-self-center h-100">
<div class="col d-flex">
<div class="align-self-end">
<img src="an icon" class="d-block my-1 mx-auto" width="55" height="55">
<button> A button </button>
</div>
</div>
</div>
</div>
<div class="col-md-4 d-flex flex-column mb-5">
<div class="row">
<div class="col">
<h3> A Title </h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="row align-self-center h-100">
<div class="col d-flex">
<div class="align-self-end">
<img src="an icon" class="d-block my-1 mx-auto" width="55" height="55">
<button> A button </button>
</div>
</div>
</div>
</div>
<div class="col-md-4 d-flex flex-column mb-5">
<div class="row">
<div class="col">
<h3> A Title </h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="row align-self-center h-100">
<div class="col d-flex">
<div class="align-self-end">
<img src="an icon" class="d-block my-1 mx-auto" width="55" height="55">
<button> A button </button>
</div>
</div>
</div>
</div>
</div>
</div>
I used align-self-end to position the row with the icon and button at the bottom, but IE11 doesn’t support flex start and end, so the layout doesn’t look as nice on IE11.
One other note – your sample code is missing the closing quote for the classes in the line: <div class="row justify-content-around>
How to align at the bottom a flex-row inside a card? I currently have two cards aligned side by side but when one of the texts is smaller than the other the divs that contain "(100)(100)" lose their alignment.
I'm aware of questions likes this one but I have tried their solutions and nothing worked.
Running example.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mb-2">
<div class="col-md-6 d-flex align-items-stretch">
<div class="card mb-4 shadow bg-white rounded">
<div class="card-body">
<div class="row pb-0">
<div class="col-9">
<strong class="mb-2 text-secondary"">Name A</strong>
</div>
<div class="col-3">
<img class="mb-2 rounded-circle float-right" src="" style="max-width:30px; height:auto;" alt="">
</div>
</div>
<h3 class="card-title mb-0">
<a target="_blank" rel="noopener noreferrer" class="text-dark" href="">Article 1 Title</a>
</h3>
<div class="mb-1 text-muted date">2020-01-01</div>
<p class="card-text mb-auto blog-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Eget felis eget nunc lobortis mattis aliquam faucibus.</p>
<!-- This should be aligned to the bottom -->
<div class="d-flex flex-row mt-0 ml-0 pl-0 ">
<!-- <span class="flaticon-clapping-2" data-toggle="tooltip" data-placement="top" title="Nº de likes no Arquivo de Opinião"></span> -->
<span class="flaticon-facebook-1" data-toggle="tooltip" data-placement="top" title="Engagment Facebook: nº de partilhas + nº de reações + nº de comentários"></span>
<span class="flaticon-facebook-1-text" data-toggle="tooltip" data-placement="top" data-html="true">(100)</span>
<span class="flaticon-twitter-1" data-toggle="tooltip" data-placement="top" ></span>
<span class="flaticon-twitter-1-text" data-toggle="tooltip" data-placement="top" title="">(100)</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 d-flex align-items-stretch">
<div class="card mb-4 shadow bg-white rounded">
<div class="card-body">
<div class="row pb-0">
<div class="col-9">
<strong class="mb-2 text-secondary"">Name A</strong>
</div>
<div class="col-3">
<img class="mb-2 rounded-circle float-right" src="" style="max-width:30px; height:auto;" alt="">
</div>
</div>
<h3 class="card-title mb-0">
<a target="_blank" rel="noopener noreferrer" class="text-dark" href="">Article 1 Title</a>
</h3>
<div class="mb-1 text-muted date">2020-02-01</div>
<p class="card-text mb-auto blog-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<!-- This should be aligned to the bottom -->
<div class="d-flex flex-row mt-0 ml-0 pl-0 ">
<span class="flaticon-facebook-1" data-toggle="tooltip" data-placement="top" title="Engagment Facebook: nº de partilhas + nº de reações + nº de comentários"></span>
<span class="flaticon-facebook-1-text" data-toggle="tooltip" data-placement="top" data-html="true">(100)</span>
<span class="flaticon-twitter-1" data-toggle="tooltip" data-placement="top" ></span>
<span class="flaticon-twitter-1-text" data-toggle="tooltip" data-placement="top" title="">(100)</span>
</div>
</div>
</div>
</div>
</div>
If you add d-flex flex-column in card-body div and mt-auto in bottom div, will solve your problem.
Full code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mb-2">
<div class="col-md-6 d-flex align-items-stretch">
<div class="card mb-4 shadow bg-white rounded">
<div class="card-body d-flex flex-column">
<div class="row pb-0">
<div class="col-9">
<strong class="mb-2 text-secondary">Name A</strong>
</div>
<div class="col-3">
<img class="mb-2 rounded-circle float-right" src="" style="max-width:30px; height:auto;" alt="">
</div>
</div>
<h3 class="card-title mb-0">
<a target="_blank" rel="noopener noreferrer" class="text-dark" href="">Article 1 Title</a>
</h3>
<div class="mb-1 text-muted date">2020-01-01</div>
<p class="card-text mb-auto blog-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Eget felis eget nunc lobortis mattis aliquam faucibus.</p>
<!-- This should be aligned to the bottom -->
<div class="d-flex flex-row mt-auto ml-0 pl-0 ">
<!-- <span class="flaticon-clapping-2" data-toggle="tooltip" data-placement="top" title="Nº de likes no Arquivo de Opinião"></span> -->
<span class="flaticon-facebook-1" data-toggle="tooltip" data-placement="top" title="Engagment Facebook: nº de partilhas + nº de reações + nº de comentários"></span>
<span class="flaticon-facebook-1-text" data-toggle="tooltip" data-placement="top" data-html="true">(100)</span>
<span class="flaticon-twitter-1" data-toggle="tooltip" data-placement="top" ></span>
<span class="flaticon-twitter-1-text" data-toggle="tooltip" data-placement="top" title="">(100)</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 d-flex align-items-stretch">
<div class="card mb-4 shadow bg-white rounded">
<div class="card-body d-flex flex-column">
<div class="row pb-0">
<div class="col-9">
<strong class="mb-2 text-secondary">Name A</strong>
</div>
<div class="col-3">
<img class="mb-2 rounded-circle float-right" src="" style="max-width:30px; height:auto;" alt="">
</div>
</div>
<h3 class="card-title mb-0">
<a target="_blank" rel="noopener noreferrer" class="text-dark" href="">Article 1 Title</a>
</h3>
<div class="mb-1 text-muted date">2020-02-01</div>
<p class="card-text mb-auto blog-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<!-- This should be aligned to the bottom -->
<div class="d-flex flex-row mt-auto ml-0 pl-0 ">
<span class="flaticon-facebook-1" data-toggle="tooltip" data-placement="top" title="Engagment Facebook: nº de partilhas + nº de reações + nº de comentários"></span>
<span class="flaticon-facebook-1-text" data-toggle="tooltip" data-placement="top" data-html="true">(100)</span>
<span class="flaticon-twitter-1" data-toggle="tooltip" data-placement="top" ></span>
<span class="flaticon-twitter-1-text" data-toggle="tooltip" data-placement="top" title="">(100)</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm trying to make an inner div fill the height of a column. Bootstrap 4 seems to automatically handle matching the heights of the wrapping col's but when I try adding a height of 100% to the inner divs the column heights get pushed out and expanded really tall... though this issue doesn't seem to happen in Chrome.
Below is the structure I'm using for each column (the row will have multiple instances of these columns) I need NewsSummary to fill the column height without pushing it larger :
<div class="col-lg-4">
<div class="NewsSummary same-height">
<div class="NewsSummaryField">
<a href="">
<p><img src="" alt="" width="800" height="534"></p>
</a>
</div>
<div class="NewsSummaryLink">
<h2>Text</h2>
</div>
<div class="NewsSummarySummary">
<p>Text...</p>
</div>
<div class="NewsSummaryMorelink">
<p>More →</p>
</div>
</div>
</div>
Because I'm having trouble with this I also tried to search out a jQuery match height solution but none of the ones I found seem to work, I'm assuming because I'm using jQuery v3 for Bootstrap and its an issue with the code being for older jQ versions... so any pointers to a script that will work would also be useful
Here's a link to a codepen to explain, have slightly simplified the html. You can see I'm trying to achieve a grid type layout which will be of unknown items. I need them to match heights so the background colours on the example align - so in this instance they should expand to the same height as the green one.
https://codepen.io/jwacreative/pen/eYZLEGP
And below is a screen shot of the issue I get of I try and add a height:100% or .h-100 to the NewsSummary div:
Screenshot
Many thanks!
Bootstrap has a lot of utility (helper) classes for addressing flex box concerns like equal height. In your case the addition of one simple helper class can address the issue: .h-100.
I've simplified your example code even further to demonstrate.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-6 col-lg-4 mb-4">
<div class="bg-danger p-3 h-100">
<img src="//placehold.it/300x100" class="w-100 rounded mb-2" />
<h2>My News Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button class="btn btn-sm btn-link">More →</button>
</div>
</div>
<div class="col-6 col-lg-4 mb-4">
<div class="bg-success p-3 h-100">
<img src="//placehold.it/300x200" class="w-100 rounded mb-2" />
<h2>My News Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<button class="btn btn-sm btn-link">More →</button>
</div>
</div>
<div class="col-6 col-lg-4 mb-4">
<div class="bg-warning p-3 h-100">
<img src="//placehold.it/300x150" class="w-100 rounded mb-2" />
<h2>My News Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<button class="btn btn-sm btn-link">More →</button>
</div>
</div>
<div class="col-6 col-lg-4 mb-4">
<div class="bg-primary p-3 h-100">
<img src="//placehold.it/300x300" class="w-100 rounded mb-2" />
<h2>My News Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<button class="btn btn-sm btn-link">More →</button>
</div>
</div>
</div>
</div>
The .h-100 utility class is explained in more depth on Bootstrap's documentation for their sizing-related utility classes. It applies a 100% height attribute which when combined with flex box will result in the equal height you desire.
Not sure if this is what you meant with 'inner div' but you may try it. I set a new row to create a flex div and reset the padding of col-lg-4. In this new row I created a full width column. Remove the style="...", that is for testing only ;-)
If you want all to be browser-full-height, then you have to set html, body { height: 100%; } and same-height with all its parents to min-height: 100%;
<div class="row">
<div class="col-lg-4">
<div class="News_Page row">
<div class="NewsSummary same-height col-12" style="background:silver">
...
</div>
</div>
</div>
<div class="col-lg-4">
<div class="News_Page row">
<div class="NewsSummary same-height col-12" style="background:yellow">
...
</div>
</div>
</div>
<div class="col-lg-4">
<div class="News_Page row">
<div class="NewsSummary same-height col-12" style="background:orange">
...
</div>
</div>
</div>
</div>
Based on your codepen code, if you want the height of column the same as the others you can set the set the height of the inner div which is the NewsSummary to 100%.
.NewsSummary {
height: 100%;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="NewsSummary same-height" style="background:red">
<div class="NewsSummaryField">
image goes here
</div>
<div class="NewsSummaryLink">
<h2>title</h2>
</div>
<div class="NewsSummarySummary">
<p>Text.</p>
</div>
<div class="NewsSummaryMorelink">
<p>More →</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="NewsSummary same-height" style="background:green">
<div class="NewsSummaryField">
image goes here
</div>
<div class="NewsSummaryLink">
<h2>title</h2>
</div>
<div class="NewsSummarySummary">
<p>Longer text. Longer text Longer text Longer text Longer text Longer text Longer text Longer text</p>
</div>
<div class="NewsSummaryMorelink">
<p>More →</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="NewsSummary same-height" style="background:yellow">
<div class="NewsSummaryField">
image goes here
</div>
<div class="NewsSummaryLink">
<h2>title</h2>
</div>
<div class="NewsSummarySummary">
<p>Text.Longer text Longer text</p>
</div>
<div class="NewsSummaryMorelink">
<p>More →</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="NewsSummary same-height" style="background:purple">
<div class="NewsSummaryField">
image goes here
</div>
<div class="NewsSummaryLink">
<h2>title</h2>
</div>
<div class="NewsSummarySummary">
<p>Text.</p>
</div>
<div class="NewsSummaryMorelink">
<p>More →</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="NewsSummary same-height" style="background:blue">
<div class="NewsSummaryField">
image goes here
</div>
<div class="NewsSummaryLink">
<h2>title</h2>
</div>
<div class="NewsSummarySummary">
<p>Text.</p>
</div>
<div class="NewsSummaryMorelink">
<p>More →</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
https://codepen.io/jakedx6/pen/EOYBEM
In the above demo, I would expect the center 'col' to shrink but something seems to stop it. The code sample is originally for an angular 7 application using ngx-bootstrap for the dropdown so you will see those attributes in the code below.
Not sure if the issue is something not set up correctly, bootstrap 4 or CSS grid
HTML for referance:
<div class="page-layout">
<div class="page-header p-3">
<div class="text-truncate" body>Main Header</div>
</div>
<div class="page-subheader p-3">
<div class="text-truncate" body>Sub-Header</div>
</div>
<div class="page-content">
<main role="main" class="container-fluid">
<div class="row mx-3 my-3">
<div class="col-auto p-0">
<div class="row">
<div class="index-number mb-3 font-weight-bold py-2">1</div>
</div>
<div class="row">
<div class="index-number mb-3 font-weight-bold py-2">2</div>
</div>
<div class="row">
<div class="index-number mb-3 font-weight-bold py-2">3</div>
</div>
</div>
<div class="col px-0" cdkDropList>
<div class="col mb-3 pr-0 ngFor" cdkDrag>
<div class="card">
<div class="row m-0">
<div class="col-auto px-0" style="background:#ddd">
<div cdkDragHandle class="col-auto border-right draggable py-2">
Auto Left
</div>
</div>
<div class="col text-truncate py-2">
Center Text, This can be a pretty long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="col-auto border-left" style="background:#ddd">
<div class="btn-group py-2 ">
Auto-Right
</div>
</div>
</div>
</div>
</div>
<div class="col mb-3 pr-0 ngFor" cdkDrag>
<div class="card">
<div class="row m-0">
<div class="col-auto px-0" style="background:#ddd">
<div cdkDragHandle class="col-auto border-right draggable py-2">
Auto Left
</div>
</div>
<div class="col text-truncate py-2">
Center Text, This can be a pretty long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="col-auto border-left" style="background:#ddd">
<div class="btn-group py-2">
Auto-Right
</div>
</div>
</div>
</div>
</div>
<div class="col mb-3 pr-0 ngFor" cdkDrag>
<div class="card">
<div class="row m-0">
<div class="col-auto px-0" style="background:#ddd">
<div cdkDragHandle class="col-auto border-right draggable py-2">
Auto Left
</div>
</div>
<div class="col text-truncate py-2">
Center Text, This can be a pretty long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="col-auto border-left" style="background:#ddd">
<div class="btn-group py-2">
Auto-Right
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
SCSS defining the grid:
.page-layout {
display: grid;
height: 100%;
grid-template-columns: 1fr;
grid-template-rows: 56px 56px 1fr;
grid-template-columns: 1fr;
grid-template-areas: "page-header" "page-subheader" "page-content";
.page-header {
grid-area: page-header;
background-color: #eee;
border-bottom: solid 1px #bbb;
height: 2em;
min-height: 56px; //fix for ie
}
.page-subheader {
grid-area: page-subheader;
background-color: #eee;
border-bottom: solid 1px #bbb;
height: 2em;
min-height: 56px; //fix for ie
}
.page-content {
grid-area: page-content;
}
}
without the CSS grid layout it works as expected:
https://codepen.io/jakedx6/pen/EOxjWv (demo without CSS grid)
Edit: when I change the grid 1fr unit to 100% it works as expected. Is there a way to fix this and still use the 1fr unit type?
The fix I implemented was using 100% instead of 1fr when defining the grid. I would love to know if there is a better way of fixing this!