So my confusion is that the Scrollspy is targeting the outer div instead of the actual element it is modifying. I'm trying to understand why that is the case?
The code in question is line 12 and 89-90 here:
http://4f7ba83874222b00ae84-8c55136fa379d9b2d1adde446f45d068.r28.cf2.rackcdn.com/scrollspy.html
Tried my best to include relevant part here:
<body data-spy="scroll" data-target="#myScrollspy">
<div class="container">
<div class="row">
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
<h1 id="p_1">Part 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et felis consequat velit sollicitudin fermentum....
</p>
<h1 id="p_2">Part 2</h1>
<p>
Maecenas massa eros, aliquam id nisi ut, venenatis eleifend diam....
</p>
<h1 id="p_3">Part 3</h1>
<p>
Quisque id luctus tortor, a scelerisque nulla....
</p>
<h1 id="p_4">Part 4</h1>
<p>
Nam sed volutpat sapien....
</p>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" id="myScrollspy">
<ul class="nav nav-pills nav-stacked affix">
<li class="active">Part 1</li>
<li>Part 2</li>
<li>Part 3</li>
<li>Part 4</li>
</ul>
</div>
</div>
</div>
</body>
It actually target parent element of any Bootstrap navigation component.
It'd work too if u put the data-target to the ul nav class..
Related
This question already has answers here:
How to vertically align an image inside a div
(37 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 2 years ago.
The Bulma documentation on media objects gives this example:
<article class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src="https://bulma.io/images/placeholders/128x128.png">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>John Smith</strong> <small>#johnsmith</small> <small>31m</small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
</p>
</div>
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item">
<span class="icon is-small"><i class="fas fa-reply"></i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fas fa-retweet"></i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fas fa-heart"></i></span>
</a>
</div>
</nav>
</div>
<div class="media-right">
<button class="delete"></button>
</div>
</article>
How can I vertically center the image 128x128.png on the left side?
What I checked already:
Discussion in the Bulma issue queue on how to vertically center elements
SO question about centering columns
I'm generating a barcode using this library and I do need to print the page including the barcode.
When I initiate the print dialog I can't find the barcode although it is taking up space.
$(document).ready(function() {
window.print();
});
#media print {
.barcode-container {
display: block !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="subpage">
<div class="barcode-container">
<div style="font-size:0;position:relative;width:422px;height:30px;">
<div style="background-color:black;width:4px;height:30px;position:absolute;left:0px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:6px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:16px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:22px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:28px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:36px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:44px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:50px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:56px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:66px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:74px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:82px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:88px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:94px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:100px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:110px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:116px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:124px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:132px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:138px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:146px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:154px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:160px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:168px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:176px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:182px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:190px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:198px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:204px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:212px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:220px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:226px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:234px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:242px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:248px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:256px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:264px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:272px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:280px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:286px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:292px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:300px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:308px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:314px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:324px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:330px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:336px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:344px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:352px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:358px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:368px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:374px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:382px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:390px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:396px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:406px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:414px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:418px;top:0px;"> </div>
<div style="background-color:black;width:0px;height:30px;position:absolute;left:422px;top:0px;"> </div>
<div style="background-color:black;width:0px;height:30px;position:absolute;left:422px;top:0px;"> </div>
</div>
</div>
<p class="bold">ID: 60105</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus volutpat lorem a auctor. In lorem nisi, vulputate vel dapibus eu, tristique non lacus. Proin maximus nulla a imperdiet accumsan. Nullam diam tortor, hendrerit a libero vel, placerat
ullamcorper urna. Vivamus consequat placerat lectus, mattis porttitor felis feugiat non. Quisque non elementum est. Quisque semper tincidunt nunc quis condimentum. Morbi tristique ipsum quis velit accumsan tincidunt. Etiam et imperdiet ex, at posuere
enim. Curabitur vitae lacinia libero.</p>
</div>
I tried to do a display: block !important; to the barcode container but it still didn't print it. Any ideas?
Background colours don't print by default. They are set as transparent.
Try:
box-shadow: inset 0 0 0 10000px #000; /*Fake Bg*/
Alternatively the user can set:
Tick 'Print Background Colours and Images' from your browsers 'Page Setup'
You may also use:
-webkit-print-color-adjust: exact;
but this is only supported in Chrome (And other Webkit browsers).
The Chrome css property "-webkit-print-color-adjust: exact;" will make it work appropriately in chrome.
$(document).ready(function() {
window.print();
});
#media print {
.barcode-container>div{
display: block !important;
-webkit-print-color-adjust: exact;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="subpage">
<div class="barcode-container">
<div style="font-size:0;position:relative;width:422px;height:30px;">
<div style="background-color:black;width:4px;height:30px;position:absolute;left:0px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:6px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:16px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:22px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:28px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:36px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:44px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:50px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:56px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:66px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:74px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:82px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:88px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:94px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:100px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:110px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:116px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:124px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:132px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:138px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:146px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:154px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:160px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:168px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:176px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:182px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:190px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:198px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:204px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:212px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:220px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:226px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:234px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:242px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:248px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:256px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:264px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:272px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:280px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:286px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:292px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:300px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:308px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:314px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:324px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:330px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:336px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:344px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:352px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:358px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:368px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:374px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:382px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:390px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:396px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:406px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:414px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:418px;top:0px;"> </div>
<div style="background-color:black;width:0px;height:30px;position:absolute;left:422px;top:0px;"> </div>
<div style="background-color:black;width:0px;height:30px;position:absolute;left:422px;top:0px;"> </div>
</div>
</div>
<p class="bold">ID: 60105</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus volutpat lorem a auctor. In lorem nisi, vulputate vel dapibus eu, tristique non lacus. Proin maximus nulla a imperdiet accumsan. Nullam diam tortor, hendrerit a libero vel, placerat
ullamcorper urna. Vivamus consequat placerat lectus, mattis porttitor felis feugiat non. Quisque non elementum est. Quisque semper tincidunt nunc quis condimentum. Morbi tristique ipsum quis velit accumsan tincidunt. Etiam et imperdiet ex, at posuere
enim. Curabitur vitae lacinia libero.</p>
</div>
You can use -webkit-print-color-adjust: exact; on Chrome and color-adjust: exact; on Firefox
$(document).ready(function() {
window.print();
});
#media print {
.barcode-container {
display: block !important;
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="subpage">
<div class="barcode-container">
<div style="font-size:0;position:relative;width:422px;height:30px;">
<div style="background-color:black;width:4px;height:30px;position:absolute;left:0px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:6px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:16px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:22px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:28px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:36px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:44px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:50px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:56px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:66px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:74px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:82px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:88px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:94px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:100px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:110px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:116px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:124px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:132px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:138px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:146px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:154px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:160px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:168px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:176px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:182px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:190px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:198px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:204px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:212px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:220px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:226px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:234px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:242px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:248px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:256px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:264px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:272px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:280px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:286px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:292px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:300px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:308px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:314px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:324px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:330px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:336px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:344px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:352px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:358px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:368px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:374px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:382px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:390px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:396px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:406px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:414px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:418px;top:0px;"> </div>
<div style="background-color:black;width:0px;height:30px;position:absolute;left:422px;top:0px;"> </div>
<div style="background-color:black;width:0px;height:30px;position:absolute;left:422px;top:0px;"> </div>
</div>
</div>
<p class="bold">ID: 60105</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus volutpat lorem a auctor. In lorem nisi, vulputate vel dapibus eu, tristique non lacus. Proin maximus nulla a imperdiet accumsan. Nullam diam tortor, hendrerit a libero vel, placerat
ullamcorper urna. Vivamus consequat placerat lectus, mattis porttitor felis feugiat non. Quisque non elementum est. Quisque semper tincidunt nunc quis condimentum. Morbi tristique ipsum quis velit accumsan tincidunt. Etiam et imperdiet ex, at posuere
enim. Curabitur vitae lacinia libero.</p>
</div>
Re: Bootstrap 3.3.5 in Wordpress
I have not seen this issue before. All I want to do is align 3 x .col-md-4 .wells inside a row, but they just won't align. The first div is always a bit higher; see screenshot.
This is the code:
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-0 col-lg-4 col-lg-offset-0 text-center">
<a class="page-scroll" href="#how-to"><div class="home-plans well">
<br/>
<h2>1.</h2>
<p class="lead text-left">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.p>
</div> <!-- /well --></a>
</div> <!-- /col-md-4 -->
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-0 col-lg-4 col-lg-offset-0 text-center">
<div class="home-plans well">
<br />
<h2>2.</h2>
<p class="lead text-left">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.p>
</div> <!-- /well -->
</div> <!-- /col-md-4 -->
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-0 col-lg-4 col-lg-offset-0 text-center">
<div class="home-plans well">
<br />
<h2>3.</h2>
<p class="lead text-left">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.</p>
</div> <!-- /well -->
</div> <!-- /col-md-4 -->
</div>
Using f12 tools in explorer, the issue seems to be the below CSS code styling the row:
/*media all*/
.btn-group-vertical > .btn-group::after, .btn-group-vertical > .btn-group::before, .btn-toolbar::after, .btn-toolbar::before, .clearfix::after, .clearfix::before, .container-fluid::after, .container-fluid::before, .container::after, .container::before, .dl-horizontal dd::after, .dl-horizontal dd::before, .form-horizontal .form-group::after, .form-horizontal .form-group::before, .modal-footer::after, .modal-footer::before, .nav::after, .nav::before, .navbar-collapse::after, .navbar-collapse::before, .navbar-header::after, .navbar-header::before, .navbar::after, .navbar::before, .pager::after, .pager::before, .panel-body::after, .panel-body::before, .row::after, .row::before {
display: table;
content: " ";
}
This page is in Wordpress. I have tried the same code in a normal HTML page and the .well .col-md-4s align OK.
To get the cols to align I can just remove the row, but I want to use rows.
This has been killing me for nearly one day now. I have done loads of research and tried using clearfix and clear: both all over without joy. Can anyone shed some light on this please?
Edit: I also note that the two rows in the footer section are causing the page footer to have a scroll bar? So, I have had to remove those rows too. It seems that I can't use rows in Wordpress with Bootstrap anymore for some reason.
Hmm, it's really tricky to say without seeing more of the CSS but have you tried reformatting your first div as follows:
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-0 col-lg-4 col-lg-offset-0 text-center">
<div class="home-plans well">
<a class="page-scroll" href="#how-to">
<br/>
<h2>1.</h2>
<p class="lead text-left">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.p>
</a>
</div> <!-- /well -->
</div> <!-- /col-md-4 -->
Then styling the inner anchor element as follows:
CSS:
.well > a {
display: block;
}
I'd guess that it's something to do with the anchor element wrapping around the .well div?
I am using a CSS Slider that utilises two sub tabs in each slide.
The slider's sub tabs use Bootstrap's 'Active' Class on the li that then changes the inactive li's class to active when the inactive tab's navigation arrow (< or >) is clicked.
The sub tabs work correctly on the first slide but do not work on the second slide, or any slide thereafter.
My JS Fiddle
JS Fiddle
The Problematic Code
<div class="profile-thumbnail">
<div class="profile-image">
<div class="overlay-profile"></div>
</div>
<!-- Sub Tabs -->
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a class="hvr-border-fade" href="#tab1" data-toggle="tab"><</a></li>
<li><a class="hvr-border-fade" href="#tab2" data-toggle="tab">></a></li>
</ul>
</div>
<!-- END Player Profile Thumbnail-->
Refer to the below link (the MEET THE TEAM section) for a more accurate idea as the pasted code doesn't seem work as well.
Your tab's href's location need to be unique. Right now you are repeating the same href="tab1", href="tab2" for each slider. You can change it to:
href="tab1-a", href="tab2-a" for gallery 1.
href="tab1-b", href="tab2-b" for gallery 2.
Also, make sure you follow the same process for the id's. I cannot paste full code here due to character limits.
See JsFiddle
<!------------ Sean Peens ------------>
<article>
<!-- Player Profile Thumbnail-->
<div class="profile-thumbnail">
<div class="profile-image">
<div class="overlay-profile"></div>
</div>
<!-- Sub Tabs -->
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<a class="hvr-border-fade" href="#tab1-a" data-toggle="tab"><</a>
</li>
<li><a class="hvr-border-fade" href="#tab2-a" data-toggle="tab">></a>
</li>
</ul>
</div>
<!-- END Player Profile Thumbnail-->
<!-- Start Player's Profile -->
<div class="player-profile">
<!-- First Tab -->
<div class="tab-pane fade in active" id="tab1-a">
<div class="player-profile-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.
Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.
</div>
</div>
<!-- Second Tab -->
<div class="tab-pane fade in" id="tab2-a">
<div class="gun-profile">
<img src="http://roxyprinsloo.co.za/tst/_include/img/profile-guns/richard-gun.png">
</div>
<div class="gun-profile-text"><span class="gun-title">KWA SR5</span>
<br>NC STAR Red Dot
<br>Underslung Grenade Launcher
<br>Extended Barrel
<br>Mock Suppressor
</div>
</div>
</div>
<!-- END Start Player's Profile -->
<!-- Start Player's Title -->
<div class="player-details">
<h3>Sean Peens</h3>
<ul>
<li><span class="aka">AKA 'SNOWMAN'</span>
<br>Team Captain
</li>
</ul>
</div>
<!-- END Start Player's Title -->
</article>
<!------------ END Sean Peens ------------>
<!------------ Richard Bradley ------------>
<article>
<!-- Player Profile Thumbnail-->
<div class="profile-thumbnail">
<div class="profile-image">
<div class="overlay-profile"></div>
<!-- Thumb Image -->
<img src="http://roxyprinsloo.co.za/tst/_include/img/work/thumbs/image-01.jpg">
</div>
<!-- Sub Tabs -->
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<a class="hvr-border-fade" href="#tab1-b" data-toggle="tab"><</a>
</li>
<li><a class="hvr-border-fade" href="#tab2-b" data-toggle="tab">></a>
</li>
</ul>
</div>
<!-- END Player Profile Thumbnail-->
<!-- Start Player's Profile -->
<div class="player-profile">
<!-- First Tab -->
<div class="tab-pane fade in active" id="tab1-b">
<div class="player-profile-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.
Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.
</div>
</div>
<!-- Second Tab -->
<div class="tab-pane fade in" id="tab2-b">
<div class="gun-profile">
<img src="http://roxyprinsloo.co.za/tst/_include/img/profile-guns/richard-gun.png">
</div>
<div class="gun-profile-text"><span class="gun-title">KWA SR10</span>
<br>NC STAR Red Dot
<br>PEQ Box
<br>Magpul Furniture
<br>Noveske KX3 Flash Enhancer
</div>
</div>
</div>
<!-- END Start Player's Profile -->
<!-- Start Player's Title -->
<div class="player-details">
<h3>Richard Bradley</h3>
<ul>
<li><span class="aka">AKA 'DEADLEE'</span>
<br>Team Co-Captain
</li>
</ul>
</div>
<!-- END Start Player's Title -->
</article>
I am fairly new with bootstrap, however I am trying to create a basic website. I have the below code in my index:
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="http://getbootstrap.com/assets/ico/favicon.png">
<title>BoonRadio: Playing the latest hits for you!</title>
<!-- Bootstrap core CSS -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="../bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="http://../bootstrap/css/theme.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
<style type="text/css"></style><style id="holderjs-style" type="text/css">.holderjs-fluid {font-size:16px;font-weight:bold;text-align:center;font-family:sans-serif;margin:0}</style><style type="text/css"></style></head>
<script type="text/javascript">
var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""
function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
</script>
<body style="">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">BoonRadio</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Our DJ's</li>
<li>Apply for DJ</li>
<li>Timetable</li>
<li>About</li>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign In</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<img src="../img/banner.png" />
<div class="page-header"></div>
<div class="row">
<div class="col-sm-8" style="float: left;">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis tincidunt nunc eu iaculis. Curabitur aliquam, purus volutpat tincidunt fermentum, augue erat
scelerisque dui, at aliquet leo lectus quis dui. Nulla congue elit in lacus porttitor, ultricies ultrices ligula porttitor. Praesent faucibus ullamcorper ligula ut
cursus. Vivamus condimentum augue vel dapibus feugiat. Proin vulputate massa at tortor iaculis, in sodales nulla suscipit. Pellentesque commodo venenatis mauris,
vitae feugiat tortor cursus non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc quam nisi, semper non tortor vel, tincidunt eleifend dui.
Curabitur pellentesque, nulla eu blandit condimentum, augue ante posuere nunc, at laoreet velit est ac ipsum. Vivamus neque elit, pellentesque eu justo a,
iaculis lacinia leo. Sed pulvinar dapibus diam et vulputate. In porta sem id lorem vestibulum pulvinar. Suspendisse luctus lorem sit amet condimentum volutpat.
Nullam id pharetra tortor.
<br /><br />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4" style="float: right;">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Radio Statistics</h3>
</div>
<div class="panel-body">
Statics code here.
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Quick Requests</h3>
</div>
<div class="panel-body">
Request line code here.
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Facebook</h3>
</div>
<div class="panel-body">
Facebook code here.
</div>
</div>
</div><!-- /.col-sm-4 -->
</div>
<!-- <script type="text/javascript">
ajaxpage('#', 'contentarea')
</script>
<div id="contentarea"></div> -->
<div class="page-header"></div>
<div class="footer">© BoonRadio 2013</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../bootstrap/js/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../bootstrap/js/holder.js"></script>
</body></html>
Don't mind the hidden ajax code. Anyways, my divs are doing this:
http://i.imgur.com/HdjKFfS.png
The more I add in the main content box, the further down the 3 divs on the right go down. I am wanting them to stay in place so when I add more content, they don't move down. Even adding margin-top to the col-sm-4 div, they still move down.
http://i.imgur.com/aSs1GqP.png
It might be simple and I'm just not thinking properly, but would someone assist me?
You're misunderstanding how Bootstrap's grid system works. Get rid of the float styles on your column divs and it should work; Bootstrap already provides the correct float styles as part of the grid system. Also you have a stray </li> in your nav header. Also, get your indenting sorted out, it's super inconsistent right now, which makes it harder to read and harder to figure out.
I corrected your indenting. There were some closing </div> tags that were unnecessary. As Nathan said, the floating css is not needed with Bootstrap.
<div class="container">
<img src="../img/banner.png" />
<div class="page-header"></div>
<div class="row">
<div class="col-sm-8">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Lorem ipsum ...
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Radio Statistics</h3>
</div>
<div class="panel-body">
Statics code here.
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Quick Requests</h3>
</div>
<div class="panel-body">
Request line code here.
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Facebook</h3>
</div>
<div class="panel-body">
Facebook code here.
</div>
</div>
</div><!-- /.col-sm-4 -->
</div>
<!-- <script type="text/javascript">
ajaxpage('#', 'contentarea')
</script>
<div id="contentarea"></div> -->
<div class="page-header"></div>
<div class="footer">© BoonRadio 2013</div>
</div>