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>
Related
I can't colorize the Font Awesome 5 icons using these codes. I tried fill css property for setting color but it didn't work.
HTML Code:
<div class="container mt200 icons">
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="fas fa-microphone fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
</div>
</div>
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="far fa-edit fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
</div>
</div>
</div>
</div>
CSS Code:
.icons i {
color: #2759AE;
}
Font Awesome 5 uses svg for icons and path inside are set with fill:currentColor so simply change color of svg:
.icons svg {
color:#2759AE;
}
<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
<div class="container mt200 icons">
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="fas fa-microphone fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
</div>
</div>
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="far fa-edit fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
</div>
</div>
</div>
</div>
As you can see in the code, the i are replaced with svg when you load the JS version:
You can apply color to i in case you are using the CSS version.
.icons i {
color:#2759AE;
}
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"><div class="container mt200 icons">
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="fas fa-microphone fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
</div>
</div>
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="far fa-edit fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
</div>
</div>
</div>
</div>
So to make sure it will work in all the cases simply use both selector:
.icons i,
.icons svg {
color: #2759AE;
}
If you're using the svg-with-js version of Font Awesome 5 it takes everything in the <i></i> and preprocesses it into an <svg>. It specifies that the path has fill="currentColor" So, you have to set currentColor to the colour you want somehow. One option is:
svg {color: blue;}
The official docs recommend inline style:
<i class="far fa-edit fa-5x" style="color:blue"></i>
Or, set currentColor in one of the outer elements. For example:
<div class="bggray2 text-center" style="color: blue;">
<i class="far fa-edit fa-5x"></i>
</div>
And to move it to the CSS file, you could:
div .bggray2 {
color: blue;
}
If you are using Bootstrap 4 you can use and of the text-'color' settings in the parent of the tag.
<div class="bggray2 text-danger">
<i class="far fa-edit fa-5x"></i>
</div>
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..
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 have a section of a website that has 2 rows inside a container, both rows have 3 columns of class col-sm-4 and col-md-4. Both rows have 1 image in each column. All images are exactly the same size at 300px wide. The top row displays accurately, the bottom row condenses the 3 columns and leave a big area of wide space on the right side. When using the inspector, The top row columns are appearing as class col-md-4, but the buttom row columns are showing as col-sm-4. I'm not sure if this is whats causing it. I should mention also that the top row columns have paragraphs below each image. When adding the exact same paragraph content to the bottom row in just 1 column, the issue is resolved, but I don't want paragraphs here. I checked out the bootstrap CSS and my own to try and find some sore of style on <p> that could be causing this but couldn't find anything. Each row, and column have the exact same CSS. The code is below:
HTML:
<div class="wrapper">
<div class="row customer-options">
<div class="button-container">
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="images/button-icon-map2.png" alt="">
<h2>Title 1</h2>
<p>These marketing boxes are a great place to put some information. These can contain summaries of what the company does, promotional information, or anything else that is relevant to the company. These will usually be below-the-fold.</p>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="images/button-icon-pref2.png" alt="">
<h2>Title 2</h2>
<p>The images are set to be circular and responsive. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="images/button-icon-add2.png" alt="">
<h2>Title 3</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
</div>
</div>
</div><!-- /.row -->
</div><!--wrapper-->
<hr>
<div class="wrapper">
<div class="row tap">
<div class="tap-container">
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="images/beer-tap.png" alt="">
<h2>About</h2>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="images/beer-tap.png" alt="">
<h2>Services</h2>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="images/beer-tap.png" alt="">
<h2>Contact</h2>
</div>
</div>
</div><!-- /.row -->
</div><!--wrapper-->
CSS:
.wrapper {
display: table;
}
.button-container {
padding-right: 15px;
padding-left: 15px;
}
.customer-options {
background-color: #848487;
padding-top: 20px;
height:100vh;
display: table-cell;
vertical-align: middle;
}
.tap {
background-color: #848487;
padding-top: 20px;
height:100vh;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.tap-container {
padding-right: 15px;
padding-left: 15px;
}
.customer-options h2 {
text-align: center;
}
The display table and table-cell are taking precedence over the responsive image. Tables fit their content then the img-responsive will fill the new width. You can probably find a work around to achieve vertical alignment but I recommend dropping the table system and properly use bootstrap's grid system. Then you can use flexboxes to get vertical alignment.
http://jsfiddle.net/28qq8fm3/
<style>
.customer-options {
background-color: #848487;
padding-top: 20px;
vertical-align: middle;
}
.tap {
background-color: #848487;
padding-top: 20px;
vertical-align: middle;
text-align: center;
}
.customer-options h2 {
text-align: center;
}
</style>
<div>
<div class="row customer-options">
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="https://beccasheppard.files.wordpress.com/2011/09/football.jpg" alt="">
<h2>Title 1</h2>
<p>These marketing boxes are a great place to put some information. These can contain summaries of what the company does, promotional information, or anything else that is relevant to the company. These will usually be below-the-fold.</p>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="https://beccasheppard.files.wordpress.com/2011/09/football.jpg" alt="">
<h2>Title 2</h2>
<p>The images are set to be circular and responsive. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="https://beccasheppard.files.wordpress.com/2011/09/football.jpg" alt="">
<h2>Title 3</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
</div>
</div>
<!-- /.row -->
</div>
<!--wrapper-->
<hr>
<div>
<div class="row tap">
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="http://www.cozadschools.net/wp-content/uploads/2015/02/football.png" alt="">
<h2>About</h2>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="http://www.cozadschools.net/wp-content/uploads/2015/02/football.png" alt="">
<h2>Services</h2>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="http://www.cozadschools.net/wp-content/uploads/2015/02/football.png" alt="">
<h2>Contact</h2>
</div>
</div>
<!-- /.row -->
</div>
<!--wrapper-->
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>