Home » forums » General » Samples and tutorials

Hint text is one word per line (also embedded Sidewinder layout is not the same as viewed in IE 7.0)

dean's picture
Submitted by dean on Thu, 2007-04-26 12:15.

I've recently become interested in XForms and formsPlayer and Sidewinder. I'm currently just evaluating the technology and the 2 products mentioned.

After going through the article: Re-using Sidewinder components inside your own applications, I have a Visual C++ .Net 2003 Windows Forms application which I can use to test documents using the formsPlayer XForms processor and Sidewinder renderer.

Then, I followed the article: Feet First...Some Basics, and here are some anomalies that I don't understand.

The Hint text for any of the controls always displays as 1 word per line, for example, the first hint in the article looks like this either in IE 7.0, Sidewinder Viewer, and my .Net App:

Please
enter
the
URL
for
the
link
you
want
to
store

Other controls show similar hints in this fashion.

Also, the layout of the controls does not display in Sidewinder Viewer 2.0 and my embedded .Net App as the example illustrates. It does display correctly in IE 7.0 as in the example illustrations.

I also downloaded the final html document for this particular example from the CVS links and it acts the same way. I've checked and re-checked the html file that I created against the article and I'm sure it is the same.

Maybe it's my video driver setting, internet settings, or something else in my system that is making these views different than what I see in IE 7.0. Although IE 7.0 is also showing the 1 word per line hints also.

I'm running with Windows XP SP2 with any and all updates from Microsoft, Visual Studio .Net 2003 w/SP1, formsPlayer 1.5.2.1001, Sidewinder Viewer 2.0, IE 7.0, and Norton SystemWorks 2007 (which I don't think has anything to do with it).

I'll continue to try to figure out what is going on. If anyone has any suggestions as to why this may be happening and maybe has a solution, I would appreciate any help I can get.

‹ Samples Rendered different with Sidewinder 2.0 (vs IE 7.0) Examples and tutorials covering Custom Controls ›
»

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
Mark Birbeck's picture

Differences between quirks mode in IE6 and IE7

Submitted by Mark Birbeck on Thu, 2007-04-26 13:56.

Hi Dean,

I have a feeling that the display problem you are describing is to do with the way that IE7 no longer uses the <?xml> prolog to indicate quirks mode for CSS formatting, as described here. The screenshots in the tutorials used IE6, which would have been in quirks mode because of the XML prolog, but in IE7 the exact same source document would be running in standards-compliant mode.

Is it possible to copy up the document you are using, so that we can see how you have it set up?

Regards,

Mark

--
Mark Birbeck, formsPlayer
http://www.formsPlayer.com | http://internet-apps.blogspot.com
standards. innovation.

»
Mark Birbeck's picture

Probably a problem with the default style on xf:hint

Submitted by Mark Birbeck on Thu, 2007-04-26 13:34.

Hi Dean,

You're right that the width of hints is quirky--we'll take a look at that. As a quick workaround you can set the width of your hints using CSS. For example, you could add a rule to your stlyesheet:

xf\:hint { width: 200px; }

or add the style directly:

<xf:input ref="name">
  <xf:label>Name:</xf:label>
  <xf:hint style="width: 200px;">
    Please enter your name.
  </xf:hint>
</xf:input>

You can also change things like the background colour, borders, font size, and so on.

Mark

--
Mark Birbeck, formsPlayer
http://www.formsPlayer.com | http://internet-apps.blogspot.com
standards. innovation.

»
dean's picture

Hints working better now in IE7 (Sidewinder rendering problems)

Submitted by dean on Fri, 2007-04-27 03:53.

Thanks for the advice on the hints. That seemed to have alleviated the hint problem in IE7.

Now, I need to comment on Sidewinder and ask a few more questions:

In the latest Sidewinder viewer 2.0, the same document that displays the controls correctly in IE7, does not display correctly in Sidewinder. I'll focus my comments on Sidewinder because I believe the same renderer fixes will allow my embedded Sidewinder rendering application to function in the same ways as the Sidewinder viewer is functioning.

First, in Sidewinder, the hints are still single word per line, even with the hint width set to 200px.

Second, the second and subsequent labels, input, select1, and select controls are displayed on the same line as the URL label and input control. Depending upon the size of the window, the controls will move around as if they never got the command to be on separate lines to begin with:

