HTML in Web Viewer shows too wide

Charles Calthrop · July 9, 2016

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.

comment · July 9, 2016

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:

Charles Calthrop · July 10, 2016

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>

")

comment · July 10, 2016

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.

dwdata · July 10, 2016

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

Charles Calthrop · July 12, 2016

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!

Sign In

HTML in Web Viewer shows too wide

Recommended Posts

Charles Calthrop

comment

Charles Calthrop

comment

dwdata

Charles Calthrop

Create an account or sign in to comment

Create an account

Sign in

Browse

Site Support

Forums

Blogs

Marketplace

Activity

Important Information