Question
Ray Hitchins · Nov 7, 2016

Monospace output from Zen

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>
}
 

0
0 199
Discussion (1)1
Log in or sign up to continue

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
}