xf\:input,
xf\:select,
xf\:select1,
xf\:textarea,
xf\:output
{
width : 100%;

Third, the labels align vertically to the bottom of the control height, whereas the examples in the tutorial show them at the top. This happens in IE7 and Sidewinder.

Fourth, if I put the hint command for the "description" textarea before the help command, the hint does not function properly. Putting the hint after the help works. This happens in IE7 and Sidewinder.

And finally, some question specifically about the Sidewinder renderer: When will there be a significant update to it, fixing these and other problems? And, is there another option for embedding XForms functionality into an application other than the Sidewinder renderer?

Here is my document:

<?xml version="1.0" encoding="utf-8"?>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
>
<head>
<object width="0" height="0" id="formsPlayer"
classid="CLSID:4D0ABA11-C5F0-4478-991A-375C4B648F58"
codebase="http://skimstone.x-port.net/files/releases/formsPlayer1.4.3.1028.cab#Version=1,4,3,1028"
>
<b>formsPlayer has not been installed.</b>
</object>

<?import namespace="xf" implementation="#formsPlayer"?>

<title>Submit link to del.icio.us</title>

<style type="text/css">
html
{
font-family : "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
font-size : x-small;
}

xf\:input,
xf\:select,
xf\:select1,
xf\:textarea,
xf\:output
{
width : 100%;
padding-top : 0.4em;
padding-bottom : 0.1em;
border-bottom : #d0c49d 1px dashed;
}

xf\:hint
{
width : 200px;
}

.input-value,
.select-value,
.select1-value,
.textarea-value
{
background-color : lightgreen;
}

xf\:input xf\:label,
xf\:select xf\:label,
xf\:select1 xf\:label,
xf\:textarea xf\:label
{
width : 12em;
vertical-align : middle;
margin-right : 0.2em;
}

.pc-enabled
{
-event-xforms-enabled : fx-Effect-Highlight();
}
</style>

<xf:model>
<xf:submission id="sub-add-link" action="http://del.icio.us/api/posts/add" method="get">
<xf:message level="modal" ev:event="xforms-submit-error">
Please ensure that you have entered both a
URL <em>and</em> a title.
</xf:message>
</xf:submission>

<xf:bind nodeset="url" required="true()" />
<xf:bind nodeset="description" required="true()" relevant="../url != ''" />
<xf:bind nodeset="extended" relevant="../url != '' and ../description != ''" />
<xf:bind nodeset="tags" relevant="../url != '' and ../description != ''" />
<xf:bind nodeset="replace" relevant="../url != '' and ../description != ''" />
<xf:bind nodeset="dt" type="xs:date" relevant="../url != '' and ../description != ''" />

<xf:setvalue ev:event="xforms-ready" ref="replace">yes</xf:setvalue>
</xf:model>
</head>

<body>
<xf:input ref="url">
<xf:label>URL:</xf:label>
<xf:hint>Please enter the URL for the link you want to store</xf:hint>
</xf:input>

<xf:input ref="description">
<xf:label>Title:</xf:label>
<xf:hint>Enter a <strong>title</strong> for the link</xf:hint>
</xf:input>

<xf:textarea ref="extended">
<xf:label>Description:</xf:label>
<xf:help>
As well as providing a title for your link, del.icio.us
allows you to add a full description.
</xf:help>
<xf:hint>Enter a <strong>description</strong> for the link</xf:hint>
</xf:textarea>

<xf:select ref="tags" appearance="full">
<xf:label>Tags:</xf:label>
<xf:hint>Enter some <em>tags</em> for the link</xf:hint>
<xf:item>
<xf:label>XForms</xf:label>
<xf:value>xforms</xf:value>
</xf:item>
<xf:item>
<xf:label>Skiing</xf:label>
<xf:value>skiing</xf:value>
</xf:item>
</xf:select>

<xf:input ref="dt">
<xf:label>Date:</xf:label>
<xf:hint>Enter a date to store with this link</xf:hint>
</xf:input>

<xf:select1 ref="replace" appearance="full">
<xf:label>Replace:</xf:label>
<xf:hint>
Set this to <em>no</em> to prevent
del.icio.us from overwriting a previous entry
for the same link, if one exists.
</xf:hint>
<xf:item>
<xf:label>Yes</xf:label>
<xf:value>yes</xf:value>
</xf:item>
<xf:item>
<xf:label>No</xf:label>
<xf:value>no</xf:value>
</xf:item>
</xf:select1>

<xf:submit submission="sub-add-link" ref="extended">
<xf:label>
<img src="http://del.icio.us/static/img/delicious.gif" alt="" />
Save
</xf:label>
</xf:submit>
</body>

</html>

»

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.