iText: HTML to PDF conversion, css issue - pdf

I am using the following css and expecting a drop shadow around the divs in the pdf. However, it doesn't appear in the generated pdf using itext. It does show up when the html is viewed in the browser (chrome)
.dropShadow {
-moz-box-shadow:5px 5px #000;
-webkit-box-shadow:5px 5px #000;
box-shadow:5px 5px #000;
}
.dropShadow table {
background-color: #fff;
width: 100%;
border-spacing:15px;
border: 1px solid #000;
}
.dropShadow tr, .dropShadow td {
padding:2px;
}
any ideas why this could occur?

Related

styling npm vuejs-paginate component

I am using the npm package https://www.npmjs.com/package/vuejs-paginate
to handle pagination in a vuejs application.
I would like to style this pagination component.
My styling successfully sets the background of page number buttons yellow when the user hovers over them, but fails to set the background of the current page to green. Why?
Here is my component tag with the props.
<paginate
:pageCount="totalPages"
:click-handler="paginateCallback"
:prevText="'Prev'"
:nextText="'Next'"
:containerClass="'pagination'"
class="pagination"
v-model="pageNumber"
></paginate>
And here is the css...
.pagination a {
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
background-color: white;
}
.pagination a.active {
background-color: green;
}
.pagination a:hover:not(.active) {background-color: yellow;}
.pagination a:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.pagination a:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
By the way, in case it is relevant information, the application uses bootstrap-vue elsewhere.
Thanks to the first answer below, I was able to resolve this.
Here is the working css after adding the active-class prop to the component...
.pagination li {
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
color: white;
background-color: white;
font-size: 1em;
}
.pagination li.pagination-active {
background-color: green;
}
.pagination li:hover:not(.active) {background-color: yellow;}
Now, however, there is a border around the number of the active page button until the user clicks again anywhere on the page. How can we eliminate this border?
As the documentations says: there is an active class prop that you can set and style that class. see the props in the link above.
<paginate
:pageCount="totalPages"
:click-handler="paginateCallback"
:prevText="'Prev'"
:nextText="'Next'"
:active-class="myActiveBtn"
:containerClass="'pagination'"
class="pagination"
v-model="pageNumber"
></paginate>
style:
.myActiveBtn{
background-color: green;
}

MVC4 image upload and preview

Here's my code: css:
I keep on receiving an error message. It shows
"missing a property name before colon(:)in the "(property)":"(value)"declaration"
I'm not sure what I'm doing wrong could any one help me with this?
body {.thumb { height: 75px; border: 1px solid #000; margin: 10px 5px 0 0; } }
Try to remove the brackets:
.thumb { height: 75px; border: 1px solid #000; margin: 10px 5px 0 0; }
Then apply the class "thumb" on relevant elements.

SCSS rule Inheritance compared to LESS

I'm used to using LESS but im currently working with SCSS.
In Less I could do the following:
.sidebar_styles { background: red; border: 1px solid blue; }
aside[role="complementary"] { .sidebar_styles; }
Would the SCSS equivalent be:
.sidebar_styles { background: red; border: 1px solid blue; }
aside[role="complementary"] { #extend .sidebar_styles; }
I ask as I am using the Foundation framework and I'm trying to not use presentation classes in the html. I noticed Chrome was running slowly and opened up the inspector. The matched css rules for some elements is huge.
Below is about 5% of what I could copy from one of the elements before Chrome hangs.
.row.collapse .column, body.full_width div[role="main"] form .row.collapse .column, body.two_columns div[role="main"] form .row.collapse .column, body.homepage div[role="main"] .hero_container form .row.collapse .column, .row form .collapse.top_bar .column, .top_bar form .collapse.top_bar .column, header[role="banner"] form .collapse.top_bar .column, footer[role="contentinfo"] form .collapse.top_bar .column, body.full_width div[role="main"] form .collapse.top_bar .column, body.two_columns div[role="main"]
#extend will group the css selectors together in comma separated list. If you add additional rules after the #extend, it will keep those rules as it's own selector.
scss
.sidebar_styles {
background: red;
border: 1px solid blue;
}
aside[role="complementary"] {
#extend .sidebar_styles;
color: black;
}
css output
.sidebar_styles, aside[role="complementary"] {
background: red;
border: 1px solid blue;
}
aside[role="complementary"] {
color: black;
}
If you want to keep the rules separated then you can use a mixin and include it in the rules.
scss
#mixin test {
background: red;
border: 1px solid blue;
}
.sidebar_styles {
#include test;
}
aside[role="complementary"] {
#include test;
}
css output
.sidebar_styles {
background: red;
border: 1px solid blue;
}
aside[role="complementary"] {
background: red;
border: 1px solid blue;
}

CSS box-shadow on divs over image/video background impossible?

I'm having a superbgimage/jw player background on my website in progress. When I apply a CSS box-shadow on the content divs above the background, the shadow does not mix (does not darken) with the background. It looks like a grey halo. Do box-shadows only work on white backgrounds?
Halo instead of shadow mixing with background image (darkening it)
CSS for superbgimage background and jQuery Isotope plugin divs
#background {
background: inherit;
}
#superbgimage {
display: none;
}
.item {
margin-bottom: 4px;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
Divs for background
<fieldset id="background">
...
</fieldset>
<div id="superbgimage"></div>
Script for background
<script type="text/javascript">
$(document).ready(function () {
$.fn.superbgimage.options = {
preload: 1,
randomtransition: 0,
slideshow: 1,
slide_interval: 9000,
randomimage: 1,
speed: 3000,
transition: 1
};
$('#background').superbgimage().hide();
});
</script>
Make sure you are using a cross-browser solution like this:
.shadow {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}
Use RGBA colors instead of HEX. RGBA will allow you to set an opacity for the color allowing the background to bleed through.
Example:
rgba(0,0,255,0.5)
On a side note, try using an online generator for CSS3 elements like box-shadow, it will take the guess work out of creating these more complex elements:
http://css3generator.com/

How can one fix a CSS3 graident background when using a box for content?

I'm designing my first page using CSS3, and I'm running into a snag. I used this question and answer to create a neat looking background for the body of my site. This worked fine until I added a content class. This caused the CSS gradient to not quite reach the end of the page (scroll down to see the effect). Here is my CSS:
html{
height: 100%
}
body {
background: #c5deea; /* old browsers */
background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* ie */
height: 100%;
margin: 0;
background-repeat: no-repeat;
}
#content{
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
background: white;
margin-left: auto;
margin-right: auto;
padding: .5%;
margin-top: 2%;
margin-bottom: 2%;
width: 50%;
}
h1, h2, h3 {
color: #066dab;
}
Can anyone tell me what has gone wrong, and how to fix it? I should note that I am very new to CSS, let alone CSS3; so, any insights are appreciated
Do it like this instead:
Live Demo
I neatened the way you were setting height: 100%.
I took the margin off #content.
To compensate for the lost margin, I added an extra wrapper element and gave it padding: 2%.