I am getting a layout error when printing my page in Chrome (and only Chrome). Notice, that I am already using a #media-print-stylesheet and the emulation in the Developer Tools works correctly.
The markup is basically a Bootstrap Carousel. The issue is that the image+caption (i.e. item of the carousel) are positioned below where they should be. The bar on top of the image is one of two div’s (.obscure-top/.obscure-bottom) to obscure/mask parts of the image. They are in their correct position.
<article>
<header>…</header>
<div id="locations-carousel-wrapper" class="box">
<div id="locations-carousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="obscure-top"></div>
<div class="carousel-inner" role="listbox">
<div class="item active">
<a class="modelLink" href="…">
<img src="…" alt=""/>
<div class="carousel-caption"></div>
</a>
</div>
</div>
<div class="obscure-bottom"></div>
<a class="left carousel-control" … />
<a class="right carousel-control" …/>
</div>
</div>
<div class="box box-footer"></div>
For the #media-print-stylesheet the box is absolutely positioned:
#locations-carousel-box {
position: absolute;
min-width: 260px;
right: 15px;
top: -280px;
}
to get it up there. Everything else is like on the “regular” page and it works in other browsers as well as the 'print emulation'. The issue is only introduced when I actually want to print the page. Any ideas what could be the cause of this? Or any way how to debug this?
The issue is gone.
Since I can’t reproduce it anymore I assume that a Chrome update fixed this issue (possibly pdfium-related).
Related
I seem to have an issue with one of my pages I'm trying to layout. I implemented FullCalendar and added it to one of my pages/views, I'm now noticing that my header dropdown when it overlays on top of where the calendar begins -- the dropdown isn't opaque/forced overtop of the underlaying content like how it is on all other pages. Attached is the example of what is happening.
Any ideas? If I should be posting my CSS let me know. It's the default for FullCalendar & Bootstrap with no modifications.
Here is the view HTML/classes applied to the content it's not drawing 'over/on top of':
#section('content')
#include('layouts.headers.cards')
<div class="container-fluid mt--7">
<div class="row">
<div class="col">
<div class="card shadow">
<div class="card-header border-0">
<div class="col-14">
<div id='calendar'></div>
</div>
</div>
</div>
</div>
</div>
#include('layouts.footers.auth')
</div>
#endsection
#calendar{
z-index: 999999;
position: relative;
}
<< That should fix it!
Read: https://www.w3schools.com/cssref/pr_pos_z-index.asp
I have two sections both 100vh in height.
<section id="sectionTwo" class="section">
<div class="container d-flex flex-column justify-content-between mh100vh">
<div class="row">
<div id="box">
</div>
</div>
<div class="row d-flex align-items-end">
<div class="col-md-8 offset-4">
<img class="btmImg" src="http://www.atfund.gatech.edu/sites/default/files/images/verticalplaceholderimage-440x680.png" alt="" />
<img id="downImage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Circle-icons-arrow-down.svg/2000px-Circle-icons-arrow-down.svg.png" class="img-fluid btnImage">
</div>
</div>
</div>
</section>
<section id="sectionThree" class="section">
<div class="container d-flex flex-column justify-content-between mh100vh">
</div>
</section>
The first section has a couple of images on it, one of which needed to slide up and appear. The issue I was facing was that when it was sliding up, it was on top of the second section, instead of sliding up from behind it. As such, I gave each section a z-index
#sectionTwo {
position: relative;
z-index: 10;
}
#sectionThree {
position: relative;
z-index:20;
background: #ccc;
}
Now this has fixed the problem. I am no however faced with another issue. The first section has an arrow image that needs to partly sit on top of the second section. Because of the z-index, I cant make this happen, even if I give an index higher that the second section.
This JSFiddle demonstrates my problem. Is there any way to make the circle arrow image sit on top of the second section, whilst keeping the z-indexes on the sections how I have them so the other image can slide up behind?
Thanks
How to make sidebar always visible in the Semantic UI?
Simply adding the "active" css class works, but messes up page layout.
There is a working example on jsFiddle.
This has been officially fixed.
<div class="ui vertical inverted left visible sidebar menu">
<a class="item">
<i class="home icon"></i>
Home
</a>
<a class="item">
<i class="block layout icon"></i>
Topics
</a>
</div>
<div class="pusher">This is some content.</div>
This issue is officially fixed since 2015 so the definite answer can be found below.
Just for reference… in 2014 I had to do following things to make this work:
add active css class to the sidebar
add html code:
<div class="segment">
<div class="container" style="margin:1.5em 1.5em 1.5em 325px">
<!-- content here -->
</div>
</div>
Currently i have this setup on a page, there are three buttons in a button group acting as tab toggle buttons and below them is a bootsrap well having tab pages. Is there a way to have the button group become part of the well, so it sits in the center of the top edge of the well?
I have tried code from here: Bootstrap - Adding legend to well but didnt work.
Here is img of current setup
Code is simple
<div style="text-align:center">
<div id="tab" class="btn-group" data-toggle="buttons-radio">
<a style="padding:9px;font-size:16px" href="#tdel" class="btn active" data-toggle="tab">Delegations</a>
<a style="padding:9px;font-size:16px" href="#tind" class="btn " data-toggle="tab">Individuals</a>
<a style="padding:9px;font-size:16px" href="#tobs" class="btn " data-toggle="tab">Observers</a>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane" id="tind">
</div>
<div class="tab-pane" id="tobs">
</div>
<div class="tab-pane" id="tdel">
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/mikeyfreake/CbNfa/2/
Place the buttonset div inside the well div.
Fiddle for reference.
You can also margin-top: -15px; in your CSS sheet to further move it up to sit in the center top part of the well. Hope this helps!
I have implemented the carousel on my webpage as follows
<div class="container-fluid">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="/public/images/Lighthouse.jpg">
</div>
<div class="item">
<img src="/public/images/Lighthouse.jpg">
</div>
<div class="item">
<img src="/public/images/Lighthouse.jpg">
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div><!--End of Carousel-->
I would like it to remain responsive, which at present it is, the picture adjusts as the screen gets smaller. However the carousel fills the whole page (Width) and I would like to make it smaller and have it sit in the center of the page. I have given a width for .carousel but this seems to effect the responsiveness.
Does anyone know how to customize this plugin or have done this in the past
Any help appreciated
Thanks
media Query solves this issue as I had given the carousel a width
#media (max-width:600px) {
.carousel {
width: 100%;
}
}
where and how to add this #media (max-width:600px) {
.carousel {
width: 100%;
}
} instruction