I am trying to rewrite html table to bootstrap flex divs.
Stack on how to keep the same height of logical child elements of containers?
https://jsfiddle.net/48qdk3r5/1/
It looks some buggy behaviour then I try set up .content height to 100%, the next row of elements overflows first row.
<div class="container">
<div class="row">
<div class="col">
<div class="header">
<h2>Header</h2>
</div>
<div class="content d-flex">
<div class="text-center w-50">
<h3>Sub1</h3>
<p>Iam sub 1.</p>
</div>
<div class="text-center w-50">
<h3>Sub2</h3>
<p>Iam sub 2.</p>
<p>Iam sub 2.</p>
</div>
</div>
</div>
<div class="col">
<div class="header">
<h2>Header3</h2>
</div>
<div class="text-center content">
<h3>Sub3</h3>
<p>Iam sub 3.</p>
</div>
</div>
</div>
<!--end first row -->
<div class="row">
<div class="col">
<div class="header">
<h2>Header</h2>
</div>
<div class="content d-flex">
<div class="text-center w-50">
<h3>Sub1</h3>
<p>Iam sub 1.</p>
</div>
<div class="text-center w-50">
<h3>Sub2</h3>
<p>Iam sub 2.</p>
</div>
</div>
</div>
<div class="col">
<div class="header">
<h2>Header3</h2>
</div>
<div class="text-center content">
<h3>Sub3</h3>
<p>Iam sub 3.</p>
<p>Iam sub 3.</p>
</div>
</div>
</div>
</div>```
I expect all elements of row to be the same height.
You can achieve equal heights by making your .col divs flexboxes, too, and using flex-grow for the .content boxes:
.col{
display: flex;
flex-flow: column;
}
.col .content{
flex-grow: 1;
}
See this updated jsFiddle: https://jsfiddle.net/t29ph10d/
Related
I have a bootstrap grid that is the UI of a calculator, and it is nested in a div that is sized at 100vw and 100vh. I set the size properties of the bootstrap container to height: 50% and width: 20%, but the content is only filling the width I set, not the height.
I want the height of the grid to resize dynamically so that it is 50% of it's container always.
https://gyazo.com/940d7d3aa77c464e351970bdbd5271b7 (the black line is the border that I am wanting the grid to fill to)
`
return (
<div
style={{ width: "100vw", height: "100vh" }}
class="d-flex align-items-center"
>
<div style={{ height: "50%", width: "20%"}} class="container">
<div class="row">
<div class="col col-6">
<p>AC</p>
</div>
<div class=" col col-3">
<p>/</p>
</div>
<div class="col col-3">
<p>x</p>
</div>
</div>
<div class="row">
<div class="col">
<p>7</p>
</div>
<div class="col">
<p>8</p>
</div>
<div class="col">
<p>9</p>
</div>
<div class="col">
<p>-</p>
</div>
</div>
<div class="row">
<div class="col">
<p>4</p>
</div>
<div class="col">
<p>5</p>
</div>
<div class="col">
<p>6</p>
</div>
<div class="col">
<p>+</p>
</div>
</div>
<div class="row">
<div class="col col-9">
<div class="row">
<div class="col col-4">
<p>1</p>
</div>
<div class="col col-4">
<p>2</p>
</div>
<div class="col col-4">
<p>3</p>
</div>
<div class="col col-8">
<p>0</p>
</div>
<div class="col col-4">
<p>.</p>
</div>
</div>
</div>
<div class="col col-3">
<p>=</p>
</div>
</div>
</div>
</div>
);
}
}
`
I'm trying to align a text next to an icon inside a card. The card is wrapped inside the Bootstrap "col" class which dynamically determines its size depending on how many items a row contains.
However if there isn't enough space the text gets wrapped and is displayed in a second row. Now what I'm trying to achieve is to keep the text next to the icon on one line and end it if there isn't enough space with an ellipsis (three dots).
This plunker shows my current setup
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
</head>
<body>
<div class="row mx-1">
<div class="col" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div>
<div class="title">
Normal title
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div>
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div>
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div>
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div>
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
</div>
</body>
</html>
What I'm trying to achieve
An idea is to make your text out of the flow using absolute position and then add some CSS properties to crop the text:
.main-title {
flex: 1;
position: relative;
}
.main-title .title {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row mx-1">
<div class="col" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div class="main-title">
<div class="title">
Normal title
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div class="main-title">
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div class="main-title">
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div class="main-title">
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row d-flex">
<div style="width:50px;height:50px;background:gray"></div>
<div class="main-title">
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
</div>
</div>
You can use the text-truncate class to automatically truncate (and add ellipsis) based on the available space in a column.
To achieve that you need to put your content into columns (which you should always do anyway because putting stuff directly into a row tends to lead to problems that require unnecessary css hacks).
In the following snippet, you see a much cleaner version of your code that achieves the desired result using the text-truncate class:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.grey-div {
width:50px;
height:50px;
background:gray;
display: inline-block;
vertical-align: top;
}
</style>
<div class="container-fluid">
<div class="row mx-1">
<div class="col px-0 mx-1" style="background:lightgray">
<div class="row">
<div class="grey-div"></div>
<div>
<div class="title">
Normal title
</div>
</div>
</div>
</div>
<div class="col px-0 mx-1 text-truncate" style="background:lightgray">
<div class="title text-truncate">
<div class="grey-div"></div>
Long title which should end with ellipsis
</div>
</div>
<div class="col px-0 mx-1 text-truncate" style="background:lightgray">
<div class="title text-truncate">
<div class="grey-div"></div>
Long title which should end with ellipsis
</div>
</div>
<div class="col px-0 mx-1 text-truncate" style="background:lightgray">
<div class="title text-truncate">
<div class="grey-div"></div>
Long title which should end with ellipsis
</div>
</div>
<div class="col px-0 mx-1 text-truncate" style="background:lightgray">
<div class="title text-truncate">
<div class="grey-div"></div>
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
I feel like this should be easy, but I'm trying to get my .temp and .city divs to be side-by-side, but they're stacking vertically instead.
I've tried changing the size of the columns, but they always stack on top of each other. Any ideas?
<div class="col-lg" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col-lg" id="col3">
<div class="temp"></div>
<div class="city"></div>
</div>
</div>
</div>
You can wrap temp div and city div into 2 different columns. Check this Bootstrap4 Example.
.wind,
.temp,
.city {
height: 50px;
border: 1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col-lg" id="col3">
<div class="temp"></div>
</div>
<div class="col-lg" id="col3">
<div class="city"></div>
</div>
</div>
You can rearrange your html code to this format.
<div class="row">
<div class="col-lg" id="col2">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="col-lg" id="col3">
<div class="temp"></div>
<div class="city"></div>
</div>
</div>
You should edit your code to this, making the second row have two columns.
<div class="col-lg" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col temp"></div>
<div class="col city"></div>
</div>
</div>
Given this layout example:
https://www.codeply.com/go/Xw4cYl3kwu
The "HEADER" column is fixed-height. All the other columns have variable content with variable height depending on the page shown.
How can I make the "MENU" and "CONTENT" columns stretch down to the "FOOTER"?
Well if you can use flexbox then this could be a solution:
<div class="container-fluid">
<div class="row" >
<div class="col-9 bg-danger" style="display:flex;flex-direction: column">
<div class="row" style="height: 3rem">
<div class="col-12" >
<h1 class="text-center">HEADER</h1>
</div>
</div>
<div class="row" style="flex-grow:1">
<div class="col-3 bg-success">MENU</div>
<div class="col-9 bg-warning">CONTENT</div>
</div>
</div>
<div class="col-3 bg-info">
<p>SIDEBAR</p>
<p>SIDEBAR</p>
<p>SIDEBAR</p>
<p>SIDEBAR</p>
</div>
</div>
<div class="row bg-primary">
<div class="col-12">
<div class="text-center">FOOTER</div>
</div>
</div>
</div>
I am using 3 columns inside a nested row.
instead of stacking horizontally columns are stacking vertically.
this is my code.
i have tried stackoverflow answers but not working.
<div class="jumbotron mainBar">
<div class="container mainBarContainer">
<div class="row">
<div class="col-xs-2">
<div class=" profilePic">
<h2>1<small>st</small><p>Title</p></h2>
</div>
</div>
<div class="col-xs-4">
<h1>Hello, world!</h1>
</div>
<div class="col-xs-6 container">
<div class="row">
<div clas="col-xs-4">
<div class=" profilePic1">
<h2>1<small>st</small><p>Title</p></h2>
</div>
</div>
<div clas="col-xs-4">
<div class=" profilePic1">
<h2>1<small>st</small><p>Title</p></h2>
</div>
</div>
<div clas="col-xs-4">
<div class=" profilePic1">
<h2>1<small>st</small><p>Title</p></h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and here is the fiddle
fiidle
You have a spieling mistake. Change the clas to class which is inside second container.
The demo