I am rendering some html in a webview that is embedded in a table cell. For some reason there is a black line at the bottom of the webview. I tried setting the background color of the webview and its scrollview to white but this did not change anything. Has anyone seen this before?
Here is the HTML that is being rendered:
<html>
<head>
<style type="text/css">
a {text-decoration:none;background-color:white;}
</style>
<title></title>
</head>
<body style="margin:0;padding:0;background-color:white;">
<a href="http://body/" style=
"font-family:HelveticaNeue-Light;font-size:20.000000;color:black;-webkit-tap-highlight-color:rgba(0,0,0,0);">
Portland Blazers vs Golden State Warriors | FULL Highlights | January 26 ,
2014 | NBA 2013-14 Season</a><span style=
"font-family:HelveticaNeue;font-size:12.000000;color:rgb(102,102,102);white-space:nowrap;"><a href="https://www.youtube.com/watch?v=2TfldZ4w57E&feature=youtube_gdata_player"
style=
"font-family:HelveticaNeue;font-size:12;color:rgb(102,102,102);-webkit-tap-highlight-color:rgba(0,0,0,0);"><img height="12"
src="file:link#2x.png" width="20">www.youtube.com</a></span>
</body>
</html>
This is on iOS7.
UPDATE: I'm still not sure what is causing the black line to appear but I managed to get rid of it by changing how I setup my layout constraints. Before I was setting constraints for the spacing around the views and letting the layout system figure out the size that the view should be. I changed it to explicitly set a height constraint of the webview when the webview finishes loading its content. This seems to have fixed the issue but I still do not understand where the black line was coming from.
I had same issue and solution is given below :
Set UIWebView's opaque to NO
Set UIWebView's backgroundcolor to clear color.
Note : Both things provided above are necessary.
Other solutions while using above one
webView.scrollView.backgroundColor = UIColor.whiteColor()
OR
The meta to go in the head tag of HTML
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
As Phu Nguyen told in comments the solution is to set opaque property of webView to NO.
webView.opaque = NO;
Related
I created a webpage in the Vs code. Then I choose a font from google-font and embedded its link in the head tag of HTML. Then added font family in CSS. It worked properly. As I was testing the webpage in a live sever extension. I noticed whenever I write a single character in CSS, the page shakes a lot. When I stop writing code, shaking stops. During shaking Font becomes bigger, smaller, darker e.t.c without reason although I did nothing abut font .what is the problem behind this? How to stop this shaking?
body{
font-family: 'Girassol', cursive;
font-size:25px;
}
<!DOCTYPE html>
<html>
<head>
<title>Dropdown Menu design</title>
<link
href="https://fonts.googleapis.com/css2?family=Girassol&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="indexstyle.css" />
<script src="try.js"></script>
</head>
<body>
<p>
The University was established as compensation for the annulment of the
1905 Partition of Bengal. The partition had established East Bengal and
Assam as a separate province, with Dhaka as its capital. However, the
partition was abolished in 1911. In 1913, public opinion was solicited
before the university scheme was given its final shape, and the Secretary
of State approved it in December 1913.[1] The first vice-chancellor of the
university was Philip Joseph Hartog, who had been academic registrar of
the University of London for 17 years.[
</p>
</body>
</html>
Thanks for your answer. I just solved my problem using a method. As I was using vs code. I set up an autosave option. The autosave delay option was set to 100 milliseconds. When I converted it to 1000 milliseconds, it worked without shaking the page.
It's probably because as you type your CSS, it becomes temporarily invalid until you finish the rule you're typing. Since you're using a live preview extension, while the CSS is invalid, the rules aren't applied, so you will see changes to your pages appearance.
A single color, old lace, is not working for me as a theme-color in the meta tag in Chrome Android.
Other colors work well. I tried providing the hex triplet instead and still nothing.
<html>
<head>
....
<meta name="theme-color" content="oldlace"> <!-- content="#fdf5e6" doesn't work either -->
....
</head>
<body>
....
</body>
</html>
It just appears as the default white instead of the wanted color.
Here is a description from WHATWG
When using the theme color in UI, user agents may adjust it in implementation-specific ways to make it more suitable for the UI in question.
Color #fdf5e6 is a QUESTION here, because its too light to have a enough contrast.
Same problem with color #f5f5f5f and any other light colors.
is there a way to change my queue order for images?
I have an image which i use as a "blur" preview for an bigger image. I use a cms so there are a lot of images which load before my image. Even preload is ignored.
The order is:
Body with background image
27 images
Custom preview image
What I try is to change my queue order
Body
custom Preview image
27 images
My image is a low resolution image. It is 85x53 and its size is about 2,13kb.
And it start at 1,4s (Sometimes even later).
Thanks for any help :)
Kind regards,
Rakowu
You can try to use a hidden <img> tag at the top of your body to force the browser to load it earlier
Something like this:
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
</head>
<body>
<img src="your/preloaded/image.png" style="display: none;"/>
<!-- ... -->
</body>
</html>
I've been trying to do something super simple, such as displaying some text. It was working a couple of hours back, but now it its not. This is the exact code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://aframe.io/releases/0.5.0/aframe.min.js" async></script>
<meta name="description" content="Science Labs for Homeschoolers in Virtual Reality">
</head>
<body>
<a-scene>
<a-assets>
<img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
<img id="skyTexture" src="https://cdn.aframe.io/a-painter/images/sky.jpg">
</a-assets>
<a-cylinder id="ground" src="#groundTexture" radius="30" height="0.1"></a-cylinder>
<a-sky id="background" src="#skyTexture" theta-length="90" radius="30"></a-sky>
<a-entity position="0.768 1.04 -3.442" rotation="0 0 0" scale="10 10 2" visible="true" text="value:Hello Berry Berry;"></a-entity>
</a-scene>
<script type="text/javascript" src="build/client/bundle.js"></script></body>
</html>
It's just a testing project. Currently using nodejs v7.10.0 with express 4.15.3 with webpack. Using Google Chrome 58.0.3 and Edge 15.
Nothing fancy, just serving the index.html file (what you're seeing above).
No matter what, I can't see the text (Only from this file). I've also tried:
Looking around the scene.
Setting the text double sided to spot it.
Copying the exact asset from the inspector to my code.
Changing the position
Changing the text scale.
This is what's resulting:
As you can see, there's no sign of the text (when it should look big due to the scale settings).
Any ideas? Thank you very much!
Edit:
Here is with 0.5 0.5 0.5
Side note: I'm having problems uploading images to StackOverflow: http://i66.tinypic.com/a47l2b.jpg
Here's with 10 10 10:
http://i67.tinypic.com/npfd50.jpg
In addition, I can't move the a-entity "graphically" (With the red, black, yellow arrows), but I can if I change them in the properties panel.
Edit 2:
Here is a code share in Glitch:
https://glitch.com/edit/#!/nebulous-pail?path=index.html:1:0
Well. It seems that the problem, so far, was loading A-Frame asynchronously:
<script src="https://aframe.io/releases/0.5.0/aframe.min.js" async></script>
We need to omit the "async" attribute for it to work:
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
My theory would be that it is not gracefully upgrading the element after it has been loaded.
I even tried adding the text as a mixin, but it will not work unless A-Frame has been loaded first.
I have Html (hello.html) like bellow
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test</title>
</head>
<body>
<div>
¿Hola cómo está?
</div>
</body>
</html>
It shows out as "¿Hola cómo está?" when run in browser
Is there any solution to get correct out put without altering the
hello.html file?
I hope that, it is in Spanish language but i looking for any other solution like as change the encode type or font in browser or editor.
Edit: Just noticed the requirement. But some Spanish characters require Unicode and you have to declare that in your html file.
Put this in your head.
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
I don't see whats wrong, if you are refering to the font type in the html and the webpage is different is because of your editor, if you really want to change the font you will need to set the font tag around your text or even better define it in the CSS
Based on the clarification in the comment section to your question....
If you are using Google Chrome, and your computer is set to an English locale, load the page, then right click on the body, and select "Translate to English."
Sounds like an interview trick question, rather than a programming one.
No.
You cannot do this without altering the html file.
Place this <meta> tag in your Head Section
<meta charset="UTF-8">