HTML in Web Viewer shows too wide

July 9, 20169 yr

I'm using a web viewer to show HTML code showing text from the database held in a field or a variable.

The text shows successfully but the text itself appears wider than the web viewer so I have to scroll from left to right within the web viewer in order to see all the text.

Is there a way to set the pixel width of the text so that I don't have to scroll within the web viewer?

Many thanks.

July 9, 20169 yr

2 hours ago, Robin Penfold said:

I'm using a web viewer to show HTML code showing text from the database held in a field

What is your exact code? If I use simply:

"data:text/html;charset=utf-8," & Table::Data

I don't get this problem:

July 10, 20169 yr

Author

Thanks for your reply. The code I'm using allows setting of some formatting and is in a custom function. This a version with a Let Statement added to allow testing.

//HTML CF
//HTML Code originally generated by Quackit.com
//Adapted to allow variable input

//For text aligments, the options are left, right, centre and justify
//There is an If statement at the place where outputAlignment is used that converts 'justified' to 'justify' as 'justified' is an extremely likely input

Let ( [
@inputText = "This is my super hip text string" ;
@outputFont = "Arial";
@outputSize = 36;
@outputColourHEX = "555555" ;
@outputBackgroundColour = "FF0000"

];
*/

//RESULT
//HTML CODE FILLING IN WITH VARIABLES

"data:text/html,

<html>
<head>

<title>
</title>
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<style type=\"text/css\">
body {background-color:ffffff;background-repeat:no-repeat;background-position:top left;background-attachment:fixed;}
h1{font-family:Cursive;color:000000;}
p {text-align:" &

//ALIGNMENT FOR OUTPUT TEXT
//THE IF STATEMENT REPLACES THE WORD JUSTIFIED WITH JUSTIFY - TURNING A LIKELY INPUT INTO THE CORRECT INPUT
If ( outputAlignment = "justified" ; "justify" ; outputAlignment )

& ";font-family:"&

//FONT FOR OUTPUT TEXT
outputFont

&";font-size:" &

//SIZE FOR OUTPUT TEXT
outputSize

&"px;font-style:normal;font-weight:normal;color:"&

//HEX COLOUR FOR OUTPUT TEXT
outputColourHEX

&";background-color:"&

//HEX COLOUR FOR BACKGROUND
outputBackgroundColour

&";}
</style>
</head>
<body>
<h1></h1>
<p>"&

//TEXT TO DISPLAY
inputText

&"</p>
</body>
</html>

")

July 10, 20169 yr

That's not very helpful, because (a) you haven't included the function's parameters and (b) that's not valid syntax.

In any case, this is clearly an HTML/CSS issue and I am not sure I want to spend time on hunting it down for you.

July 10, 20169 yr

Hi Robin,

Take a look at this sample file. Is the HTML/CSS looking okay in it on your computer? Let me know.

Good luck!

html_wv.zip

July 12, 20169 yr

Author

Thanks for your replies and to dwdata for time spent putting the code into a file. The sample file shows as expected which is good. Was helpful to post and to think things through in the process. I missed out a key piece of information in my original post, and that was that it was being viewed on Go.

The key bit of code is the line: <meta name="viewport" content="width=device-width, initial-scale=1">

A little Googling shows that it's setting the viewport so as to make responsive HTML for use on tablets and phones. It seems that the problem arises because it's setting the width of the viewport based on the iPhone screen width, even though the web viewer itself is smaller.

By hardcoding a value like width=300 I can get it to display correctly, and by removing the whole line shown above. Not sure if there's any advantage to having it in there and I couldn't get it work with something like 'width=device-width - 50'.

Thanks for your help and any thoughts on viewports would be appreciated!