I want my fluid boxes to take all the content. This is what I get now:
And this is what I am looking for:
I am using the Twitter bootstrap.
Here is the jsfiddle, exactly like my layout shows:
http://jsfiddle.net/jUQEc/
Current html markup:
<div class="container-narrow">
<h4 class="title">Featured Companies</h4>
<div class="row-fluid" id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'>
<div class="span6 item">
<h4 class="title">Company Details</h4>
<div class="box">
test
</div>
</div>
<div class="span3 item">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>testtest<br>test<br>testtest<br>test<br>testtest<br>test<br>test
</div>
</div>
<div class="span3 item">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>testtest<br>test<br>testtest<br>test<br>testtest<br>test<br>test
</div>
</div>
<div class="span4 item">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>test
</div>
</div>
</div>
</div>
Thanks.
You should put a width on the 3rd box and then float it right. If it fits, it will sneak up and fill in the space you are looking for. Perhaps you should brush up on how floats work and take a look at how this applies to divs in bootstrap. Hope this helps!
Related
Basically, I have an accordion on mobile using the bootstap tab collapse.js. Everything works as should, but when the user clicks on to the next panel below, it seems to scroll them down the page and then back up to the container they clicked.
$(document).on('click', '#pdp-tabs-accordion .js-tabcollapse-panel-heading', function () {
self = $(this);
setTimeout(function () {
console.log('scrolling to');
console.log(self.closest('.panel'));
ScrollToElement(self.closest('.panel'), 95);
}, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a aria-controls="advice" role="tab" data-toggle="collapse" class="js-tabcollapse-panel-heading collapsed" data-parent="#pdp-tabs-accordion" aria-expanded="false">Centre</a></h4> </div>
<div id="advicecentre-collapse" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;"> <div class="panel-body js-tabcollapse-panel-body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2 col-xl-6 col-xl-offset-3">
<div class="row">
<div class="product-misc product-misc--advice-centre" id="advice-centre">
<h3>Centre</h3>
<p>We have selected the following pages from our Advice Centre as possibly the most relevant for you.</p>
<div class="row">
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
What is DWR?
</div>
</div>
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
DWR Washing & Care
</div>
</div>
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
Waterproof Ratings Explained
</div>
</div>
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
Waterproof Seams Explained
</div>
</div>
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
2, 2.5 or 3 Layer Fabric?
</div>
</div>
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
Keeping Warm In The Snow
</div>
</div>
</div>
<div class="product-misc__item" itemprop="productID">
<p>We have hundreds more pages, including more Buying Guides and Size Chart.</p>
</div>
<h3 class="margin-top">Size Charts</h3>
<div class="row" id="size-charts">
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
686 - Men's Snowboard Jackets Size Chart
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Any suggestions or ideas you might have to why this is happening would be great.
thanks in adavance!
I created HTML where I want if user hit <img src="https://www.fast2sms.com/panel/img/icons/add1.png" class="add-img"> then 123456789 will fill in textbox dynamically (each-one for different value as in <a> tags) and the border of that selected div will red. I try to search this method on google but I couldn't find that and I am familiar with Js and Jquery so I cant do this But Stack-overflow is developer friends and here millions of well developers and students who helps everyone. Please help to how i made this function.
My code is given below:
<div id="scroll" style="overflow: auto;height:375px">
<div class="row pt-5 pb-5 mb-5 this_contact">
<div class="col-xs-3"><img src="https://img.icons8.com/bubbles/2x/administrator-male.png" height="40"></div>
<div class="col-xs-9 no-col-r">
<span class="f_17">Shiv</span>
<a data-number="123456789" class="toggle_contact"><img src="https://www.fast2sms.com/panel/img/icons/add1.png" class="add-img"></a><br>
<span class="f_13">123456789</span><br>
</div>
</div>
<div class="row pt-5 pb-5 mb-5 this_contact">
<div class="col-xs-3"><img src="https://img.icons8.com/bubbles/2x/administrator-male.png" height="40"></div>
<div class="col-xs-9 no-col-r">
<span class="f_17">Dummy</span>
<a data-number="1253648595" class="toggle_contact"><img src="https://www.fast2sms.com/panel/img/icons/add1.png" class="add-img"></a><br>
<span class="f_13">1253648595</span><br>
</div>
</div>
If i understood correctly,
$(function(){
$('.toggle_contact').click(function(){
var contactNumber = $(this).data('number');
$(this).parents('.this_contact').addClass('selected').siblings().removeClass('selected');
$(this).parents().find('input:text').val(contactNumber);
})
})
.selected{
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="scroll" style="overflow: auto;height:375px">
<div class="row pt-5 pb-5 mb-5 this_contact">
<div class="col-xs-3"><img src="https://img.icons8.com/bubbles/2x/administrator-male.png" height="40"></div>
<div class="col-xs-9 no-col-r">
<span class="f_17">Shiv</span>
<a data-number="123456789" class="toggle_contact"><img src="https://www.fast2sms.com/panel/img/icons/add1.png" class="add-img"></a><br>
</div>
</div>
<div class="row pt-5 pb-5 mb-5 this_contact">
<div class="col-xs-3"><img src="https://img.icons8.com/bubbles/2x/administrator-male.png" height="40"></div>
<div class="col-xs-9 no-col-r">
<span class="f_17">Dummy</span>
<a data-number="1253648595" class="toggle_contact"><img src="https://www.fast2sms.com/panel/img/icons/add1.png" class="add-img"></a><br>
</div>
</div>
<input type="text" name='name' value="">
I'm sorry this is quite a silly question, but maybe it's because of being working for a few hours, but I can't wrap my head around this. I mean, I think I can solve this by manipulating the whole div structure with javascript, but I can't help to feel there has to be a way simpler solution that I'm not thinking of.
Here's a fiddle of what I got right now:
https://jsfiddle.net/aq9Laaew/42687/
<main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main">
<div class="container-fluid colindex">
<div class="row">
<div class="col-md-9 stackem">
<div class="card">
<ol class="breadcrumb">
<li class="breadcrumb-item">Index</li>
<li class="breadcrumb-item active"></li>
</ol>
<h4 class="card-header">Test
<button class="btn btn-primary add" type="button" data-toggle="tooltip" data-placement="bottom" data-trigger="hover" title="test"><i class="material-icons" id="sidebaricons">bookmark</i></button>
</h4>
<div class="card-body">
<div class="container index">
<div class="row py-3 px-4">
<div class="col-md-6">
<p></p>
</div>
<div class="col-md-6">
<p></p>
</div>
</div>
<div class="row py-3 px-4">
<div class="col-md-6">
<p>test</p>
</div>
<div class="col-md-6">
<p>test</p>
</div>
</div>
<div class="row py-3 px-4">
<div class="col-md-6">
<p>test</p>
</div>
<div class="col-md-6">
<p>test</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<p>testlist</p>
</div>
</div>
</div>
</main>
So the div which says "testlist" on the right, I got an include there with a list with links for fast access.
Question: What I'm trying to achieve is adding a button on this list which will toggle it. The thing is, when it's hidden, I want the other divs on the left side to expand and takes up the space on the list. When the list would be toggled again it would become like it is at the moment again.
Again, sorry for the (I'm sure) silly question, and thanks a ton in advance.
Have you tried using <div class="col-md stackem">
instead of <div class="col-md-9 stackem">
to let bootstrap auto-adjust the width?
In my mixitup, i am doing a basic filter but when i click one of the filter buttons, filtered items comes and disappears after a second. I can see in firebug, it adds “fail” class to the container of these items. But i can’t see what kind of error is that.
In codepen: http://codepen.io/anon/pen/PPOgwr
Here is my HTML for filter buttons:
<div class="row row-centered filter-section">
<div class="col-md-7 col-centered">
<ul class="filter">
<li>Hepsi</li>
<li>/</li>
<li>Basılı İş</li>
<li>/</li>
<li>Kurumsal Kimlik</li>
<li>/</li>
<li>İlan</li>
<li>/</li>
<li>Ambalaj</li>
<li>/</li>
<li>Stand</li>
<li>/</li>
<li>Film</li>
</ul>
</div>
</div>
Here is the container:
<div class="row grid" id="grid">
<div class="col-md-3 col-sm-6 margin-bottom-30 mix basili">
<div class="position-relative">
<a href="" id="silver1">
<img class="img-responsive" src="isler/silver/silver1.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 margin-bottom-30 mix basili">
<div class="position-relative">
<a href="" id="silver2">
<img class="img-responsive" src="isler/silver/silver3.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 margin-bottom-30 mix ilan">
<div class="position-relative">
<a href="" id="silver3">
<img class="img-responsive" src="isler/silver/silver4.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
</div>
JS code:
$('#grid').mixItUp();
$('.filter-section').on( 'click', 'a.filter', function() {
var filterValue = $(this).attr('data-filter');
$('#grid').mixItUp('filter', filterValue, false);
$('#grid').on('mixFail', function(e, state){
console.log(state);
});
});
I need your helps
It's probably a bit late to give you an answer on this, but I ran into a similar problem and as part of that I managed to sort yours, too.
To cut it short, your issue is that you applied the 'filter' class on the <ul> as well as the <li> tags. Removing the class from <ul> in the CodePen you provided solves the issue - although messes up your layout.
Hope this helps.
how can I create some space between grid spans in Twitter bootstrap? I am using margin or padding, but both of them push the last grid span to a new line and breaks the layout. Here is the jsfiddle:
http://jsfiddle.net/jUQEc/1/
And, some markup:
<div class="container-narrow">
<h4 class="title">Featured Companies</h4>
<div class="row-fluid" id="posts">
<div class="span6 post">
<h4 class="title">Company Details</h4>
<div class="box">
test
</div>
</div>
<div class="span3 post">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>testtest<br>test<br>testtest<br>test<br>testtest<br>test<br>test
</div>
</div>
<div class="span3 post">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>testtest<br>test<br>testtest<br>test<br>testtest<br>test<br>test
</div>
</div>
<div class="span4 post">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>test
</div>
</div>
</div>
</div>
Two things:
You need to add the container-fluid class to the container. This will keep the left/right margins in tact when you bring the screen in.
Add a box-sizing:border-box to the .box class to tell the browser to keep all padding and margins inside the width defined by the span classes.
Lastly, you have a header tag inside the container but not in a row/span. You will probably get more consistent rendering if you wrap it up.
Here is a fiddle: http://jsfiddle.net/8RVx6/