I've got an online submit to email form, but some people may want to just print the page. I used the #media print query with CSS and when I tried to print the page my printer printed a couple lines and then stopped. It said "unable to send data to printer". Should I try something else entirely or is there a way to make this work? There is JavaScript validation but the page prints okay if I don't try to adjust the styles, so I don't think that's a factor. Without any adjustments it takes two pages to print and doesn't look fantastic.
This is my CSS:
#media print {
.online {
display: none;
}
.print {
display: block;
}
.container {
min-height: 0px;
}
.content {
min-height: 0px;
border: none;
margin-bottom: 0px;
-webkit-box-shadow: none;
box-shadow: none;
}
nav {
display: none;
}
.dance h3 {
color: black;
font-size: 18px;
}
.contact {
padding: 20px 0 10px;
border-top: 1px solid black;
border-bottom: none;
margin-bottom: 0px;
}
.item-bid {
margin-bottom: 30px;
}
fieldset {
font-size: 12px;
border: 1px solid black;
}
label {
font-size: 12px;
}
input, textarea {
display: none;
}
form p {
font-size: 12px;
}
.description {
padding-bottom: 100px;
}
}
If you're using Chrome you might want to output a PDF via the printing dialog box, and see if there any noticeable errors.
Related
How do I open the checkbox below the button instead of above the button? I tried everything but nothing works. I edit in wordpress wooocommerce at custom css. if someone could help me that would be great.
.yith-wapo-block {
display: none; /* make the block invisible by default */
}
#media only screen and (min-width: 992px) {
#custom_button {
background-color: #d26e4b;
color: white;
font-weight: bold;
margin-left: 107px;
margin-top: -40px;
margin-right: 1px;
width: 208.5px;
}
}
#media only screen and (max-width: 991px) {
#custom_button {
background-color: #d26e4b;
color: white;
font-weight: bold;
margin-left: 99px;
margin-top: -40px;
margin-right: 1px;
width: 208.5px;
}
}
#custom_button:active + .yith-wapo-block, #custom_button:focus + .yith-wapo-block {
display: block;
}
I tried that but it did not work
#custom_button {
background-color: #d26e4b;
color: white;
font-weight: bold;
width: 208.5px;
position: fixed;
top: 0;
}
I tried that but it did not work
.yith-wapo-block {
display: none; /* make the block invisible by default */
}
#custom_button:active + .yith-wapo-block, #custom_button:focus + .yith-wapo-block {
display: block;
margin-top: 20px;
}
How do I open the checkbox below the button instead of above the button? I tried everything but nothing works. I edit in wordpress wooocommerce at custom css. if someone could help me that would be great.
I'm trying to merge the style into one class but its showing an error. Look at the example below.
%banner-style{
banner {
padding: 140px 0 210px;
background: url(https://im2.ezgif.com/tmp/ezgif-2-92c6382d82ba.jpg) top center/cover no-repeat;
&.row {
margin: 0;
}
.main-heading {
font-size: 40px;
letter-spacing: -1px;
font-weight: 600;
padding-right: 20px;
sup {
font-size: 10px;
vertical-align: super;
}
}
}
}
And I want it to merge with the parent class .parent
.parent{
color: red;
&_#extend %banner-style;
}
using & to merge into one class name. but showing error unless i do this
.parent{
color: red;
&_{#extend %banner-style};
}
Which is same as if I remove &_.
I wanted .parent_banner {...} but instead got .parent_ banner{...};
Does anyone know how I can accomplish this?
You are getting exactly what is supposed to happen. Extend does not "merge" classes, it extends another class/placeholder into a new selector's styles.
What that means is if I write:
%banner-style {
background: black;
}
.parent {
#extend %banner-style;
}
.other-selector {
#extend %banner-style;
color: red;
}
The css I get will be
.parent {
background: black;
}
.other-selector {
color: red;
background: black;
}
So you are getting expected results. If you'd like to make this "work" the way you want, you can just change your code to:
%banner-style {
padding: 140px 0 210px;
background: url(https://im2.ezgif.com/tmp/ezgif-2-92c6382d82ba.jpg) top center/cover no-repeat;
&.row {
margin: 0;
}
.main-heading {
font-size: 40px;
letter-spacing: -1px;
font-weight: 600;
padding-right: 20px;
sup {
font-size: 10px;
vertical-align: super;
}
}
}
.parent{
color: red;
&_banner {
#extend %banner-style;
};
}
Note: I took out the banner block because it seems you don't want that (and banner isn't a normal html element).
I have a html table with table headings in a Netsuite advanced PDF Template. For some reason one of headings has the word with extra spacing in between the letters, so instead of printing
Delivery
Address
for the header it prints
D e l i v e r y
Address
The Address part does not get the extra spaces.
The code for the header is:
<table class="itemtable" style="width: 100%;"><!-- start items --><#list record.item as item><#if item_index==0>
<thead>
<tr>
<th colspan="3">Delivery Address</th>
I have looked at css properties like word-break, letter-spacing, etc.; but I can't find anything that seem appropriate to fix this.
Anybody know why this is happening? This does not happen in an html page with the same code, so not sure why this is happening in Netsuite.
The css is:
table {
font-size: 9pt;
table-layout: fixed;
}
th {
font-weight: bold;
font-size: 8pt;
vertical-align: middle;
padding: 5px 6px 3px;
background-color: #e3e3e3;
color: #333333;
}
td {
padding: 4px 6px;
}
td p { align:left }
b {
font-weight: bold;
color: #333333;
}
table.header td {
padding: 0;
font-size: 10pt;
}
table.footer td {
padding: 0;
font-size: 8pt;
}
table.itemtable th {
padding-bottom: 10px;
padding-top: 10px;
}
table.body td {
padding-top: 2px;
}
table.total {
page-break-inside: avoid;
}
tr.totalrow {
background-color: #e3e3e3;
line-height: 200%;
}
td.totalboxtop {
font-size: 12pt;
background-color: #e3e3e3;
}
td.addressheader {
font-size: 8pt;
padding-top: 6px;
padding-bottom: 2px;
}
td.address {
padding-top: 0;
}
td.totalboxmid {
font-size: 28pt;
padding-top: 20px;
background-color: #e3e3e3;
}
td.totalboxbot {
background-color: #e3e3e3;
font-weight: bold;
}
span.title {
font-size: 28pt;
}
span.number {
font-size: 16pt;
}
span.itemname {
font-weight: bold;
line-height: 150%;
}
hr {
width: 100%;
color: #d3d3d3;
background-color: #d3d3d3;
height: 1px;
}
.synb {
font-weight: bold;
}
.synh7 {
font-size: 10pt;
line-height: 120%;
}
.synh9 {
font-size: 8pt;
line-height: 120%;
}
tr.synbordertop td {
border-top: 1pt solid black;
}
span.syntitle {
font-size: 20pt;
}
span.synnumber {
font-size: 13pt;
}
EDIT:
Netsuite uses BFO with these PDFs. See the following regarding this specific issue: https://bfo.com/support/faq/#31
How can I stop the letters in my table from being stretched out?
By default the text in tables is justified. In order to prevent this
you need to set align="left". Remember that each element has a
<p> implicitly placed around the data, so the best way to achieve
this is to use a style sheet and add:
td p { align:left }
which will cause all the table data elements to align to the left.
I've had this same issue before. It seems to be an issue exclusively with Netsuite's rendering of the PDF.
Here's the code I implemented to fix it:
Netsuite/HTML
<th><p style="align: center;">Color</p></th>
CSS:
td {
text-align: left;
padding: 2px;
}
th {
padding: 2px;
}
Here's how it looks without the center align:
Here's how it looks with the center:
I'm sure it's not the most ideal situation, but this is the only way I was able to get it to work, I'm sure I tried many of the same things you did.
I used the information in this link for further reference:
"This article is relevant if you are working with NetSuite Advanced
PDF Templates, and you are encountering an unusual HTML table
cell alignment effect in the generated PDF."
http://blog.prolecto.com/2016/03/18/netsuite-advanced-pdf-templates-how-to-fix-table-cell-alignment-justification-anomaly/
Hope this helps, it's at least the solution I implemented whenever I ran into a similar issue.
I am using jqueryInputToken and acts-as-taggable-on gem. I was able to make the back-end work. However, as part of using the jqueryTokenInput plugin, my text_area became so slim and looks more like a tiny text_field.
Here is a picture of what my text_area looks like as a result of the jQueryInput plugin without hovering:
And when you hover the "X" sign to delete the tag apears like in the picture below:
I want to modify the css so that the text_area becomes big and the token looks exactly like below:
How should I modify the css below to reach my desired look for the text_field and tokens ?
Here is the css:
/* Example tokeninput style #2: Mac Style */
fieldset.token-input-mac {
position: relative;
padding: 0;
margin: 5px 0;
background: #fff;
width: 400px;
border: 1px solid #A4BDEC;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
fieldset.token-input-mac.token-input-dropdown-mac {
border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
}
ul.token-input-list-mac {
position: relative;
overflow: hidden;
height: auto !important;
cursor: text;
font-size: 12px;
min-height: 1px;
z-index: 999;
margin: 0;
padding: 0;
background: transparent;
}
ul.token-input-list-mac.error {
border: 1px solid #C52020;
}
ul.token-input-list-mac li {
list-style-type: none;
}
li.token-input-token-mac p {
display: inline;
padding: 0;
margin: 0;
}
li.token-input-token-mac span {
color: #231C34;
margin-left: 5px;
font-weight: bold;
cursor: pointer;
}
/* TOKENS */
li.token-input-token-mac {
position: relative;
display: inline-block;
width: auto !important;
font-size: 8pt;
line-height: 12pt;
margin: 0px 3px 3px 0px;
padding: 4px 10px;
background: none;
background-color: #0F004E;
color: #fefefe;
cursor: default;
float: left;
font-weight: bold;
}
li.token-input-highlighted-token-mac {
background-color: #231C34;
color: #fefefe;
font-weight: bold;
}
li.token-input-selected-token-mac {
background-color: #231C34;
color: #fefefe;
font-weight: bold;
}
li.token-input-highlighted-token-mac span.token-input-delete-token-mac {
color: #fefefe;
font-weight: bold;
}
li.token-input-selected-token-mac span.token-input-delete-token-mac {
color: #fefefe;
font-weight: bold;
}
li.token-input-input-token-mac {
border: none;
background: transparent;
float: left;
padding: 0;
margin: 0;
}
li.token-input-input-token-mac input {
width: 100px;
padding: 3px;
margin: 0;
}
div.token-input-dropdown-mac {
position: absolute;
border-top: none;
left: -1px;
right: -1px;
background-color: #fefefe;
overflow: hidden;
cursor: default;
font-size: 10pt;
}
div.token-input-dropdown-mac p {
font-size: 8pt;
margin: 0;
padding: 0 10px;
color: #fff;
}
div.token-input-dropdown-mac h3.token-input-dropdown-category-mac {
font-size: 10pt;
font-weight: bold;
border: none;
padding: 0 5px;
margin: 0;
}
div.token-input-dropdown-mac ul {
margin: 0;
padding: 0;
}
div.token-input-dropdown-mac ul li {
list-style-type: none;
cursor: pointer;
background: none;
background-color: #fefefe;
margin: 0;
padding: 0 0 0 10px;
color: #999;
text-transform: uppercase;
}
div.token-input-dropdown-mac ul li.token-input-dropdown-item-mac span.token-input-dropdown-item-description-mac {
float: right;
font-size: 8pt;
font-style: italic;
padding: 0 10px 0 0;
color: #999;
text-transform: uppercase;;
}
div.token-input-dropdown-mac ul li strong {
font-weight: bold;
text-decoration: underline;
color: #999;
text-transform: uppercase;
}
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac,
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd {
background: #0F004E;
color: #bb8322; //Official Red
text-transform: uppercase;
font-weight: bold;
}
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac:hover,
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd:hover,
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac:focus,
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd:focus {
color: #fff;
}
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac span.token-input-dropdown-item-description-mac,
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd span.token-input-dropdown-item-description-mac {
color: #fff;
}
I have been trying to do something like this and have at least a rough version of something working, so I'll put this here in case it's useful. I used the Facebook theme - it looks like you used a different theme. I mention that because this influences things like class names in my answer. Also I think that Facebook might be more of what you're after (see the cosmetic stuff below).
I'll split this into two parts: a structural part first, and then a cosmetic part.
Structure
Part of my problem was due to the fact that the token input code replaces your HTML with some of its own. I wrote this HTML
<div id="searchBar">
<input type="text" id="bigTextInput" />
</div>
and the combination of the insert-token-input-here call:
$("#bigTextInput").tokenInput(token_url, {
theme: 'facebook',...
and the user entering a couple of things, made it look like this (with my comments):
<div id="searchBar">
<ul class="token-input-list-facebook">
<li class="token-input-token-facebook"> <!-- one of these per user input -->
<p>first thing the user entered
<span class="token-input-delete-token-facebook">X</span></p></li>
<li class="token-input-token-facebook">
<p>second thing the user entered
<span class="token-input-delete-token-facebook">X</span></p></li>
<li class="token-input-input-token-facebook"> <!-- 1 on the end for entering the next selection -->
<input id="token-input-Y"> <!-- Y = whatever Id you gave to the original input (bigTextInput in my case) -->
</li>
</ul>
<input id=Y display:none /> <!-- the thing you created, but then is hidden and replaced by the ul etc. -->
</div>
The input I created has been hidden away, and in its place there's now a ul, with an li per thing the user entered and an extra li for the user to add more things.
To change the height successfully I had to set the height I wanted on the ul:
$("ul.token-input-list-facebook").height(newHeight + "px");
Bonus structure stuff - auto-resizing
I started with just a large box, but this didn't look good if the user had entered only a small amount of stuff. So I thought I'd try to make it start small (a single line high) and then grow on demand.
To do this I made sure that the ul wouldn't create scrollbars:
ul.token-input-list-facebook {
overflow-x: hidden;
overflow-y: hidden;
}
and then if the content overflowed, I would re-size things. I checked for overflow by adding a handler to the add and delete events of the token input:
$("#bigTextInput").tokenInput(token_url, {
theme: 'facebook',
onAdd: function(){
growSearchBoxSizes();
},
onDelete: function(){
shrinkSearchBoxSizes();
}
});
The best way I found to detect overflow in growSearchBoxSizes was to compare the offsetHeight and scrollHeight properties of the enclosing div:
var heightA = parseFloat($("#searchBar")[0].offsetHeight);
var heightB = parseFloat($("#searchBar")[0].scrollHeight);
I suggest you write these to console.log, experiment with what they show when the input does and doesn't overflow, and have code to add 1 line's height when they show you that there is overflow.
I couldn't come up with a good way to detect when it was time to shrink (e.g. after the user had deleted a line's worth of stuff), so in the delete handler I shrink the box down to its starting size and then grow it back up to whatever height is needed, i.e. until there is no overflow. (A hack, but it seems to work.)
Actually, I was already using a handler for the add and delete events because of wanting to prevent what the user had already entered from showing up in the auto-completion list for later inputs, which you might want to also consider.
Cosmetic
The reason why I suggested that you might want to switch to the Facebook theme is that it has the X present all the time as you want. The colours and shapes aren't as you want them, but I hope that this should be a matter of just defining overrides in your CSS as appropriate.
I'm working in the main page of www.recaccesorios.com and I'm struggling with a padding. The vertical distance between two elements is too big and I don't know why is doing that. I'll show you the inspection with Google Chrome:
As you can see, Chrome is telling me that the top padding is 0 or null, but in the image you can see that it isn't true. What is happening?
My horrible CSS (not the whole CSS, I can't put here more than 3000 lines...):
#galeria {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: rgb(222,222,222);
background-color: rgba(222,222,222,0.8);
border: 1px solid #e5e5e5;
border-radius: 4px;
/* padding-bottom: 40px; */
width: 100%;
}
#galeria > h5 {
text-align: center;
}
#noticias > h5 {
text-align: center;
}
#noticias a {
color:#555;
}
#noticias p {
text-align : justify;
padding-left:12px;
padding-right:12px;
}
#noticias {
height:292px;
}
#vistaPrevia {
position: absolute;
z-index: 6;
top: 40px;
display: none;
}
#galeria > img {
display: block;
margin-left: auto;
margin-right: auto;
}
#galeria > span {
margin-left: 5px;
}
#noticias {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: rgb(222,222,222);
background-color: rgba(222,222,222,0.8);
border: 1px solid #e5e5e5;
border-radius: 4px;
/* padding-bottom: 40px; */
width: 100%;
}
.td-galeria {
padding-right: 6px;
padding-left: 0px;
border-color:transparent;
width:50%;
height:300px;
}
.td-noticias {
padding-left: 6px;
padding-right: 0px;
}
I believe the issue is the reset on line 42 of the CSS file vertical-align: baseline; this seems to be causing your chrome issues.
This solves the issue:
#tablaInicio td {vertical-align:}
But it is strange.
EDIT:
Found out why it is strange; it is a JS script causing the extra height.
The Problem exists in line 42 of Style.css;
remove vertical-align:baseline;
and also correct
#tablaInicio td {vertical-align:}
We need to see your CSS to understand this better. But, I'm guessing you've declared the padding somewhere else in your code.
In your CSS file, change the padding value line to something like this:-
"padding: 0px !important";
the !important message means it will ignore any other values you try to set for padding.
I hope this helps.