#page {
margin: 20pt;
}
#page :first {
margin-top: 0pt;
}
My first #page selector works fine at setting all page margins to 20pt. But the #page :first selector which should set the top margin to 0 on the first page only has absolutely no effect.
This looks like a bug introduced in Dompdf 0.8.3. You can fall back to 0.8.2 or (when it's available) upgrade to the next release.
If you don't want to fall back to an earlier release you can grab a nightly download. There's a link in the Dompdf project README.
Related
I'd like to have my website including v-app-bar and everything limited to max-width 1440px on larger screen, and add a thin bolder to both left and right edges. For the rest of the area outside of the edge, I'd like to add a nice background color or image.
What's the better way to accomplish this idea? I am using Vuetify v2.1.5. Thanks.
You can do this with plain 'ol CSS
#page {
background: url(niceimage.jpg);
width: 100vw;
min-height: 100vh;
}
#app {
max-width:1440px;
margin: 0 auto;
}
where #app is your application div, and #page is an element that wraps it;
I created a classic report in oracle apex 5.0 which has a few product info (colour, szie, price etc.) as well as a Barcode column. To display the barcode column in a specific barcode font, I uploaded a piece of jquery code as plugin and managed to get the barcode displayed correctly like below
But when it comes to printing, the print function that comes with APEX doesn't work, because it only prints out the original barcode value (6208217iFiEiGi1i) which is returned by the sql. As a workaround, I created a button that calls a javascript which does window.print(), and used some CSS to get rid of the header and the sidebar of the web page, and managed to only print the main content of the web page which is the report.
The way I did is, I have the below CSS code in the html header of my page
<style media="print" type="text/css">
#media print
{
body * { visibility: hidden; }
#print-content * { visibility: visible; }
#print-content { position: relative; top: 0; left: 0; width:100%; padding:0; }
}
</style>
and the below in the region header and footer section I want to print
<div id="print-content" >
</div>
However, this approach left me with another issue. Sometimes the row gets cut off at the end of the page, that makes it look like below
Can anyone give me some suggestions on how I get around with this issue?
Thanks a lot
Try using this CSS - I'm not sure what you should apply it to, perhaps table rows in general:
#media print {
tr {page-break-inside: avoid;}
}
Possibly a more specific selector would be preferable like div#myreport tr.
It says clearly on the documentation
just add data-spy="scroll" to the element you want to spy on (most typically this would be the body)
But it seems I can only get it to work if I put it on the body. When I put it in any other element that I wish to spy on, the last element of the nav gets selected.
Here it's on the body, and it works, and this is the same exact thing but with data-spy="scroll" on the element I want to spy on, and it fails (only the last element gets activated).
Am I doing something wrong or is this a bug ?
Your 2nd example can be fixed by using:
#TryToPutDataSpyHere{
display:inline;
}
But for some reason it doesn't works on the demo
I managed to reproduce your issue from the doc: http://jsfiddle.net/baptme/KbphR/
But it only works if I had the following css code (used on the doc):
.scrollspy-example {
height: 200px;
overflow: auto;
position: relative;
}
http://jsfiddle.net/baptme/KbphR/1/
It seems like height: 200px; and overflow: auto; are both necessary
Not in you case maybe because of your .box{height: 500px;}
I had a similar issue where scroll spy would not work on anything but a tag so I actually went into the bootstrap js found the Scroll spy (SCROLLSPY CLASS DEFINITION) section and changed this line:
, $element = $(element).is('body') ? $(window) : $(element)
to this:
, $element = $(element).is('body') ? $(window) : $(window) //$(element)
(note that the element after the // is a comment so I don't forget I changed it)
And that fixed it for me.
I am working on a Rails 3.1 Application, and it contains a third party JS Calendar Picker (jsDatePick). jsDatePick has a whole stack of images that are in images/calendar/img/.
Running rake assets:precompile precompiles them all, but the library still looks for the images in images/calendar/img (not assets/calendar/img). I could change the directory to assets/calendar/img, but it doesn't append the fingerprint hash.
Thoughts on how to resolve an issue like this?
Here is a sample of some of the CSS that goes along with this JS lib:
.JsDatePickBox .boxLeftWall .leftTopCorner{ margin:0; padding:0; width:7px; height:8px; background:url(/assets/calendar/img/boxTopLeftCorner.png) left top no-repeat; overflow:hidden; }
.JsDatePickBox .boxLeftWall .leftBottomCorner{ margin:0; padding:0; width:7px; height:8px; background:url(/assets/calendar/img/boxBottomLeftCorner.png) left top no-repeat; overflow:hidden; }
.JsDatePickBox .boxLeftWall .leftWall{ margin:0; padding:0; width:7px; background:url(/assets/calendar/img/boxSideWallPx.gif) #ffffff left top repeat-y; overflow:hidden; }
While I definitely see a problem here (asset tags should be used, as these images don't exist in the asset folder without the fingerprint hash), some of the images I am specifically looking for are not in any CSS file in the application. I'm looking now to determine where they are being called.
It looks like the other images are applied via the javascript. Here is an example:
if (parseInt(aDayDiv.getAttribute("isToday")) == 1){
this.setC(aDayDiv, "dayDownToday");
aDayDiv.style.background = "url(" + this.oConfiguration.imgPath + this.oConfiguration.cellColorScheme + "_dayDown.gif) left top no-repeat";
} else {
this.setC(aDayDiv, "dayDown");
aDayDiv.style.background = "url(" + this.oConfiguration.imgPath + this.oConfiguration.cellColorScheme + "_dayDown.gif) left top no-repeat";
}
The oConfiguration.imgPath is defined as such:
g_jsDatePickImagePath = "/assets/calendar/img/";
this.oConfiguration.imgPath = (g_jsDatePickImagePath.length != null) ? g_jsDatePickImagePath : "/images/calendar/img/";
Thank you for your help.
The answer is to upgrade to Rails 3.1.1+ (I upgraded to rails 3.1.2) and the issue is resolved by Rails running rake assets:precompile:nondigest which results in nondigested versions of assets.
I'm using jquery cycle plugin by malsup for a slide show that includes text. I want sifr to replace the text. It does so on the first slide, but not the subsequent ones. Any idea what might be done so that sifr is applied to the text on each slide as it is displayed?
Here's my sample page (I've made the sfir text blue and green so I know immediately it it works--it does work in FF 3.6, but not Safari 5.0.3 or Chrome 8 on my Mac...
http://ianmartinphotography.com/test-site/testimonials/index-07.html
Thanks!
Okay--so I just added in a second call sIFR.replace code--this time with a very brief delay so that the nest paragraph loads and then sIFR.replace is called. Here's the jquery code:
$('#next').click(
function() {
to = setTimeout(function ()
{sIFR.replace(helvetica,
{selector: 'p',
css: '.sIFR-root { background-color: #e6e6e6; color: #0000FF; font-size: 13px; text-align: justify; text-indent: 30px; }'}); },
100); // call sIFR code after this many milliseconds
}); });