Monospace output from Zen

Question

Question

Ray Hitchins · Nov 7, 2016

Hi,

I have a problem which i think has a simple solution but which i and others haven't yet cracked. I want to display text output to a text box in monospaced font. At the moment the style sheet is shown below, I have tried various other options such as specifying a specific font such as Courier New. None of the browsers I have tried (Safari, Firefox on OSX, IE) display as monospace, although the last 2 come close. I wonder whether I need a <pre> tag, but I can't see how to do that in Zen.

Suggestions?

XData Style
{
<style type="text/css">
/* style for title bar */
/* style for text box, non proportional (although in practice doesnt work)*/
#txaSPRINT {
   background: #C5D6D6;
   color: black;
   font-family: monospace, monospace;
   font-size: 1em;
   padding: 5px;
}
</style>
}

Discussion (1)0

Log in or sign up to continue

Michael Smart · Nov 7, 2016

Hi Ray,

You can use the <html> Zen component to insert raw HTML content into your page. There are a number of different approaches that use this component to display monospaced text, but I'll highlight just one.

First, add an <html> component to your XData Contents block, as follows:

<html id="txaSPRINT"></html>

The id of the component is "txaSPRINT" which matches the CSS in your XData Style block. This means the contents of the <html> component will be monospaced text; you do not necessarily need a <pre> tag. The only thing left is to insert the text, which you could do with the following javascript method:

ClientMethod updateMonospaceTextbox(content) [ Language = javascript ]
{
	zen('txaSPRINT').setContent(content)
}

You can also update the text from the server, using this ZenMethod:

Method UpdateTextbox(content As %String) [ ZenMethod ]
{
	Set textbox = ..%GetComponentById("txaSPRINT")
	Set textbox.content = content
}

0 0