Jump to content

HTML in Web Viewer shows too wide


This topic is 2816 days old. Please don't post here. Open a new topic instead.

Recommended Posts

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.
Link to comment
Share on other sites

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:

wv.png

 

Link to comment
Share on other sites

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>
<!-- HTML Codes by Quackit.com -->
<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>

 

")

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

 

Link to comment
Share on other sites

This topic is 2816 days old. Please don't post here. Open a new topic instead.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.