Th forms WG recently resolved to make hint/@appearance='minimal' put the
hint inside the input in a desktop or mobile browser.
I propose that XSLTForms use @appearance='compact' for its current
behavior (an icon with mouseover).
Many graphic designers want more control over hint appearance, so I
propose @appearance='full' place the hint text inline after the form
control.
<span class="xforms-hint*xforms-appearance-full*">
/ ... no span/@class='xforms-hint-icon"
... rest is the same ...
/</span>
In the @appearance='compact' case I propose
<span class="xforms-hint *xforms-appearance-compact*">
/ ...rest is the same ...
/ </span>
XSLTForms does not yet implement appearance='minimal' but when it does I
suspect it will use the HTML5 @placeholder when that is available, so
the form author should not rely on a span whose class is
xforms-appearance-minimal.
The changes below to xsltforms.css are the minimal to demonstrate the
functionality. It might be better to output class="xforms-hint
xforms-appearance-compact" even when there is no @appearance; then the
default CSS would style only that the case
.xforms-hint.xforms-appearance-compact, and the form author CSS could
style .xforms-hint.xforms-appearance-full and not have to override any
CSS behavior.
1. Add hint/@appearance='full'. Make current behavior (and default with
no @apperance) hint/@appearance='compact'
Index: xsltforms.css
===================================================================
--- xsltforms.css (revision 66884)
+++ xsltforms.css (working copy)
@@ -225,6 +225,17 @@
box-sizing : border-box;
}
+span.xforms-hint.xforms-appearance-full > span.xforms-hint-value {
+ display : inline;
+ border : none;
+ white-space: normal;
+ background-color : transparent;
+ white-space: normal;
+ margin-top : 0px;
+ margin-left : 20em;
+ width : 200px;
+}
+
span.xforms-alert {
display : none;
}
Index: xsltforms.xsl
===================================================================
--- xsltforms.xsl (revision 66884)
+++ xsltforms.xsl (working copy)
@@ -1215,8 +1215,17 @@
</xsl:if>
</span>
<xsl:if test="xforms:hint">
- <span class="xforms-hint">
- <span class="xforms-hint-icon"
onmouseover="XsltForms_browser.show(this, 'hint', true)"
onmouseout="XsltForms_browser.show(this, 'hint',
false)"> <xsl:text/></span>
+ <xsl:variable name="ha" select="xforms:hint/@appearance" />
+ <span>
+ <xsl:attribute name="class">
+ <xsl:choose>
+ <xsl:when test="$ha">xforms-hint xforms-appearance-<xsl:value-of
select='$ha' /></xsl:when>
+ <xsl:otherwise>xforms-hint</xsl:otherwise>
+ </xsl:choose>
+ </xsl:attribute>
+ <xsl:if test="$ha='compact' or not($ha)">
+ <span class="xforms-hint-icon"
onmouseover="XsltForms_browser.show(this, 'hint', true)"
onmouseout="XsltForms_browser.show(this, 'hint',
false)"> <xsl:text/></span>
+ </xsl:if>
<xsl:variable name="hid">
<xsl:choose>
<xsl:when test="xforms:hint/@id"><xsl:value-of
select="xforms:hint/@id"/></xsl:when>
@@ -1231,10 +1240,10 @@
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
- <span class="xforms-hint-value" id="{$hid}">
- <xsl:apply-templates select="xforms:hint/node()"/>
- </span>
- </span>
+ <span class="xforms-hint-value" id="{$hid}">
+ <xsl:apply-templates select="xforms:hint/node()"/>
+ </span>
+ </span>
</xsl:if>
<xsl:if test="xforms:help[not(@appearance='minimal')]">
<span class="xforms-help">
------------------------------------------------------------------------------
Try before you buy = See our experts in action!
The most comprehensive online learning library for Microsoft developers
is just $99.99! Visual Studio, SharePoint, SQL - plus HTML5, CSS3, MVC3,
Metro Style Apps, more. Free future releases when you subscribe now!
http://p.sf.net/sfu/learndevnow-dev2
_______________________________________________
Xsltforms-support mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/xsltforms-support
