I have created a table of divs with CSS that is made up of parent rows and child rows, but I want the child rows to make them visible or to hide with the help of vuejs. My problem is not how to make them visible / hidden, how to properly align parents with children.
In my example the child row should fit between parent row two and three, but the child row is displayed above the parent row with the number three.
In the example below the irregularities can be seen much better in full screen mode.
Thanks!
.div-table {
display: table;
width: 100%;
table-layout: auto;
font-size: 12px;
color: black;
}
.div-table-head {
display: table-header-group;
background: #e5e5e5;
vertical-align: middle;
}
.div-table-body {
display: table-row-group;
vertical-align: middle;
}
.div-table-tr {
display: table-row;
}
.div-table-th {
display: table-cell;
font-weight: 700;
text-transform: uppercase;
border-bottom: 3px solid #666;
}
.div-table-td {
display: table-cell;
border-bottom: 1px solid #e5e5e5;
}
.div-table-th, .div-table-td {
padding: 6px;
}
.div-table-tr:nth-of-type(odd) {
background: #f8f8f8;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
}
.div-table-tr:hover {
background: #ffd;
}
.my-material-icons {
font-size: 13px;
color: gray;
cursor: pointer;
}
.col-span {
position: absolute;
padding: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.1/css/uikit.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet"/>
<div class='div-table'>
<div class='div-table-head'>
<div class='div-table-th' style="width: 3%">#</div>
<div class='div-table-th' >th2</div>
<div class='div-table-th' >th3</div>
</div>
<div class='div-table-body'>
<!-- parent -->
<div class='div-table-tr'>
<div class='div-table-td'>1 <i title="title" class="material-icons my-material-icons">arrow_drop_down_circle</i></div>
<div class='div-table-td'>td12</div>
<div class='div-table-td'>td13</div>
</div>
<!-- parent -->
<div class='div-table-tr'>
<div class='div-table-td'>2 <i title="title" class="material-icons my-material-icons">arrow_drop_down_circle</i></div>
<div class='div-table-td'>td22</div>
<div class='div-table-td'>td23</div>
</div>
<!-- child -->
<div class='div-table-tr'>
<div class='div-table-td col-span'>
<div class='div-table'>
<div class='div-table-head'>
<div class='div-table-th' style="width: 4%">#</div>
<div class='div-table-th' >th2</div>
<div class='div-table-th' >th3</div>
</div>
<div class='div-table-body'>
<div class='div-table-tr'>
<div class='div-table-td'>1 <i title="title" class="material-icons my-material-icons">arrow_drop_down_circle</i></div>
<div class='div-table-td'>td12</div>
<div class='div-table-td'>td13</div>
</div>
<div class='div-table-tr'>
<div class='div-table-td'>2 <i title="title" class="material-icons my-material-icons">arrow_drop_down_circle</i></div>
<div class='div-table-td'>td22</div>
<div class='div-table-td'>td23</div>
</div>
</div>
</div>
</div>
</div>
<!-- parent -->
<div class='div-table-tr'>
<div class='div-table-td'>3 <i title="title" class="material-icons my-material-icons">arrow_drop_down_circle</i></div>
<div class='div-table-td'>td32</div>
<div class='div-table-td'>td33</div>
</div>
</div>
</div>
Firts of all instead of use div labels to build a table you should use the vuejs markup https://v2.vuejs.org/v2/examples/grid-component.html
Related
I made some card using grid and flexbox for the content. The image is not the same size each cards. I use the display grid for the wrapper and flexbox for the card content. I tried to use flex-grow and flex-basis in the trackcard_header class, but nothing works. I attach the sample of my code result below, please take a look to the snippet too.
Here is the screenshot:
And this is my snippet:
.createpl_card_wrapper {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-column-gap: 2rem;
grid-row-gap: 1rem;
}
.trackcard {
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 1rem;
background-color: rgba(0, 0, 0, 0.2);
width: 100%;
padding: 1rem 0.5rem;
position: relative;
}
.trackcard_header {
width: 80%;
margin: auto;
}
.trackcard_header img {
max-width: 100%;
height: auto;
border-radius: 1rem;
}
.trackcard_body {
padding: 1rem;
flex-grow: 1;
text-align: center;
}
.trackcard_body h2 {
font-size: 1.5rem;
}
.trackcard_body h4 {
font-size: 1rem;
}
.trackcard_footer {
width: 80%;
margin: auto;
}
.trackcard_btn {
width: 100%;
padding: 0.25rem 0;
background-color: #1db954;
border-radius: 0.5rem;
border: 1px solid #1db954;
color: #fff;
}
.trackcard_btn:hover {
background-color: #18a349;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<link rel="stylesheet" href="./src/styles.css" />
<body>
<div class="createpl_card_wrapper">
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b2738c0defcb336a0296eb7d704a"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>GANADARA (Feat. IU)</h2>
<h4>
Jay Park - GANADARA
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b273c63be04ae902b1da7a54d247"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>eight(Prod.&Feat. SUGA of BTS)</h2>
<h4>
IU - eight
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b27315cf3110f19687b1a24943d1"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>Good day</h2>
<h4>
IU - REAL
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b2734ed058b71650a6ca2c04adff"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>Celebrity</h2>
<h4>
IU - IU 5th Album 'LILAC'
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b273a1d785640d9421ec17ea8fe6"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>BBIBBI</h2>
<h4>
IU - BBIBBI
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
I want to make the images is in the same size, both vertically and horizontally. Could anyone give me solution? Thank you in advance.
You need to give the divs an actual size, in your code, they only have % values and no parent static value to take the %age out of. I've given the .trackcard class a width of 30vw. In order to make the images square, you also need to give it a height that's not dependent on other height values, but have the same value as the width, so I gave it a placeholder of 24vw which is 80% of the .trackcard. You need to use object-fit: contain to not stretch. You can refer to the docs I linked and use the one you prefer.
.createpl_card_wrapper {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-column-gap: 2rem;
grid-row-gap: 1rem;
}
.trackcard {
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 1rem;
background-color: rgba(0, 0, 0, 0.2);
width: 30vw;
padding: 1rem 0.5rem;
position: relative;
}
.trackcard_header {
width: 80%;
margin: auto;
}
.trackcard_header img {
width: 24vw;
height: 24vw;
object-fit: contain;
border-radius: 1rem;
}
.trackcard_body {
padding: 1rem;
flex-grow: 1;
text-align: center;
}
.trackcard_body h2 {
font-size: 1.5rem;
}
.trackcard_body h4 {
font-size: 1rem;
}
.trackcard_footer {
width: 80%;
margin: auto;
}
.trackcard_btn {
width: 100%;
padding: 0.25rem 0;
background-color: #1db954;
border-radius: 0.5rem;
border: 1px solid #1db954;
color: #fff;
}
.trackcard_btn:hover {
background-color: #18a349;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<link rel="stylesheet" href="./src/styles.css" />
<body>
<div class="createpl_card_wrapper">
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b2738c0defcb336a0296eb7d704a"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>GANADARA (Feat. IU)</h2>
<h4>
Jay Park - GANADARA
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b273c63be04ae902b1da7a54d247"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>eight(Prod.&Feat. SUGA of BTS)</h2>
<h4>
IU - eight
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b27315cf3110f19687b1a24943d1"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>Good day</h2>
<h4>
IU - REAL
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b2734ed058b71650a6ca2c04adff"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>Celebrity</h2>
<h4>
IU - IU 5th Album 'LILAC'
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img
src="https://i.scdn.co/image/ab67616d0000b273a1d785640d9421ec17ea8fe6"
alt="name"
/>
</div>
<div class="trackcard_body">
<h2>BBIBBI</h2>
<h4>
IU - BBIBBI
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
That can be achieved with some JavaScript.
First you select all the elements with querySelectorAll. You then make an array of its height with offsetHeight. Math.max returns the largest sum of the input parameter.
In a for loop, you can set the elements minHeight with Math.max. It keeps looping until it finds the length and then applies the styling. Keep in mind this will apply the height of the largest image as min-height on all of your images.
And while we're at it, I did the same thing for the h2-elements, so they're aligned equally in all the cards. I separated the JS so it is easier to read and understand. The only gotcha is you have to reload the page if you drag the screen size, as the min-height will be a bit off.
As for CSS I used grid-template-columns: repeat(5, minmax(200px, 1fr)); instead. This way there will always be 5 columns that are atleast 200px wide, so they have an equal size. If you want a responsive effect, just edit the 5 out with auto-fit, this way they will wrap on smaller screens.
Like so:
grid-template-columns: repeat(5, minmax(auto-fit, 1fr));
If you want to change the width or height of your images, I suggest using max-width and max-height for a responsive effect. If you don't change the width, they will look a bit stretched.
You can apply object-fit: cover; on the images also, this way the image won't be stretched, but a bit of the image will be cut off instead.
I hope this helps you!
Snippet below will not work properly, check Codepen: https://codepen.io/sigurdmazanti/pen/qBpLGXe
let img = document.querySelectorAll(".trackcard_header img");
let text = document.querySelectorAll(".trackcard_body h2");
// Image
let imgLength = Array.from(img).map(e => e.offsetHeight);
let maxLength = Math.max(...imgLength);
// H2
let textLength = Array.from(text).map(e => e.offsetHeight);
let maxTextLength = Math.max(...textLength);
// Image for loop
for (let i = 0; i < img.length; i++) {
img[i].style.minHeight = maxLength + "px";
}
// H2 for loop
for (let i = 0; i < text.length; i++) {
text[i].style.minHeight = maxTextLength + "px";
}
.createpl_card_wrapper {
margin-top: 2rem;
display: grid;
/*grid-template-columns: repeat(5, 1fr); */
grid-template-columns: repeat(5, minmax(200px, 1fr));
grid-column-gap: 2rem;
grid-row-gap: 1rem;
}
.trackcard {
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 1rem;
background-color: rgba(0, 0, 0, 0.2);
width: 100%;
padding: 1rem 0.5rem;
position: relative;
}
.trackcard_header {
width: 80%;
margin: auto;
}
.trackcard_header img {
max-width: 100%;
height: auto;
border-radius: 1rem;
/* Consider this */
object-fit: cover;
}
.trackcard_body {
padding: 1rem;
flex-grow: 1;
text-align: center;
}
.trackcard_body h2 {
font-size: 1.5rem;
}
.trackcard_body h4 {
font-size: 1rem;
margin-top: auto;
}
.trackcard_footer {
width: 80%;
margin: auto;
}
.trackcard_btn {
width: 100%;
padding: 0.25rem 0;
background-color: #1db954;
border-radius: 0.5rem;
border: 1px solid #1db954;
color: #fff;
}
.trackcard_btn:hover {
background-color: #18a349;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<link rel="stylesheet" href="./src/styles.css" />
<body>
<div class="createpl_card_wrapper">
<div class="trackcard">
<div class="trackcard_header">
<img src="https://i.scdn.co/image/ab67616d0000b2738c0defcb336a0296eb7d704a" alt="name" />
</div>
<div class="trackcard_body">
<h2>GANADARA (Feat. IU)</h2>
<h4>
Jay Park - GANADARA
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img src="https://i.scdn.co/image/ab67616d0000b273c63be04ae902b1da7a54d247" alt="name" />
</div>
<div class="trackcard_body">
<h2>eight(Prod.&Feat. SUGA of BTS)</h2>
<h4>
IU - eight
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img src="https://i.scdn.co/image/ab67616d0000b27315cf3110f19687b1a24943d1" alt="name" />
</div>
<div class="trackcard_body">
<h2>Good day</h2>
<h4>
IU - REAL
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img src="https://i.scdn.co/image/ab67616d0000b2734ed058b71650a6ca2c04adff" alt="name" />
</div>
<div class="trackcard_body">
<h2>Celebrity</h2>
<h4>
IU - IU 5th Album 'LILAC'
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
<div class="trackcard">
<div class="trackcard_header">
<img src="https://i.scdn.co/image/ab67616d0000b273a1d785640d9421ec17ea8fe6" alt="name" />
</div>
<div class="trackcard_body">
<h2>BBIBBI</h2>
<h4>
IU - BBIBBI
</h4>
</div>
<div class="trackcard_footer">
<button type="button" class="trackcard_btn">
Select
</button>
</div>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
I have 3 buttons using Bootstrap 4. I have defined them each to be 4 columns of the grid, so I figured they would all stay on 1 row. However the 3rd button is dropping down to the next line and I can't figure out why.
I've made a codepen here: https://codepen.io/xanabobana/pen/pobRxpx
HTML:
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-4 button button-header button-tools-collections"><h3>Tools</h3> <span class="badge"><span class="fa fa-wrench fa-2x"></span></span></div>
<div class="col-12 col-md-4 button button-header button-tools-collections"><h3>Collections</h3> <span class="badge"><span class="fa fa-folder-open fa-2x"></span></span></div>
<div class="col-12 col-md-4 button button-header button-tools-collections"><h3>Regional Projects</h3> <span class="badge"><span class="fa fa-globe fa-2x"></span></span></div>
</div></div>
CSS:
.button-header {
border: 3px solid #b8d87a;
display: inline-block;
font-size: .8em;
margin: 2em 1em 2em 0;
}
.button-header a {
color: #fff;
padding: .5em 1em;
display: block;
}
.button-header a:hover {
text-decoration: none;
background-color: rgba(255, 255, 255, 0.3);
}
.button-header .arrow {
font-family: arial;
}
.button-tools-collections a {
color: black;
text-align: center;
}
You've put styles on the columns that make them wider. That's not a good practice. Use layout elements for layout and put elements inside those for styling.
<div class="col-12 col-md-4">
<div class="button button-header button-tools-collections">
<a href="<?php echo site_url('products/tools/'); ?>">
<h3>Tools</h3>
<span class="badge"><span class="fa fa-wrench fa-2x"></span></span>
</a>
</div>
</div>
This question already has answers here:
How can I make Bootstrap columns all the same height?
(34 answers)
Closed 6 years ago.
I have a couple of widgets in line depending on screen size. Here is my layout:
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some description goes here
</div>
</div>
</div>
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some very long description goes here
</div>
</div>
</div>
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some description goes here
</div>
</div>
</div>
and styles are the following:
.widget {
width: 100%;
margin: 10px;
padding: 10px;
background-color: white;
//height: auto;
height: 80px;
border: 1px silver solid;
font-size: 18px;
}
.name {
font-weight: bold;
height: 40px;
color: #082654;
}
.description {
color: #4AB6E1;
}
Here is the jsfiddle
The problem is that I want to be them of certain height: e.g.80px, cause its the size that will look nice for almost all cases, but rarely I have some longer content inside widget description and then it goes out of the box. So in this case I'd like its height to adapt to content size and all other widgets to its height too. When I set widgets height to auto - only single widget stretches in height and they look uneven. Any ideas how to change the styles so that to achieve what I need?
I you can use jQuery look at this JSFiddle
https://jsfiddle.net/cnoof9hb/
Uses the following to set the height:-
var maxheight = 0;
$('div div.widget').each(function () {
maxheight = ($(this).height() > maxheight ? $(this).height() : maxheight);
});
$('div div.widget').height(maxheight);
This seems like a perfect time for flexbox, I've made a container div to surround all 3 elements and given it display: flex; I've also given display: flex; to each div bellow that (as these are the bits that need to change size).
Have a look
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.container {
display: flex;
flex-wrap: wrap;
}
.container > div {
display: flex;
width: 33.33%;
}
.widget {
width: 100%;
margin: 10px;
padding: 10px;
background-color: white;
border: 1px silver solid;
font-size: 18px;
}
.widget .name {
font-weight: bold;
height: 40px;
color: #082654;
}
.widget .description {
color: #4AB6E1;
}
<div class="container">
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some description goes here
</div>
</div>
</div>
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some very long description goes here
</div>
</div>
</div>
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some description goes here
</div>
</div>
</div>
</div>
I hope this helps.
you can try using diplay:table
.widget {
width: 100%;
margin: 10px;
padding: 10px;
background-color: white;
//height: auto;
height: 80px;
display:table;
border: 1px silver solid;
font-size: 18px;
}
.name {
font-weight: bold;
height: 40px;
color: #082654;
}
.description {
color: #4AB6E1;
}
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some description goes here
</div>
</div>
</div>
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some very long description goes here
</div>
</div>
</div>
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some description goes here
</div>
</div>
</div>
Use float:left to float an element to make the parent element take the cumulative height of it's childrens' height. Also height:auto; to be used in the parent element, as the height is unpredictable.
.widget {
width: 100%;
margin: 10px;
padding: 10px;
background-color: white;
/*height: auto;*/ /* removed this */
border: 1px silver solid;
font-size: 18px;
/* Added these 2 lines */
float:left;
height: auto;
}
.name {
font-weight: bold;
height: 40px;
color: #082654;
}
.description {
color: #4AB6E1;
}
Try below code it does "Adapt height of the elements based on siblings height" but you may need to change it little bit to suit ur needs
<div class="t-row">
<div class="col">Some description goes here Some description goes here</div>
<div class="col">on goes here</div>
<div class="col">here</div>
<div class="col">Some description goes here Some description goes here Some description goes here Some description goes hereSome description goes here Some description goes here</div>
</div>
and css
.t-row{
display: table-row;
}
.col{
display: table-cell;
width: 25%;
border: 1px solid silver;
padding: 15px;
background-color: white;
}
see fiddle here
I've built a list component for my app, I can't use tables because of the style.
I want to have the elements inside of the "rows" to have the same width from top to bottom, like columns. The code looks similar to this:
<div class="row">
<div class"element>iPhone </div>
<div class"element>Buy an iPhone now!</div>
</div>
<div class="row">
<div class"element>Airport Express </div>
<div class"element>Buy an Airport Express now!</div>
</div>
<div class="row">
<div class"element>iPad </div>
<div class"element>Buy an iPad now!</div>
</div>
This is what it currently looks like:
And this is, what I want:
Is there a way to do this?
Use CSS tables:
Separation between rows with border-spacing
Borders in cells. You can use border-radius to round them.
Pseudo-element displayed as cell to fill available space at the right
white-space: nowrap to prevent cells from shrinking due to the pseudo-element.
.wrapper {
display: table;
border-spacing: 0 10px;
}
.row {
display: table-row;
border: 1px solid;
}
.row::after {
content: '';
display: table-cell;
width: 100%;
border: 1px #6AACC9;
border-style: solid none;
}
.element {
display: table-cell;
border: 1px solid #6AACC9;
border-right-color: #adadad;
border-left-style: none;
padding: 5px;
white-space: nowrap;
}
.element:first-child {
border-left-style: solid;
border-radius: 5px 0 0 5px;
}
<div class="wrapper">
<div class="row">
<div class="element">iPhone </div>
<div class="element">Buy an iPhone now!</div>
</div>
<div class="row">
<div class="element">Airport Express </div>
<div class="element">Buy an Airport Express now!</div>
</div>
<div class="row">
<div class="element">iPad </div>
<div class="element">Buy an iPad now!</div>
</div>
</div>
You can't do that with flexbox. Dimensions cannot be equallised between elements that do not share a parent.
But you can with CSS Tables
.row {
display: table-row;
}
.element {
display: table-cell;
border: 1px solid grey;
padding: 8px;
}
<div class="row">
<div class="element">iPhone</div>
<div class="element">Buy an iPhone now!</div>
</div>
<div class="row">
<div class="element">Airport Express</div>
<div class="element">Buy an Airport Express now!</div>
</div>
<div class="row">
<div class="element">iPad</div>
<div class="element">Buy an iPad now!</div>
</div>
I've got a jumbotron class which has to contain a button, but it's strangely extended and that button looks ugly. Why is that so?
HTML
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-8">
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-ok">
Why is this button so wide?
</span>
</button>
</div>
</div>
</div>
</div>
CSS
.jumbotron {
margin: 10px;
}
.row {
margin: 8px 0;
}
If I try to reduce the size of the column, for example, col-md-4, nothing changes.
Your mistake is you wrote the text inside icon span. Here is the fixed code
.jumbotron {
margin: 10px;
}
.row {
margin: 8px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-8">
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-ok"></span>
Why is this button so wide?
</button>
</div>
</div>
</div>
</div>
in main page use this...
<header>
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">Welcome!!!</div>
<div class="intro-heading">Let's Get Started</div>
Tell Me More
</div>
</div>
</header>
in css
use this
.btn-xl {
padding: 20px 40px;
border-color: #fed136;
border-radius: 3px;
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 700;
color: #fff;
background-color: #fed136;
}
this will solve your problem