With NPAPI being faced out by Chrome, We've been trying to find a good alternative to an Applet we had for printing checks and invoices. There are many options, like NaCl and PNaCl from chrome (with PPAPI) however those really mean settling for chrome, which isn't a really good idea. Jumping from solution to solution we've found that it is possible to print absolute positions from HTML, like so:
<html style="font-family: courier new; font-size: 11pt;">
<body>
<div style="position:absolute; left:129mm; top:25mm"><<**.***,**>></div> <!-- PLC_POSICIONMTO -->
<div style="position:absolute; left:30mm; top:38mm;"><<<??????>>></div> <!-- PLC_POSICIONBENEFICIARIO -->
<div style="position:absolute; left:40mm; top:44mm;"><<<<**.***,**>>>></div> <!-- PLC_POSICIONMTO1 -->
<div style="position:absolute; left:20mm; top:56mm;">?????</div> <!-- PLC_POCISIONFECHA -->
<div style="position:absolute; left:82mm; top:56mm;">???</div> <!-- PLC_POCISIONANO -->
<div style="position:absolute; left:mm; top:mm;"></div>
<div style="position:absolute; left:mm; top:mm;"></div>
</body>
This is an example i made to test if the position works, those attributes will come from a DataBase. It all seems to work, however when trying to print from chrome to a dot matrix printer, the preview looks weirdly zoomed in, and doesn't print correctly, but when I print to a PDF and then to the Dot Matrix (or from firefox) it works like it shoul (somewhat). The page design in the Chrome Preview looks weird too, when the page is in portrait mode, it lookes squared, but in landscape mode it lookes as it should in vertical (and it seems to work fine until i print, where it prints as in landscape mode and not like the preview shows).
Does anybody have any idea why this is happening?. Or is there another solution that doesn't force me to use chrome alone as he company's browser?.
Related
<div class="MsgBody" style="width: 90%;align-self: center;margin: 3vh 0;flex-direction: column;display: flex;">
<div class="MsgRight" style="flex-direction: row;width: 50%;align-self: flex-end;justify-content: flex-end;display: flex;">
<div class="MsgSendContent" style="background-color: #9eea6a;border-radius: 5px;padding: 10px;word-break: break-word;flex-shrink: 0;display: flex;">
555 </div>
<div class="RightTriangle" style="margin-top: 8px;width: 0;height: 0;border-style: solid;border-width: 7.5px 0 7.5px 10px;border-color: transparent transparent transparent #9eea6a;flex-shrink: 0;margin-right: 8px;display: flex"></div>
<div class="HeadImg RightHeadImg" style="background-image: url(/img/testhead.jpg);height: 40px;width: 40px;border-radius: 5px;background-position: center;background-size: cover;background-repeat: no-repeat;flex-shrink: 0;display: flex;"></div>
</div>
</div>
In PC end, it runs well:
In the Chrome Toggle device toolbar, I tried all the device and all of them works well also.
Well, when I run the page in iPhone 6s with Chrome of IOS 13.1.2, it turns out to be this:
As you see, the message dialog does not render correctly and the input box in the bottom miss yet.
Then I tried the safari and the problem still here. What's more, I tried an android device which is android 9, the input box does not miss any more but the message dialog still does not render correctly.
The problem only occurs in the mobile device but not in the Chrome Toggle device toolbar. I can hardly know how to debug and solve it.
I should not only post a URL here but I don't know where is the problem.
Would you please help me to solve this and tell me why it doesn't render identical even I use Chrome in PC and Mobile.
Thank you.
This is happening because your page is not responsive
Integrate bootstrap ,so you don't have to write CSS files manually and use pre build classes with bootstrap grid to make responsive pages
There are several tutorials available for bootstrap I prefer you to go through them
My personal favourite is:
https://www.w3schools.com/bootstrap/default.asp
I have the following html:
<div class="awpcp-subtitle">Contact Information
</div>
Contact $adcontact_name
<a href="tel:$adcontactphone">
<div class="phone">$adcontactphone
</div>
</a>
<div class="location">
<Location: </label> London, UK</div>
This makes a button link to dialing screen on mobile, with the number displayed on screen.
It works fine in Android, on Chrome/ Firefox, but as soon as I try it on an Apple phone on Safari, instead of just linking to dialing screen with the number displayed, it asks if I want to dial this:
<br><label>,hone<label>07945xxxx
When I press yes, it says it can't dial:
<br><label>,hone<label>07945xxxx
For obvious reasons in that it can't dial a code.
This must be a Safari iPhone/Mac issue, and what on earth does 'hone' mean anyway?
So I tried this html after the tag in my header.php, to make my site browser compatible.
<script
src="css_browser_selector.js"
type="text/javascript"></script>
This didn't work for the phone issue (there are others but let's stick to this for now.)
So how do I get apple iPhone, using Safari browser, to perform the same simple task as Firefox, Chrome, Android etc.
Perhaps there is a way to hide
<br><label.....
Like:
.div class ["<BR><label..."]
{display: none}
? It's behaving like published text so treat it as such?
I came across this but not sure what to do with it or if it is the right code? I'm getting the same issue with Google maps
"<"followedby"!"<br/><label>Phone:
</label>""followedby">"
"<"followedby"!"<br/>.
<label>Location:
</label>""followedby">"
But
$adcontactphone
Represents generic phone as well as specific phone number -including label tags
Based on the link provided in the comments I can deduce that $adcontactphone is being assigned the following value:
<br/><label>Phone:</label> 7576XXXXXX
You can see that string contains valid html tags, but then you are using $adcontactphone inside an href attribute:
<a href="tel:$adcontactphone">
...
</a>
This results in the following html after interpolating the variable:
<a href="tel:<br/><label>Phone:</label> 7576XXXXXX">
...
</a>
Many browsers will not consider this as a usable value for href. Some browsers may be made to filter out tags inside the attribute and others may not. This is not a browser compatibility issue because each browser is free to handle this invalid attribute in its own way.
If you fix $adcontactphone to contain just the phone number you will find that the link will start working in most browsers. The result you are aiming for would be this:
<a href="tel:7576XXXXXX">
...
</a>
There are also other invalid html problems that should be fixed to be sure that this section of your page is consistent across all browsers. For example:
<div class="location">
<Location: </label> London, UK</div>
You have an unmatched < here, also Location is not a supported html tag so some browsers may not like that.
Maybe it should look like this?
<div class="location">
<label>Location:</label> London, UK
</div>
Im using google recaptcha, as shown in the image below, when I click the captcha check box, a weird line shows up in my page. Even I set height for the div or remove css related code. The line still shows up eventually. It only appear in IE browser and works fine in other browser, is it a bug between google recaptcha and IE browser?
Here is the code
<div class="row" >
<div align="center">
<div class="g-recaptcha" data-sitekey="somedatasitekeyhere"
data-theme="light" data-size="normal">
</div>
</div>
</div>
I've noticed in IE9 that using the matrix DXIImageTransform will pixelate rotated text. I don't have this problem in IE8 or 7. Normally I would use the css3 options in IE9 but for reasons outside my control, the page renders in quirks mode (valid html5 iframe embedded in a 3rd party page with no doctype)
This is the code I'm using:
<!--Looks like crap but is my only option in quirks mode-->
<span style="position:absolute;
filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);">
Does this make my butt look pixelated?
</span>
In IE8, the result rotated text is smooth, but in IE9 it's very pixelated. Compare to this (which doesn't work in quirks mode)
<!-- looks great but doesn't work in quirks mode-->
<span style="position:absolute; top:150px; -ms-transform: rotate(-45deg);">
Does this make my butt look pixelated?
</span>
To see it in action, check out this fiddle in IE9
http://jsfiddle.net/U4CCD/3/
My question, how can I rotate text in IE9, in quirks mode, that doesn't look all pixelated and blurry. Why did the matrix transform start sucking in IE9?
If you're fortunate enough not to be running IE9, this is what I'm seeing. The clearer example is how it looks in IE8 and how it looks using css3 transforms.
Ultimately I found that this simply could not be done with my current configuration. I was, however, able to work around it by wrapping my valid html5 page in an object that was then embedded in the iframe. In IE 9 this seemed to allow my page to render in the iframe in standards mode and use the SVG transforms that look clean. I created the following wrapper aspx script:
<%# Page Language="C#" %>
<%
string url = "app/path";
if(!String.IsNullOrEmpty(Request.QueryString["path"]))
url = HttpUtility.UrlDecode(Request.QueryString["path"]);
url += "?i=1";
if(!String.IsNullOrEmpty(Request.QueryString["id"]))
url += "&id=" + Request.QueryString["id"];
if(Request.Browser.Browser!="IE"||Request.Browser.MajorVersion!=9) {
Response.Redirect(url);
}
url += "&quirky=1";
%>
<html>
<head><title></title>
</head>
<body style="width:100%; height:100%; margin:0; padding:0; overflow:hidden;">
<object type="text/html" data="<% =url %>" style="overflow:hidden; width:100%; height:100%"></object>
</body>
</html>
I am new to dojo / dojo mobile.
I am building a screen with a header and a list of items beneath. Very
classical in mobile apps.
<body id="content" style="display: none">
<div data-dojo-type="dojox.mobile.ScrollableView" id="mainView"
data-dojo-props="selected:true,scrollDir:'v'">
<h1 data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Main',fixed:'top'"></h1>
<div data-dojo-type="dojox.mobile.EdgeToEdgeList" style="margin-top: 0px;">
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Take Picture...',
icon:'images/plus-30.png',
url:'TakePicture.html',
transition:'slide'">
</div>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/PhoneGapDemo.js"></script>
<script src="js/messages.js"></script>
Problem : the first item on the list is hidden behind the header and not
visible.
(Same rendering in IBM Rich Page Editor, IBM Mobile App Simulator, Apple iOS
Simulator and iPhone iOS6)
I juste started the project, I don't have fancy CSS or other ... just
started from scratch, added the ScrollableView, the Header, the
EdgeToEdgeList and then the ListItems.
Workaround is to apply a style on the EdgeToEdgeList to move it 40px down.
But it is not clean and breaks cross-platform compatibility (what if the
header is not always 40px height ?)
I am using DoJo 1.8
Thanks
Seb
Hi even im new to this worklight, well im not sure but got to the properties (go to the design and right click on the edge-to-edge list and select properties) you can see the tag, style , Layout, All options.
go to styles and click the properties and change the postion / lay out. it might help.
please let me know if you get that right.
Solution is twofold
use style="visibility:hidden" in element, as following
<body id="content" style="visibility:hidden">
load "mobileDeviceTheme" explicitly with a element instead of letting Dojo load it asynchronously (this module needs to be loaded early to allow for proper height calculation)
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
before (the load of dojo/dojo.js)
Seb