I have a grid of thumbnails. It's coded in <ul> as a wrapper and <li> for displaying each thumbnails. I have set the following CSS to the <li> tag:
float: none;
display: inline-block !important;
The thumbnails are displaying in a Grid. I have also used Bootstrap classes in <li class="col-xs-12 col-sm-6 col-md-3 col-lg-3">. As per assigned classes it should display 4 thumbnails per row. But currently it's displaying only 3 thumbnails per row. I searched and found that it's because <li>s are given display: inline-block and there are line break in HTML after each <li> in the HTML file. Please let me know how to display 4 thumbnails per row using display: inline-block.
Also if I set the float: left for <li> then I should give height for each <li>. But the images within those <li>s are of different size.
The problems are:
I want to display 4 columns per row (now only 3 are displaying)
I want to set the border-right to cover whole height of the grid row. (Now since height of the <li> is according to the height of the thumbnail, the border-right is spanning till half the row for smaller thumbnails.)
Please help me with this.
body {
background-color: #ddd;
}
.list-unstyled {
background-color: #eee;
width: 100%;
}
.list-unstyled li{
background-color: #eee;
float: none;
display: inline-block !important;
/*display: -moz-grid !important;*/
padding: 10px;
margin: 0;
border-right: 2px solid #ddd;
border-bottom: 2px solid #ddd;
box-sizing: border-box;
}
.list-unstyled li img{
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9">
<ul class="list-unstyled">
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/07/A-HAPPY-SUNDAY.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/12/cover17.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/09/cover1.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
<a href="#" title="" class="btn btn-primary" >Button</a>
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/07/Bolne-Wali-Ghadi.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/10/cover14.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
<a href="#" title="" class="btn btn-primary" >Button</a>
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2016/01/cover.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/07/Chhoti-Chinti-ki-Badi-Dawat.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/10/cover7.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/10/cover13.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/07/Fu-ku.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/10/cover8.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/07/cover7.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
Just remove display: inline-block !important; from .list-unstyled li and give display: flex; flex-wrap: wrap; to .list-unstyled will make it as your expected result.
.list-unstyled {
background-color: #eee;
width: 100%;
display: flex;
flex-wrap: wrap;
}
Working Fiddle
Edit:
Give display: flex; align-items: flex-end; to .list-unstyled li
Updated Fiddle
Try getting rid of float: none; in .list-unstyled li
Related
I'm trying to build a layout which essentially looks like this (the blue line being the scroll bar)
But with how I have it right now the lower green box goes past the total height of the entire box. I've uploaded a rough version of what I have created onto codepen, I'm using the Bulma framework and essentially I want the lower box in the second column be a height where the total height of the left column equals the height of the right column.
So I want it to end where the black line is and have a scroll bar where the right hand side is.
I can set the height of the lower box to be a specific view height which fixes it a tiny bit and just set the overflow to scroll, but it gets messed up a bit if you try to resize.
At worst, I can do this with JavaScript by making the height of the lower box equal to height of left column - height of top box but I'm trying to see if there's a better CSS way.
My solution: set .column.is-2 to flex with direction column, set #getHeight display: block and make bottom one scrollable with overflow: auto.
Codepen demo: https://codepen.io/anon/pen/ZVJdgj
html {
overflow:hidden;
}
.fullh:not(:last-child) {
margin-bottom: 0rem;
}
.fullh:last-child {
margin-bottom: 0rem;
}
.fullh{
margin-top: 0rem;
margin-left: 0rem;
margin-right: 0rem;
}
.shadow {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
option:hover{
background-color:#F1F6FE;
}
.is-vertical-center {
display: flex;
align-items: center;
}
.component-helper {
cursor: pointer;
color: #74A2F8;
}
.component-helper:hover {
color: #504A77;
}
.column.is-2 {
display: flex;
flex-direction: column;
}
#getHeight {
display: block;
}
.column.is-2 > .scroll {
overflow: auto
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" />
<link rel="icon" type="image/png" href="" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="dashboard_script.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<body>
<nav class="navbar is-transparent navbar-padding" role="navigation" aria-label="main navigation" style="background-color: #fafafa">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item nav-text" href="#" style="font-weight: 500;font-size: 1.5rem;color: #74A2F8;">
Test
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-end nav-text">
<a class="navbar-item">
Test
</a>
<a class="navbar-item">
Test
</a>
<a class="navbar-item">
Test
</a>
<a class="navbar-item" style="color:#f15870" href="/logout">
Test
</a>
</div>
</div>
</div>
</nav>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<section class="hero is-fullheight" style="background-color: #fafafa">
<div class="columns fullh" style="height:92vh;">
<div id="heightActual" class="column is-10">
<iframe class="shadow" src="/" frameborder="0" style="width: 100%;height:100%;">
</iframe>
</div>
<div class="column is-2">
<div id="getHeight" class="columns">
<div class="column">
<div class="box is-vertical-center is-centered" style="height:100%;background-color: #fafafa;">
<div class="has-text-centered" style="margin: 0 auto;">
<ul>
<li class="component-helper" id="add">Add Components</li>
<li class="component-helper" id="edit">Edit Components</li>
<li class="component-helper" id="order">Order Components</li>
<li class="component-helper" id="order">Add pages</li>
<li class="component-helper" id="order">View Pages</li>
</ul>
</div>
</div>
</div>
</div>
<div class="columns scroll">
<div class="column">
<div id="heightFix" class="box is-vertical-center is-centered" style="background-color: #fafafa;display:block;">
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Modal containing all the Elements -->
<div class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box" style="width: 100%;">
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
</body>
Hope this will help
Im trying to get these articles to be displayed vertically (one on top of the other) and then 4 divs per column of the main section. I can't them to eb the same size or for all of them to display the articles stacked on top of each other. Some keep going side by side. I can't figure out what to do.
<div class="indexNPrt2Mid" >
<div class ="row flex-wrap">
<div class = "col-lg-6 flex-first">
<div class="indexNPrt2MidSlider">
<div class="ylwTpBx wlwTpBx clearfix pointer">
<h3 (click)="navigateToArticles(19)">Daily Fantasy Basketball<span><img
src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/basketball.png" alt="" class="img-responsive"></p>
</div>
<div class="owl-carousel owl-theme midSlider midSlider1">
<div data-toggle="modal" data-target="#myModal2" (click)="switchToSingle(article)" class="item pointer"
*ngFor="let article of basketballArticles">
<img style="width: 100%;height:auto;"
[attr.src]="findMedia(article.featured_media) ? findMedia(article.featured_media) : '../../../../assets/images/Basketball.jpg'"
alt="" class="img-responsive">
<div class="nltstNwsInfoTpWrp">
<h4><a>{{article.title.rendered}}</a></h4>
<!-- <p>{{article.extract?.slice(0,15)}}...</p>-->
</div>
</div>
</div>
</div>
<div class="indexNPrt2MidSlider">
<div class="ylwTpBx wlwTpBx clearfix pointer">
<h3 (click)="navigateToArticles(17)">Daily Fantasy Baseball<span><img
src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/baseball.png" alt="" class="img-responsive"></p>
</div>
<div class="owl-carousel owl-theme midSlider midSlider2">
<div data-toggle="modal" data-target="#myModal2" (click)="switchToSingle(article)" class="item pointer"
*ngFor="let article of baseballArticles">
<img style="width: 100%;height:auto;"
[attr.src]="findMedia(article.featured_media) ? findMedia(article.featured_media) : '../../../../assets/images/base-ball.jpg'"
alt="" class="img-responsive">
<div class="nltstNwsInfoTpWrp">
<h4><a>{{article.title.rendered}}</a></h4>
<!-- <p>{{article.extract?.slice(0,15)}}...</p>-->
</div>
</div>
</div>
</div>
<div class="indexNPrt2MidSlider">
<div class="ylwTpBx wlwTpBx clearfix pointer">
<h3 (click)="navigateToArticles(16)">Daily Fantasy Football<span><img
src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/football.png" alt="" class="img-responsive"></p>
</div>
<div class="owl-carousel owl-theme midSlider midSlider3">
<div data-toggle="modal" data-target="#myModal2" (click)="switchToSingle(article)" class="item pointer"
*ngFor="let article of footballArticles">
<img style="width: 100%;height:auto;"
[attr.src]="findMedia(article.featured_media) ? findMedia(article.featured_media) : '../../../../assets/images/football.jpg'"
alt="" class="img-responsive">
<div class="nltstNwsInfoTpWrp">
<h4><a>{{article.title.rendered}}</a></h4>
<!-- <p>{{article.extract?.slice(0,15)}}...</p>-->
</div>
</div>
</div>
</div>
<div class="indexNPrt2MidSlider">
<div class="ylwTpBx wlwTpBx clearfix pointer">
<h3 (click)="navigateToArticles(18)">Daily Fantasy Hockey<span><img
src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/football.png" alt='' class="img-responsive"></p>
</div>
<div class="owl-carousel owl-theme midSlider midSlider4">
<div data-toggle="modal" data-target="#myModal2" (click)="switchToSingle(article)" class="item pointer"
*ngFor="let article of hockeyArticles">
<img style="width: 100%;height:auto;"
[attr.src]="findMedia(article.featured_media) ? findMedia(article.featured_media) : '../../../../assets/images/Basketball.jpg'"
alt="" class="img-responsive">
<div class="nltstNwsInfoTpWrp">
<h4><a>{{article.title.rendered}}</a></h4>
<!-- <p>{{article.extract?.slice(0,15)}}...</p>-->
</div>
</div>
</div>
</div>
</div>
<div class = "col-lg-6 flex-last">
<div class="indexNPrt2MidSlider">
<div class="ylwTpBx wlwTpBx clearfix pointer">
<h3 (click)="navigateToArticles(18)">Daily Fantasy Soccer<span><img
src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/football.png" alt='' class="img-responsive"></p>
</div>
<div class="owl-carousel owl-theme midSlider midSlider4">
<div data-toggle="modal" data-target="#myModal2" (click)="switchToSingle(article)" class="item pointer"
*ngFor="let article of soccerArticles">
<img style="width: 100%;height:auto;"
[attr.src]="findMedia(article.featured_media) ? findMedia(article.featured_media) : '../../../../assets/images/Basketball.jpg'"
alt="" class="img-responsive">
<div class="nltstNwsInfoTpWrp">
<h4><a>{{article.title.rendered}}</a></h4>
<!-- <p>{{article.extract?.slice(0,15)}}...</p>-->
</div>
</div>
</div>
</div>
<div class="indexNPrt2MidSlider">
<div class="ylwTpBx wlwTpBx clearfix pointer">
<h3 (click)="navigateToArticles(18)">Daily Fantasy Golf<span><img
src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/football.png" alt='' class="img-responsive"></p>
</div>
<div class="owl-carousel owl-theme midSlider midSlider4">
<div data-toggle="modal" data-target="#myModal2" (click)="switchToSingle(article)" class="item pointer"
*ngFor="let article of golfArticles">
<img style="width: 100%;height:auto;"
[attr.src]="findMedia(article.featured_media) ? findMedia(article.featured_media) : '../../../../assets/images/Basketball.jpg'"
alt="" class="img-responsive">
<div class="nltstNwsInfoTpWrp">
<h4><a>{{article.title.rendered}}</a></h4>
<!-- <p>{{article.extract?.slice(0,15)}}...</p>-->
</div>
</div>
</div>
</div>
<div class="indexNPrt2MidSlider">
<div class="ylwTpBx wlwTpBx clearfix pointer">
<h3 (click)="navigateToArticles(18)">Daily Fantasy MMA<span><img
src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/football.png" alt='' class="img-responsive"></p>
</div>
<div class="owl-carousel owl-theme midSlider midSlider4">
<div data-toggle="modal" data-target="#myModal2" (click)="switchToSingle(article)" class="item pointer"
*ngFor="let article of mmaArticles">
<img style="width: 100%;height:auto;"
[attr.src]="findMedia(article.featured_media) ? findMedia(article.featured_media) : '../../../../assets/images/Basketball.jpg'"
alt="" class="img-responsive">
<div class="nltstNwsInfoTpWrp">
<h4><a>{{article.title.rendered}}</a></h4>
<!-- <p>{{article.extract?.slice(0,15)}}...</p>-->
</div>
</div>
</div>
</div>
<div class="indexNPrt2MidSlider">
<div class="ylwTpBx wlwTpBx clearfix pointer">
<h3 (click)="navigateToArticles(18)">Daily Fantasy Racing<span><img
src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/football.png" alt='' class="img-responsive"></p>
</div>
<div class="owl-carousel owl-theme midSlider midSlider4">
<div data-toggle="modal" data-target="#myModal2" (click)="switchToSingle(article)" class="item pointer"
*ngFor="let article of nascarArticles">
<img style="width: 100%;height:auto;"
[attr.src]="findMedia(article.featured_media) ? findMedia(article.featured_media) : '../../../../assets/images/Basketball.jpg'"
alt="" class="img-responsive">
<div class="nltstNwsInfoTpWrp">
<h4><a>{{article.title.rendered}}</a></h4>
<!-- <p>{{article.extract?.slice(0,15)}}...</p>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="indexNPrt2Rght">
<div class="ylwTpBx clearfix">
<h3 routerLink="/news">Social Feeds <span><img src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/rght_icn3.png" alt="" class="img-responsive"></p>
</div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#nTwtr" aria-controls="nTwtr" role="tab"
data-toggle="tab"><img
src="../../../../assets/images/twitter_icn.png" alt=""></a></li>
<li role="presentation"><a href="#nFb" aria-controls="nFb" role="tab" data-toggle="tab"><img
src="../../../../assets/images/facebook_icn.png" alt=""></a></li>
<li role="presentation"><a href="#nInsta" aria-controls="nInsta" role="tab" data-toggle="tab"><img
src="../../../../assets/images/insta_icn.png" alt=""></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content" style="height:1700px;overlflow:scroll;">
<div class="nSocialTbWrap">
<div class="nSocialTbBx" *ngFor="let tweet of twitterFeeds">
<img
[attr.src]="tweet?.user?.profile_banner_url ? tweet?.user?.profile_banner_url : '../../../../assets/images/twitter-befault.jpg'"
alt="" class="img-responsive social-feed-img"/>
<div class="nSocialTbBxInfo">
<div class="nSocialTbBxInfoTp clearfix">
<a href="javascript:void(0)"><span class="icnWrapperS">{{tweet?.user.name}}</span><i><img
src="../../../../assets/images/twitter_icn.png"></i></a>
<div class="nltstNwsInfoTme">
<span class="icnWrapperS"><img src="../../../../assets/images/nclck_icn.png" alt=""
class="img-responsive"></span>
<i>{{tweet.created_at |date:'dd MMM, yyyy h:m a'}}</i>
</div>
</div>
<p>{{tweet?.text?.slice(0,150)}}...</p>
<a href="javascript:void(0)" class="nRdMor">Read More <span><img
src="../../../../assets/images/blkArow.png"></span></a>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="nFb">
<div class="nSocialTbWrap">
<div class="nSocialTbBx" *ngFor="let tweet of facebookFeeds">
<img
[attr.src]="tweet?.attachments?.data[0]?.media?.image?.src ? tweet?.attachments?.data[0]?.media?.image?.src :'../../../../assets/images/f-default.jpg'"
alt="" class="img-responsive social-feed-img"/>
<div class="nSocialTbBxInfo">
<div class="nSocialTbBxInfoTp clearfix">
<a href="javascript:void(0)"><span class="icnWrapperS">{{tweet?.message}}</span><i><img
src="../../../../assets/images/facebook_icn.png"></i></a>
<div class="nltstNwsInfoTme">
<span class="icnWrapperS"><img src="../../../../assets/images/nclck_icn.png" alt=""
class="img-responsive"></span>
<i>{{tweet.created_at |date:'dd MMM, yyyy h:m a'}}</i>
</div>
</div>
<p>{{tweet?.text?.slice(0,150)}}...</p>
<a href="{{tweet?.attachments?.data[0]?.url}}" target="_blank" class="nRdMor">Read More <span><img
src="../../../../assets/images/blkArow.png"></span></a>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="nInsta">
<div class="nSocialTbWrap">
<div class="nSocialTbBx" *ngFor="let tweet of instagramFeeds">
<img
[attr.src]="tweet?.images?.thumbnail?.url ? tweet?.images?.thumbnail?.url :'../../../../assets/images/f-default.jpg'"
alt="" class="img-responsive social-feed-img"/>
<div class="nSocialTbBxInfo">
<div class="nSocialTbBxInfoTp clearfix">
<a href="javascript:void(0)"><span class="icnWrapperS">{{tweet?.user.full_name}}</span><i><img
src="../../../../assets/images/insta_icn.png"></i></a>
<!--<div class="nltstNwsInfoTme">
<span class="icnWrapperS"><img src="../../../../assets/images/nclck_icn.png" alt=""
class="img-responsive"></span>
<i>{{tweet.created_time |date:'dd MMM, yyyy h:m a'}}</i>
</div>-->
</div>
<p>{{tweet?.caption?.slice(0,150)}}...</p>
<a href="{{tweet?.link}}" class="nRdMor" target="_blank">Read More <span><img
src="../../../../assets/images/blkArow.png"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is my code. The exterior div (indexNPrt2Mid) is meant to be displayed in the center of the page with two columns that have the other 8 divs included in them, with even heights, widths and three articles displayed in a stacked configuration. I dont know where my issue is coming from .
here is the CSS:
.news-notes {
/* text-align: justify; */
}
.body {
width: 100%;
}
.indexNPrt2MidSlider{
height: 25%;
}
.indexNPrt2Mid {
columns: 2;
}
.social-feed-img {
height: auto;
width: 100%;
}
.news-item {
border-top: 1px solid #eee;
}
.news-item:first-child {
border-top: none;
}
.pointer {
cursor: pointer;
}
.TopText {
margin-top: -5em;
font-size: 2em;
color: white;
}
.TopText div {
font-size: 3em;
}
.TopText h1 {
font-size: 2em;
color: white;
}
#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: red; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
}
#myBtn:hover {
background-color: #555; /* Add a dark-grey background on hover */
}
.backToTopButton.visible {
opacity: 1;
visibility: visible;
}
.backToTopButton .backToTopArrow {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
display: block;
}
.backToTopButton i {
position: absolute;
top: 1.25rem;
right: 1.0625rem;
padding: .5rem;
border: solid #fff;
border-width: 0 .15rem .15rem 0;
}
i {
display: inline-block;
width: auto;
height: auto;
margin: 0;
padding: 0;
float: inherit;
text-align: inherit;
}
*, :after, :before {
box-sizing: content-box;
}
.tab-content::-webkit-scrollbar{
overflow-scrolling: auto;
overflow: auto;
height: auto;
padding: .5rem;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
}
So here is how I could do the layout. if you resize you see it will stack on top of eachother
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 " style="border: 1px solid red; width:100%; height: 50vh;">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid black;height:50vh;">
</div>
<div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid green;height:50vh;">
</div>
<div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid blue;height:50vh;">
</div>
<div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid yellow;height:50vh">
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 " style="border: 1px solid green; width:100%; height: 50vh;">
</div>
<div class="col-sm-12 col-md-12 col-lg-12 " style="border: 1px solid blue; width:100%; height: 50vh;">
</div>
<div class="col-sm-12 col-md-12 col-lg-12" style="border: 1px solid orange; width:100%; height: 50vh;">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid black;height:50vh;">
</div>
<div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid green;height:50vh;">
</div>
<div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid blue;height:50vh;">
</div>
<div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid yellow;height:50vh">
</div>
</div>
</div>
</body>
</html>
I'm using button filtering from this website:
https://bootsnipp.com/snippets/featured/portfolio-gallery-with-filtering-category
Is it possible to let it automatically open 'HDPE Pipes' instead of 'All'?
I hope someone here can provide me an answer because I'm really stuck here..
You simply need to add these two lines at the beginning of your JQuery code:
$(".filter").not('.hdpe').hide();
$('.filter').filter('.hdpe').show();
This ensures that after the document is loaded, all the filters which don't have the class of hdpe are hidden and the ones which have are shown.
Here's a snippet for that:
https://bootsnipp.com/user/snippets/5MBWR
X2 primary concerns to address:
1. Hide the .filter elements that are not .hdpe so that they don't display on page load
Since you are using .hide() and .show() methods respectively to toggle between the display of elements in question, stick with an inline style rule (style="display: none;") that you should declare on all .figure elements that do not have the class .hdpe - so in other words; "all elements you don't want to have show up on page load", e.g:
<!-- You want to have displayed on page load -->
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<!-- You don't want to have displayed on page load -->
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle" style="display: none;">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
2. Add the .active class to the .filter-button element you want to have active on page load
You'll need to also account for the filter button that should be active on page load. Add the class .active to the .filter-button element in question, in this case that would be element with the attribute data-filter="hdpe", e.g:
<div align="center">
<button class="btn btn-default filter-button" data-filter="all">All</button>
<button class="btn btn-default filter-button active" data-filter="hdpe">HDPE Pipes</button>
<button class="btn btn-default filter-button" data-filter="sprinkle">Sprinkle Pipes</button>
<button class="btn btn-default filter-button" data-filter="spray">Spray Nozzle</button>
<button class="btn btn-default filter-button" data-filter="irrigation">Irrigation Pipes</button>
</div>
Code Snippet Demonstration:
$(document).ready(function(){
$(".filter-button").click(function(){
$(".filter-button").removeClass('active');
$(this).addClass('active');
var value = $(this).attr('data-filter');
if(value == "all") {
//$('.filter').removeClass('hidden');
$('.filter').show('1000');
} else {
//$('.filter[filter-item="'+value+'"]').removeClass('hidden');
//$(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
$(".filter").not('.'+value).hide('3000');
$(".filter").filter('.'+value).show('3000');
}
});
});
.gallery-title
{
font-size: 36px;
color: #42B32F;
text-align: center;
font-weight: 500;
margin-bottom: 70px;
}
.gallery-title:after {
content: "";
position: absolute;
width: 7.5%;
left: 46.5%;
height: 45px;
border-bottom: 1px solid #5e5e5e;
}
.filter-button
{
font-size: 18px;
border: 1px solid #42B32F;
border-radius: 5px;
text-align: center;
color: #42B32F;
margin-bottom: 30px;
}
.filter-button:hover
{
font-size: 18px;
border: 1px solid #42B32F;
border-radius: 5px;
text-align: center;
color: #ffffff;
background-color: #42B32F;
}
.btn-default:active .filter-button:active
{
background-color: #42B32F;
color: white;
}
.port-image
{
width: 100%;
}
.gallery_product
{
margin-bottom: 30px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h1 class="gallery-title">Gallery</h1>
</div>
<div align="center">
<button class="btn btn-default filter-button" data-filter="all">All</button>
<button class="btn btn-default filter-button active" data-filter="hdpe">HDPE Pipes</button>
<button class="btn btn-default filter-button" data-filter="sprinkle">Sprinkle Pipes</button>
<button class="btn btn-default filter-button" data-filter="spray">Spray Nozzle</button>
<button class="btn btn-default filter-button" data-filter="irrigation">Irrigation Pipes</button>
</div>
<br/>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle" style="display: none;">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation" style="display: none;">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray" style="display: none;">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation" style="display: none;">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray" style="display: none;">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation" style="display: none;">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation" style="display: none;">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray" style="display: none;">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle" style="display: none;">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
</div>
</div>
I need help to change bootstrap column order inside php loop which counts two div`s (with class product). Each two divs (with class product) in loop contains two bootstrap columns (divs with class image and class description) with same order and then next two divs (with class product) has reverse order of bootstrap columns inside (divs with class description and class image).
The concept in php loop goes like this:
DIV_1 (Image + Description) DIV_2 (Image + Description)
DIV_3 (Description + Image) DIV_4 (Description)
and etc. in php loop
Everything works well on desktop but on mobile devices I would like to have normal layout on scroll where all div`s will have IMAGE first and then Description.
Full code:
<section class="products">
<div class="container">
<?php $sl=1; ?>
<?php if(($sl==1)||($sl==2)) { ?>
<div class="product col-lg-6 col-md-12 col-sm-12">
<div class="image col-lg-6 col-md-6 col-sm-12">
<a href="#" class="moreLink">
<img src="" alt="" />
</a>
</div>
<div class="description col-lg-6 col-md-6 col-sm-12">
<div class="product-description left-triangle">
<h3>Product Title</h3>
<p>Description text goes here...</p>
Details
</div>
</div>
</div>
<?php
$sl++;
}
else
{ ?>
<div class="product col-lg-6 col-md-12 col-sm-12">
<div class="description col-lg-6 col-md-6 col-sm-12">
<div class="product-description right-triangle">
<h3>Product Title</h3>
<p>Description text goes here...</p>
Details
</div>
</div>
<div class="image col-lg-6 col-md-6 col-sm-12">
<a href="#" class="moreLink">
<img src="" alt="" />
</a>
</div>
</div>
<?php if($sl==3)
$sl++;
else
$sl=1; } ?>
</div>
</section>
the easiest way - use css flexbox
https://css-tricks.com/almanac/properties/o/order/
Flexbox make sense if I change flex-item classes for divs in loop with class product (class flex-container). If I use flex-item-a and flex-item-b for bootstrap columns (with class image and with class description).
Is this solution mobile/tablet cross-browser ready?
<section class="products">
<div class="container">
<?php $sl=1; ?>
<?php if(($sl==1)||($sl==2)) { ?>
<div class="product col-lg-6 col-md-12 col-sm-12 flex-container">
<div class="image col-lg-6 col-md-6 col-sm-12 flex-item-a">
<a href="#" class="moreLink">
<img src="" alt="" />
</a>
</div>
<div class="description col-lg-6 col-md-6 col-sm-12 flex-item-a">
<div class="product-description left-triangle">
<h3>Product Title</h3>
<p>Description text goes here...</p>
Details
</div>
</div>
</div>
<?php
$sl++;
}
else
{ ?>
<div class="product col-lg-6 col-md-12 col-sm-12 flex-container">
<div class="description col-lg-6 col-md-6 col-sm-12 flex-item-b">
<div class="product-description right-triangle">
<h3>Product Title</h3>
<p>Description text goes here...</p>
Details
</div>
</div>
<div class="image col-lg-6 col-md-6 col-sm-12 flex-item-b">
<a href="#" class="moreLink">
<img src="" alt="" />
</a>
</div>
</div>
<?php if($sl==3)
$sl++;
else
$sl=1; } ?>
</div>
</section>
with css style:
.flex-container {
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
width:100%;
}
.flex-item-a:nth-of-type(1), .flex-item-b:nth-of-type(2) { order: 1; }
.flex-item-a:nth-of-type(2), .flex-item-b:nth-of-type(1) { order: 2; }
.flex-item-a, .flex-item-b { width: 100%; height:auto; }
I'm using Bootstrap and I'm trying to use the Collapse.
I want the div #film to hide when I click the <li class="rekruterring>and I'm missing something. It won't close no matter what I do, I've tried with accordion, data-parents, javascript and nothing makes the #filmdiv hide when I click the .rekruterring and the #rekruttering div is shown.
Here's my code and be aware that the #rekruterring is expanding as it should, but is not hiding #film.
/* Latest compiled and minified JavaScript included as External Resource */
/* DOES NOTHING */
$(document).ready(function() {
$(".rekruttering").click(function() {
$("#film").collapse('hide');
});
})
/* VIMEO */
img {
max-width: 100%;
height: auto;
}
.video {
background: #fff;
padding-bottom: 20px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
width: 100%;
/* Thumbnails 5 across */
margin: 1%;
}
.video img {
width: 100%;
opacity: 1;
}
.video img:hover,
.video img:active,
.video img:focus {
opacity: 0.75;
}
.categories li {
list-style-type: none;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="accordion" class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Galleri</h2>
<hr class="bg-primary">
</div>
<div class="col-lg-12 categories text-center">
<ul>
<a class="film" data-toggle="collapse" data-target="#film" data-parent="#accordion">Firmapræsentation</a> |
<a class="rekruterring" data-toggle="collapse" data-target="#rekruterring" data-parent="#accordion">Rekruterringsfilm</a> |
<li>TV -/Biografspots & Imagefilm</li>|
<li>Salgs- & Produktfilm</li>
</ul>
</div>
</div>
<div id="film" class="row text-centered collapse in">
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">FILM</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">FILM</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">FILM</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h2 class="videoTitle" style="text-align:center;">FILM</h2>
</article>
</div>
</div>
<!-- FILM -->
<div id="rekruterring" class="row text-centered collapse">
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h2 class="videoTitle" style="text-align:center;">REKRUTERRING</h2>
</article>
</div>
</div>
<!-- REKRUTERRING -->
</div>
This is not working because there is a Bootstrap bug/issue when using the parent class. It relies on the use of the panel class being wrapped around your collapse elements.
https://github.com/twbs/bootstrap/issues/10966
Updated JSFiddle
<div class="panel">
<div id="film" class="row text-centered collapse in">
<div class="panel">
<div id="rekruterring" class="row text-centered collapse">