I'm learning to develop a Firefox add-on. I've made a simple dev-tools tab with an input box. I'm finding that I can type every character into the input box with the exception of "/" or "'". A forward slash or single quote will not populate. Nothing appears in the input box when I type these characters.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{
margin:0;
}
.warpath-search{
width:100%;
background-color:#fcfcfc;
border:1px solid #f0f1f2;
padding:.3em;
}
.warpath-search label{
width:100px;
display:inline-block;
}
.warpath-search input{
width:400px;
}
</style>
</head>
<body>
<div class="warpath-search">
<label>Xpath:</label><input type="text" name="warpath-xpath" id="warpath-xpath" />
</div>
<script src="devtools-panel.js"></script>
</body>
</html>
devtools-panel.js:
input = document.getElementById("warpath-xpath");
input.addEventListener("keyup", () => {
console.log(input.value);
});
Gif:
If I load the plugin's HTML file directly in the browser I can enter the characters but when it is loaded as a plugin it's blocked.
Using Firefox: 70.0.1 (64-bit)
The problem seems to have something to do with a Firefox type-ahead feature. The following steps resolved the issue for me:
Open about:config in the browser
Click "I accept the risk"
Search for "accessibility.typeaheadfind.manual"
Change the value of this key from "true" to "false"
Related
I have 'OCR A Extended' font installed in Windows and I created the following test.html file, but in Chrome only the OCR A gets rendered as OCR text (class p.b), OCR A Extended (class p.a) gets rendered (computed) as Times New Roman, what's going on? In IE both are rendered as OCR. Same behavior in Windows 7 and Windows 10. Looks like a bug to me.
<html>
<head>
<style>
p.a {
font-family: "OCR A Extended";
}
p.b {
font-family: "OCR A";
}
</style>
</head>
<body>
<p class="a">1234567890</p>
<p class="b">1234567890</p>
</body>
</html>
I have two Windows computers, both with Outlook 2007. I send both an HTML email with stuff like:
<div style='font-family:Times New Roman,Serif;font-size:11pt'> ...
I need it to be Times New Roman, 11pt font. In one Outlook it shows up correctly as Times 11pt, in the other, Arial 12pt. I can get the second one to display Times by using surrounding content with a tag like:
<font face='Times New Roman' size='3'>...
But the size is mapped to 12pt, and size=2 is 10pt. I see no way yet to specify the size in px or pt. This tag is disturbing because we're in the year 2013.
I understand that Outlook HTML email rendering is a disaster because it defers to Word instead of IE for rendering. But why the difference? And can I do something to get the second copy of Outlook to act like the first one? Or is there some other way to tell it: "11pt".
Here is my most recent attempt at the HTML sent to Exchange...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body, div, p, table, td {
font-family:TimesNewRoman, "Times New Roman", Times, Serif;
}
</style>
</head>
<body style='font-family:TimesNewRoman, "Times New Roman", Times, Serif;font-size:11pt;'>
<font style="font-family: TimesNewRoman, "Times New Roman", Times, serif; font-size: 14px; color: #000000;">
<p>Blah blah.
</p>
</font>
</body></html>
I had a similar problem, but I only have Office 2010, so I can't verify that this would work for 2007. In case it helps, I've shared the basic structure of my HTML for Outlook messages below. The key differences I see from the original question are the style type "text/css" and the enclosing comment tags around the styles. Note that other elements, like td, th, table, etc., can be styled in this block as well.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>My Title</title>
<style type="text/css">
<!--
body { font-size: 10pt font-family: sans-serif; }
-->
</style>
</head>
<body>
blah, blah
</body>
</html>
Times isn't a font in Windows (I believe that is the Mac name for Times New Roman).
Courtesy of cssfontstack, Try something like this:
font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
Beyond this try using the quotation marks fallback in the example above to see if that makes a difference. Also, apply your css styles to a <font> tag or a <td> directly. Div's are not really recommended for html email, so I'd avoid them wherever possible. I use font tags almost exclusively to style text and they always seem to come through for me.
I'm using wkhtmltopdf 0.10.0 rc2 for Mac
I have an html like this one :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="print.css" rel="stylesheet">
<style type="text/css" media="screen,print">
.break{
display: block;
clear: both;
page-break-after: always;
border :1px solid red
}
.page-breaker {
display: block;
page-break-after: always;
border :1px solid red
}
</style>
</head>
<body>
<div class="container break">
page 1
</div>
<div class="page-breaker"></div>
<div class="container">
page 2
</div>
</body>
</html>
I simply try :
wkhtmltopdf test.html test.pdf
But it didn't produce a page-break, I doing something wrong ?
Possibly unrelated as your pdf generated ok with an earlier version of wkhtmltopdf. Either way, I had similar issues with page breaks not being applied correctly. My problem was parent elements of the page-breaked element having an overflow other than visible.
This fixed my issue:
* {
overflow: visible !important;
}
Of course, you can be more specific about the tags this applies to ;)
try using as follows
<div style="page-break-before:always;">
//your content
</div>
this should work.
I am usinf wkhtmltopdf 0.12.3.2
For me page-break-after works when a border is set, and when the breaker div is an immediate child of body.
.page-breaker {
clear: both;
display: block;
border :1px solid transparent;
page-break-after: always;
}
break-break-before does not work.
--print-media-type not needed.
I am using version wkhtmltopdf 0.12.0
For me, page breaks ONLY work with --print-media-type.
Without it, page break protection for images works, but not page-break-after or before.
I had to make a special css file for print media to get it work.
Setting the paper size to 'A3' or using the 'overflow: visible' didn't make any difference.
Also see WKHTMLTOPDF with pdfkit on Rails ignoring table page breaks
It is working fine after remove media print
Before:
#media print {
.page-break { height:0;page-break-after: always; margin:0; border-top:none;}
}
above code not working in new version.
Now
.page-break { height:0;page-break-after: always; margin:0; border-top:none;}
Update the wkhtmltopdf to version 0.12.5. Page break issue not occuring for me after updating.
Use --disable-smart-shrinking to avoid empty white space ( If you have any)
Use --zoom <value> to avoid page page (If entire page not showing)
When using the built-in print functionality on a Case, is it possible to avoid printing the notes attached to the case?
If it's not possible I'll be creating a SSRS report to do it, but I'd rather just use what's already there.
You should be able to do it by embedding a hidden HTML web resource in the page that hides elements when it is a print preview page.
Example code that would turn a field to a different color:
<HTML>
<HEAD>
<SCRIPT type=text/javascript>
if (top.location.href.indexOf("/print/print.aspx") != -1) {
//Do your own DOM manipulation here to hide sections
top.frames[0].document.getElementById('caseorigincode_d').firstChild.style.color = '#0000FF';
}
</SCRIPT>
<META charset=utf-8>
</HEAD>
<BODY contentEditable=true>
<FONT size=2 face="Tahoma, Verdana, Arial">
Testing…
</FONT>
</BODY>
</HTML>
This method comes via: http://www.crmsoftwareblog.com/2011/08/printing-in-crm-2011/
if you put:
<field name>_c
it is the header/label
<field name>_d
it is the data value
in you case just put:
{
top.frames[0].document.getElementById('notescontrol_c').style.display = "none"
top.frames[0].document.getElementById('notescontrol_d').style.display = "none"
}
I try a simple css3 media queries that will change background color when I change the browser to 480px width. It works fine when i put the files on my site, here: http://www.kangtanto.com/css3/ . But when I try the same files on my other site, with https, the media queries just won't work, the background color won't change when I change my browser size to 480px width. it is on my other site at https://dosenjaga.eepis-its.edu/home.html
this is my html code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width:480px)" href="css3.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Ini hanya mencoba saja lho</h1>
</div>
<div id="content">
Adding the specific code for devices inline might be a good way to use media queries if
you only need to make a few changes, however if your stylesheet contains a lot of
overwriting or you want to completely separate the styles shown to desktop browsers and those used for small screen devices, then linking in a different stylesheet will enable you to keep the CSS separate.
</div>
</div>
</body>
</html>
and this is my style.css file. On my other site I use style2.css, because there is a file with the same name on my server, so I gave it other name but the code is the same.
div#wrapper { width: 800px;}
div#header{
background-image:url(media_queries.png);
height: 93px;
position:relative;
}
div#header h1{
font-size:140%;
}
#content{
float:none;
width:100%;
background-color:#CCC;
}
#navigation{
float:none;
width:auto;
}
and this is my css3.css code
#media only screen and (max-width:480px){
div#wrapper { width: 400px;}
div#header{
background-image:url(media_queries.png);
height: 93px;
position:relative;
}
div#header h1{
font-size:140%;
}
#content{
float:none;
width:100%;
background-color:#8787C1;
}
#navigation{
float:none;
width:auto;
}
}
Thanks,
It is the problem of older versions of IE not the https, CSS3 is not supported in less then IE9. in IE9 it is working fine.
It's solved!!! I need to delete all my browser history by pressing Shift+ctrl+del on my fire