I need to make cards in same heigth.
I don't mean the card them self, I mean the containers in the cards.
My code is looking like this
.card-text {
border: 1px solid lightgrey;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-eq-height">
<div class="card-group">
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="card-title"> bla bla </div>
<div class="card-text"> bla<br><br>bla </div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="card-title"> bla bla </div>
<div class="card-text"> bla bla </div>
</div>
</div>
</div>
</div>
Has anybody an solution, how to make the card-text equal height?
.card-text {
border: 1px solid lightgrey;
}
.card {
height: 100%
}
.card-body {
display: flex;
flex-flow: column;
}
.card-text {
flex-grow: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-eq-height">
<div class="card-group">
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="card-title"> bla bla </div>
<div class="card-text"> bla<br><br>bla </div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="card-title"> bla bla </div>
<div class="card-text"> bla bla </div>
</div>
</div>
</div>
</div>
You can use flexbox and the property align-items for that.
See this
.card-group {
display: flex;
align-items: stretch;
}
.card {
height: 100%;
border: 1px solid black
}
https://codepen.io/moisesnandres/pen/dqVzGE
Why dont use .card-deck instead of .card-group?
Like: http://getbootstrap.com/docs/4.1/components/card/#card-decks
It is made for having differend cards, all with the same hight.
They will also expand the sourrounding .row element.
Related
I have a list of divs with data. Each div contains a custom data. Each div have data like a table rows and column, but it shows in descending order, I want to show it in ascending order, for example the div which have multiple rows with data, it come first and the div that have less rows come second and so on in dynamically.
The whole process should be dynamically, for example if any div have many rows it come first and the less rows div come to next and so on, the whole process is based on data entry.
Below you can find an example of what I am thinking of, yet it's not working.
image example for the better understanding
.justrow {
display: flex;
justify-content: space-evenly;
}
.table {
display: table;
width: 25%;
border:1px solid #ccc;
height: 100%;
}
.table2 {
display: table;
width: 25%;
border:1px solid #ccc;
height: 100%;
}
.table3{
display: table;
width: 25%;
border:1px solid #ccc;
height: 100%;
}
.header {
display:table-header-group;
font-weight:bold;
}
.rowGroup {
display:table-row-group;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
width:25%;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
text-align: center;
border-left: 1px solid #ccc;
}
<div class="justrow">
<div class="table">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Bob</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
<div class="table3">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Bob1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
</div>
</div>
<div class="table2">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Bob</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
</div>
You stated that the data is retrieved from a database, so you know how many rows there are in a table and can define a style="--row-count: ..." with each table retrieved.
As each main .table is a flexbox item, you can use the table row count to modify the table flexbox order property and easily change its position inside a .justrow, without Javascript manipulation:
order: 0 or unset -> place table in document creation order
order: negative or lower value -> place table before tables with higher order values
order: positive or higher value -> place table after tables with lower order values
MDN Reference: Ordering flex items
Given the above you can use custom variables for .table --row-count and .justrow --order-sign to set the required sort order for a row of tables.
Essentially, the row count determines the position of a table inside a row and the sign determines the sort direction.
The --order-sign can be defined for each .justrow individually, or just once in :root or body for all .justrow elements (for ease of the demo, in the snippet I used body to define --order-sign).
The equation is easy to understand: order = order-sign x row-count
.justrow {
--order-sign: -1
/*
-1 - Ascending order
0 - no (or document) order
1 - Descending order
*/
}
.table {
order: calc(var(--order-sign) * var(--row-count));
}
<div class="justrow">
<div class="table" style="--row-count: X">table rows</div>
<div class="table" style="--row-count: N">table rows</div>
</div>
In the snippet I added a second two-row table and a few radio buttons to toggle between sort orders:
/* ADDED */
body { --order-sign: 0 }
.table {
order: calc(var(--order-sign) * var(--row-count));
}
/**/
.justrow {
display: flex;
justify-content: space-evenly;
/* added for demo */
flex-flow: row wrap;
gap: 1rem;
}
.table {
flex: 1; /* added for demo */
width: 20%; /* from 25% for demo */
display: table;
border: 1px solid #ccc;
height: 100%;
}
.header {
display: table-header-group;
font-weight: bold;
}
.rowGroup {
display: table-row-group;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 25%;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
text-align: center;
border-left: 1px solid #ccc;
}
fieldset { margin: 0; margin-bottom: 1rem; }
[red] { color: red; font-weight: bold }
<fieldset>
<legend> Sort Order </legend>
<label for="ord1" title="document order">
<input id="ord1" class="radio" type="radio" name="group" checked
oninput="document.body.style.setProperty('--order-sign', 0);">
(None)
</label>
<label for="ord2" title="most rows first">
<input id="ord2" class="radio" type="radio" name="group"
oninput="document.body.style.setProperty('--order-sign', -1);">
(Asc)
</label>
<label for="ord3" title="least rows first">
<input id="ord3" class="radio" type="radio" name="group"
oninput="document.body.style.setProperty('--order-sign', 1);">
(Des)
</label>
<br><br>
<span>MDN Reference: <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></span>
</fieldset>
<div class="justrow">
<div class="table" style="--row-count: 2">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell" red>table 1</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
<div class="table" style="--row-count: 8">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell" red>table 2</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
<div class="table" style="--row-count: 5">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell" red>table 3</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
<div class="table" style="--row-count: 2">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell" red>table 4</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
</div>
I want to move the entire content of the .main-section-image before the .main-section .content .title. But when I use my jQuery code, the content of all other divs is duplicated.
How I can use an if condition to prevent duplicated text from adding to the area?
$('.main-section-image').insertBefore('.main-section .content .title');
.duo-left {float: left;}
.duo-right {float: right;}
.main-section {width: 100%; float: left;}
.main-section .content {
width: 65%;
}
.main-section .main-section-image {
width: 35%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-section">
<div class="content duo duo-right">
<div class="title">
<p><span class="red">TITLE</span> </p>
</div>
<div class="description">
<p>Section description</p>
</div>
</div>
<div class="main-section-image duo-left">
<img src="https://via.placeholder.com/200x200.png">
</div>
<div class="clearfix"> </div>
</div>
<div class="main-section">
<div class="content duo duo-left">
<div class="title">
<p><span class="red">TITLE</span> </p>
</div>
<div class="description">
<p>Section description</p>
</div>
</div>
<div class="main-section-image duo-right">
<img src="https://via.placeholder.com/200x200.png">
</div>
<div class="clearfix"> </div>
</div>
You're inserting all .main-section-image elements before all .content .title elements.
Since you have multiple .main-section elements that each contain their own images and titles, multiple images are inserted before all the titles.
I suggest using jQuery's each() to make the change within each .main-section separately.
Below, I'm using jQuery's selector context, which uses find().
I also add a button and click handler to perform the insert.
But that's just for demonstration, so feel free to remove that code.
$('#go').on('click', function() {
$('.main-section').each(function() {
var $image = $('.main-section-image', this);
var $target = $('.content .title', this);
$image.insertBefore($target);
});
});
.duo-left {
float: left;
}
.duo-right {
float: right;
}
.main-section {
width: 100%;
float: left;
}
.main-section .content {
width: 65%;
}
.main-section .main-section-image {
width: 35%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="go">Make The Change</button>
<hr>
<div class="main-section">
<div class="content duo duo-right">
<div class="title">
<p><span class="red">TITLE</span> </p>
</div>
<div class="description">
<p>Section description</p>
</div>
</div>
<div class="main-section-image duo-left">
<img src="https://via.placeholder.com/100x50.png">
</div>
<div class="clearfix"> </div>
</div>
<div class="main-section">
<div class="content duo duo-left">
<div class="title">
<p><span class="red">TITLE</span> </p>
</div>
<div class="description">
<p>Section description</p>
</div>
</div>
<div class="main-section-image duo-right">
<img src="https://via.placeholder.com/100x50.png">
</div>
<div class="clearfix"> </div>
</div>
Edit
You asked about how to add a class after the change. You can use jQuery's addClass().
Since insertBefore returns a jQuery object, you can chain addClass afterwards, like this:
$image.insertBefore($target).addClass('another-class');
Here's a demonstration:
$('#go').on('click', function() {
$('.main-section').each(function() {
var $image = $('.main-section-image', this);
var $target = $('.content .title', this);
$image.insertBefore($target).addClass('another-class');
});
});
.duo-left {
float: left;
}
.duo-right {
float: right;
}
.main-section {
width: 100%;
float: left;
}
.main-section .content {
width: 65%;
}
.main-section .main-section-image {
width: 35%;
}
.another-class {
outline: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="go">Make The Change</button>
<hr>
<div class="main-section">
<div class="content duo duo-right">
<div class="title">
<p><span class="red">TITLE</span> </p>
</div>
<div class="description">
<p>Section description</p>
</div>
</div>
<div class="main-section-image duo-left">
<img src="https://via.placeholder.com/100x50.png">
</div>
<div class="clearfix"> </div>
</div>
<div class="main-section">
<div class="content duo duo-left">
<div class="title">
<p><span class="red">TITLE</span> </p>
</div>
<div class="description">
<p>Section description</p>
</div>
</div>
<div class="main-section-image duo-right">
<img src="https://via.placeholder.com/100x50.png">
</div>
<div class="clearfix"> </div>
</div>
I have a carousel, using owlCarousel, and I'm trying to make the elements in the carousel to expand on hover. The way it's implemented, is it's simply displayed: none by default, then on hover, it's displayed to block. Nothing fancy.
It's taken out of the flow by an absolute positioning, this way the carousel will not expand on element hover.
The problem is, when the element get's hovered, the details, expanded element doesn't show. I tried giving it a high z-index, but it doesn't seem to fix the problem. Here's the code:
CodePen FIle
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
body {
background-color: teal;
}
.owl-carousel {
background-color: orange;
}
.owl-carousel .item:hover .details {
display: block;
}
.owl-carousel .item-inner-wrapper {
position: relative;
}
.owl-carousel h4 {
background-color: yellow;
height: 100px;
}
.owl-carousel .details {
background-color: pink;
height: 300px;
position: absolute;
top: 100%;
bottom: 0;
right: 0;
left: 0;
display: none;
z-index: 20;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-carousel owl-theme">
<div class="item">
<div class="item-inner-wrapper">
<h4>1</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>2</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>3</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>4</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>5</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>6</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>7</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>8</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>9</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>10</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>11</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>12</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
See if this will work for you:
Set .owl-carousel .item to your content height + detail height (I used 200px)
Set margin-top of .owl-carousel.owl-theme .owl-nav to -(detail height) + 10px (it was originally 10px)
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
body {
background-color: teal;
}
.owl-carousel {
background-color: orange;
}
.owl-carousel .item {
height: 200px;
}
.owl-carousel .item:hover .details {
display: block;
}
.owl-carousel .item-inner-wrapper {
position: relative;
}
.owl-carousel h4 {
background-color: yellow;
height: 100px;
}
.owl-carousel .details {
background-color: pink;
height: 100px;
position: absolute;
top: 100%;
right: 0;
left: 0;
display: none;
}
.owl-carousel.owl-theme .owl-nav {
margin-top: -90px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-carousel owl-theme">
<div class="item">
<div class="item-inner-wrapper">
<h4>1</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>2</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>3</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>4</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>5</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>6</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>7</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>8</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>9</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>10</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>11</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>12</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
You can try not giving a top value, and instead a height of auto to .details
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
body {
background-color: teal;
}
.owl-carousel {
background-color: orange;
}
.owl-carousel .item:hover .details {
display: block;
}
.owl-carousel .item-inner-wrapper {
position: relative;
}
.owl-carousel h4 {
background-color: yellow;
height: 100px;
}
.owl-carousel .details {
background-color: pink;
position: absolute;
bottom: 0;
right: 0;
left: 0;
display: none;
height: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-carousel owl-theme">
<div class="item">
<div class="item-inner-wrapper">
<h4>1</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>2</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>3</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>4</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>5</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>6</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>7</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>8</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>9</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>10</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>11</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>12</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
For some reason when I'm using col-xs-* inside the panel-body, the content overlaps the panel-heading when I scroll down. This doesn't happen when I remove the col-xs-* and row tags.
Before Scrolling down:
After Scrolling down:
Source Code:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.navbar-collapse {
background-color: #69899f;
border-color: #425766;
}
.navbar-header {
background-color: #69899f;
border-color: #425766;
}
.navbar-collapse .navbar-text {
color: #d7e2e9;
}
.navbar-header .navbar-toggle .icon-bar {
background-color: #d7e2e9;
}
.affix {
top: 0;
width: 100%;
}
.affix+.container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="navbar fixed-top clearfix" style="border:1px solid #000;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h2 style="margin-top: 8px;margin-bottom: 8px;margin-right: 80px">Title A</h2>
</div>
<nav class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Title B</li>
</ul>
</nav><!--/.nav-collapse -->
</div>
<div class="container-fluid">
<div class="tab-content clearfix">
<div id="menu1" class="tab-pane fade in active">
<h1 class="text-center">Title B</h1><br>
<div class="container" id="niftarim">
<div class="widget">
<div class="panel panel-info">
<div class="panel-heading"><p>Header</p></div>
<div class="panel-body" style="word-wrap: break-word;">
<div class="row">
<div class="col-xs-3">
<img src="http://placehold.it/40x140">
</div>
<div class="col-xs-9">
<p>bla bla bla</p>
</div>
</div>
</div>
</div>
</div>
<div class="widget">
<div class="panel panel-info">
<div class="panel-heading"><p>Header</p></div>
<div class="panel-body" style="word-wrap: break-word;">
<div class="row">
<div class="col-xs-3">
<img src="http://placehold.it/40x140">
</div>
<div class="col-xs-9">
<p>bla bla bla</p>
</div>
</div>
</div>
</div>
</div>
<div class="widget">
<div class="panel panel-info">
<div class="panel-heading"><p>Header</p></div>
<div class="panel-body" style="word-wrap: break-word;">
<div class="row">
<div class="col-xs-3">
<img src="http://placehold.it/40x140">
</div>
<div class="col-xs-9">
<p>bla bla bla</p>
</div>
</div>
</div>
</div>
</div>
<div class="widget">
<div class="panel panel-info">
<div class="panel-heading"><p>Header</p></div>
<div class="panel-body" style="word-wrap: break-word;">
<div class="row">
<div class="col-xs-3">
<img src="http://placehold.it/40x140">
</div>
<div class="col-xs-9">
<p>bla bla bla</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function() {
$(".navbar").affix({
offset: {
top: $("header").outerHeight(true)
}
});
});
</script>
</body>
</html>
It's an issue with the navigation's z-index. Even just giving .navbar a z-index of 1 fixed the overlap for me. JSYK, the higher the number the less likely it will be under another element, so you should probably make it something like 999. Try these styles instead.
<style>
.navbar {
z-index: 1;
}
.navbar-collapse {
background-color: #69899f;
border-color: #425766;
}
.navbar-header {
background-color: #69899f;
border-color: #425766;
}
.navbar-collapse .navbar-text {
color: #d7e2e9;
}
.navbar-header .navbar-toggle .icon-bar {
background-color: #d7e2e9;
}
.affix {
top: 0;
width: 100%;
}
.affix+.container-fluid {
padding-top: 70px;
}
</style>
I have a 3 x 4 cards, it's a memory game. So to able to play, you need to guess 2 matches.
$('.card').click(function() {
$('.front').toggle();
$('.back').toggle();
});
.card .back {
display: none;
}
.card {
margin: 8px;
}
.card .front {
background-color: blue;
}
.back,
.front {
color: white;
width: 100px;
height: 150px;
}
.card .back {
background-color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
</div>
Based from the snippet, if I click a one card, all of the cards flipped, which is wrong.
Now my problem is, how do I fix this through jquery?
What you're doing wrong is that you're targeting every single element with the class front and back, because of your selectors (.front and .back).
To fix this, you need to tell jQuery that you're targeting only the elements within the element the user just clicked, and for that you use the find function. This makes sure that jQuery checks just the elements in the one you target in and not every single element in the document.
So, where you wrote:
$('.card').click(function(){
$('.front').toggle();
$('.back').toggle();
});
You need to change it to
$('.card').click(function(){
$(this).find('.front').toggle();
$(this).find('.back').toggle();
});
Simple as that.
$('.card').click(function() {
$(this).find('.front').toggle();
$(this).find('.back').toggle();
});
.card .back {
display: none;
}
.card {
margin: 8px;
}
.card .front {
background-color: blue;
}
.back,
.front {
color: white;
width: 100px;
height: 150px;
}
.card .back {
background-color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
</div>
$('.card').click(function(){
$(this).find('.front').toggle();
$(this).find('.back').toggle();
});
That's it
You need to use this to select only some elements with this class. Try this $(this).find(".front").toggle().
Use this:
$('.card').click(function(){
$(this).find('.front').toggle();
$(this).find('.back').toggle();
});
You selected with jQuery all the .front and all .backclasses, you should use that :
$('.card').click(function(){
var $this = $(this);
$this.find('.front').toggle();
$this.find('.back').toggle();
});
When you do
$('.card').click(function() {
$('.front').toggle();
$('.back').toggle();
});
You attach a click listener to all elements with class card. Inside, you toggle all elements with class front and back. You need to be toggling just the front and back that are inside the clicked card. $(this).find(".front").toggle(); does just that.
Simply Read Here
$('.front , .back' , this).toggle();
$('.card').click(function(){
$('.front , .back' , this).toggle();
});
.card .back{
display:none;
}
.card {
margin:8px;
}
.card .front{
background-color: blue;
}
.back, .front{
color:white;
width:100px;
height:150px;
}
.card .back{
background-color:red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
</div>