Problem with control-param for field size (columns)

[devodl]

Using Alfresco 4.0.c,  Share,  3-column-edit-form.ftl to Edit properties

We need the field size (i.e. number of columns) to be smaller (14 columns) for some of the fields.
We modified the share-config-custom.xml as follows:

   <config evaluator="node-type" condition="ds:dsDSP">      <forms>         <form>           <edit-form template="/3-column-edit-form.ftl" />            <field-visibility>               <show id="ds:CustomerName" force="true"/>               <show id="ds:CustomerPhone" force="false"/>               <show id="ds:CustomerEmail" force="false"/>               <show id="ds:ProjectManagerName" force="true"/>               <show id="ds:ProjectManagerPhone" force="false"/>               <show id="ds:ProjectManagerEmail" force="false"/>               <show id="ds:DeveloperName" force="true"/>               <show id="ds:DeveloperPhone" force="false"/>               <show id="ds:DeveloperEmail" force="false"/>            </field-visibility>            <appearance>                <set id="" appearance="bordered-panel" label="Properties: DSP" />                <set id="ds-dscontacts" appearance="fieldset" label="Contacts"/>               <field id="ds:CustomerName" label="Customer Name" set="ds-dscontacts" />               <field id="ds:CustomerPhone" label="Customer Phone" set="ds-dscontacts">                 <control template="/org/alfresco/components/form/controls/textfield.ftl">                   <control-param name="size">14</control-param>                 </control>               </field>               <field id="ds:CustomerEmail" label="Customer Email" set="ds-dscontacts" >                 <control template="/org/alfresco/components/form/controls/textfield.ftl">                   <control-param name="size">14</control-param>                 </control>               </field>               <field id="ds:ProjectManagerName" label="Project Manager Name" set="ds-dscontacts" />               <field id="ds:ProjectManagerPhone" label="Project Manager Phone" set="ds-dscontacts" >                 <control template="/org/alfresco/components/form/controls/textfield.ftl">                   <control-param name="size">14</control-param>                 </control>               </field>               <field id="ds:ProjectManagerEmail" label="Project Manager Email" set="ds-dscontacts">                 <control template="/org/alfresco/components/form/controls/textfield.ftl">                   <control-param name="size">14</control-param>                 </control>               </field>               <field id="ds:DeveloperName" label="Developer Name" set="ds-dscontacts" />               <field id="ds:DeveloperPhone" label="Developer Phone" set="ds-dscontacts" >                 <control template="/org/alfresco/components/form/controls/textfield.ftl">                   <control-param name="size">14</control-param>                 </control>               </field>               <field id="ds:DeveloperEmail" label="Developer Email" set="ds-dscontacts" >                 <control template="/org/alfresco/components/form/controls/textfield.ftl">                   <control-param name="size">14</control-param>                 </control>               </field>            </appearance>         </form>      </forms>   </config>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

but when Edit Properties is used it does not appear to affect the output. The fields remain full width.
The control-param is based on the docs: http://wiki.alfresco.com/wiki/Forms#textfield.ftl 
which contains the statements:

textfield.ftl

The textfield control renders a standard HTML text field.

The parameters this controls supports are listed and explained below. None of these are used in 'view' mode.

    styleClass (optional, string): Allows a custom CSS class to be applied to the text field
    style (optional, string): Allows CSS rules to applied directly to the text field
    maxLength (optional, int): Defines the maximum number of characters the user can enter, maps directly to the standard HTML 'maxlength' attribute
   size (optional, int): Defines the number of characters the text field can display, maps directly to the standard HTML 'size' attribute
    activateLinks (optional, boolean): When set to "true" and the form is in "view" mode the control will attempt to display links as active hyperlinks
    forceEditable (optional, boolean): Forces the control to be editable, default is false

but Edit Properties is not 'view' mode is it?

Is this configuration correct?
How can I change the display size of a field?

Thanks,
Steve

[erikwinlof]

That looks like a valid config and should work. Have you inspected the result?

I.e. the:

HTML output from the server, does the field contain a "size" attribute?

If yes, are there any css style selectors that override the "size" attribute?

You will have to use Firefox & Firebug to inspect the the html output & css styles mentioned above since the Start workflow page loads the forms using ajax.
Please do a screen dump if you can't spot the problem.

Cheers, Erik

[devodl]

Erik, Thank you for the response.

Additional info:
I have 9 fields in the field set arranged in 3 columns (name, phone, email) by 3 rows (customer, manager, developer).
I want to control the size of the 2nd and 3rd columns so I specified the width for fields 2,3,5,6,8,9
Since size wasn't working for fields 2,3,5,6 I modified the config to use a style control-param
<control-param name="style">width: 150px</control-param>
and apparently style does affect the field width however trying to set size using:
<control-param name="size">14</control-param>
makes no difference.

The problem manifests itself on the Edit Properties page so I could simply examine the page source and the HTML for fields #8 and #9 (near the bottom) do show the size="14" attribute.  The HTML for the fieldset looks like this:

   <div class="set">         <fieldset><legend>Contacts</legend>         <div class="yui-gb"><div class="yui-u first"><div class="form-field">         <label for="template_x002e_edit-metadata_x002e_edit-metadata_x0023_default_prop_ds_CustomerName">Customer Name:<span class="mandatory-indicator">*</span></label>      <input id="template_x002e_edit-metadata_x002e_edit-metadata_x0023_default_prop_ds_CustomerName" name="prop_ds_CustomerName" tabindex="0"             type="text"             value=""              /></div>         </div>                  <div class="yui-u"><div class="form-field">         <label for="template_x002e_edit-metadata_x002e_edit-metadata_x0023_default_prop_ds_CustomerPhone">Customer Phone:</label>      <input id="template_x002e_edit-metadata_x002e_edit-metadata_x0023_default_prop_ds_CustomerPhone" name="prop_ds_CustomerPhone" tabindex="0"             type="text"             style="width: 150px"             value=""              /></div>         </div>                  <div class="yui-u"><div class="form-field">         <label for="template_x002e_edit-metadata_x002e_edit-metadata_x0023_default_prop_ds_CustomerEmail">Customer Email:<span class="mandatory-indicator">*</span></label>      <input id="template_x002e_edit-metadata_x002e_edit-metadata_x0023_default_prop_ds_CustomerEmail" name="prop_ds_CustomerEmail" tabindex="0"             type="text"             style="width: 150px"             value=""              /></div>         </div>         </div>         <div class="yui-gb"><div class="yui-u first"><div class="form-field">         <label for="template_x002e_edit-metadata_x002e_edit-metadata_x0023_default_prop_ds_ProjectManagerName">Project Manager Name:<span class="mandatory-indicator">*</span></label>      <input id="template_x002e_edit-metadata_x002e_edit-metadata_x0023_default_prop_ds_ProjectManagerName" name="prop_ds_ProjectManagerName" tabindex="0"             type="text"             value=""              /></div>         </div>                  <div class="yui-u"><div class="form-field">         <label for="template_x002e_edit-metadata_x002e_edit-metadata_x0023_default_prop_ds_ProjectManagerPhone">Project Manager Phone:</label>      <input id="template_x002e_edit-metadata_x002e_edit-metadata_x0023_default_prop_ds_ProjectManagerPhone" name="prop_ds_ProjectManagerPhone" tabindex="0"             type="text"                          style="width: 150px"             value=""              /></div>         </div>                  <div class="yui-u"><div class="form-field">         <label for="template_x002e_edit-metadata_x002e_edit-metadata_x0023_default_prop_ds_ProjectManagerEmail">Project Manager Email:<span class="mandatory-indicator">*</span></label>      <input id="template_x002e_edit-metadata_x002e_edit-metadata_x0023_default_prop_ds_ProjectManagerEmail" name="prop_ds_ProjectManagerEmail" tabindex="0"             type="text"             style="width: 150px"             value=""              /></div>         </div>         </div>         <div class="yui-gb"><div class="yui-u first"><div class="form-field">         <label for="template_x002e_edit-metadata_x002e_edit-metadata_x0023_default_prop_ds_DeveloperName">Developer Name:</label>      <input id="template_x002e_edit-metadata_x002e_edit-metadata_x0023_default_prop_ds_DeveloperName" name="prop_ds_DeveloperName" tabindex="0"             type="text"             value=""              /></div>         </div>                  <div class="yui-u"><div class="form-field">         <label for="template_x002e_edit-metadata_x002e_edit-metadata_x0023_default_prop_ds_DeveloperPhone">Developer Phone:</label>      <input id="template_x002e_edit-metadata_x002e_edit-metadata_x0023_default_prop_ds_DeveloperPhone" name="prop_ds_DeveloperPhone" tabindex="0"             type="text"             value=""             size="14"               /></div>         </div>                  <div class="yui-u"><div class="form-field">         <label for="template_x002e_edit-metadata_x002e_edit-metadata_x0023_default_prop_ds_DeveloperEmail">Developer Email:</label>      <input id="template_x002e_edit-metadata_x002e_edit-metadata_x0023_default_prop_ds_DeveloperEmail" name="prop_ds_DeveloperEmail" tabindex="0"             type="text"             value=""             size="14"               /></div>         </div>         </div>         </fieldset>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I used out of the box UI so no overriding of CSS.
Using Web Developer to examine the style for the "Developer Phone" (field #8) shows the following CSS

http://localhost:8080/share/res/css/base.css* (line 4){margin-top: 0pt;margin-right: 0pt;margin-bottom: 0pt;margin-left: 0pt;}.sticky-wrapper select, .sticky-wrapper input[type="text"], .sticky-wrapper input[type="password"], .sticky-wrapper textarea, .yui-panel-container select, .yui-panel-container input[type="text"], .yui-panel-container input[type="password"], .yui-panel-container textarea (line 455){padding-top: 2px;padding-right: 2px;padding-bottom: 2px;padding-left: 2px;width: 15em;}.form-field input[type="text"] (line 468){width: 30em;}http://localhost:8080/share/res/components/form/form.css.form-container input (line 31){clear: both;width: 30em;}http://localhost:8080/share/res/css/yui-fonts-grids.css.alfresco-share .sticky-wrapper select, .yui-panel-container select, .alfresco-share .sticky-wrapper input, .yui-panel-container input, .alfresco-share .sticky-wrapper textarea, .yui-panel-container textarea, .alfresco-share .sticky-wrapper button, .yui-panel-container button (line 32){font-family: arial,helvetica,clean,sans-serif;font-style: normal;font-variant: normal;font-weight: normal;font-size: 99%;line-height: normal;font-size-adjust: none;font-stretch: normal;-x-system-font: none;}http://localhost:8080/share/res/themes/default/presentation.css.sticky-wrapper input[type="text"], .sticky-wrapper input[type="password"], .sticky-wrapper textarea, .sticky-wrapper select, .yui-panel-container input[type="text"], .yui-panel-container input[type="password"], .yui-panel-container textarea, .yui-panel-container select, .form-element-border, .share-form .yui-dt table (line 472){border-top-width: 1px;border-right-width-value: 1px;border-right-width-ltr-source: physical;border-right-width-rtl-source: physical;border-bottom-width: 1px;border-left-width-value: 1px;border-left-width-ltr-source: physical;border-left-width-rtl-source: physical;border-top-style: solid;border-right-style-value: solid;border-right-style-ltr-source: physical;border-right-style-rtl-source: physical;border-bottom-style: solid;border-left-style-value: solid;border-left-style-ltr-source: physical;border-left-style-rtl-source: physical;border-top-color: #c5d6e2;border-right-color-value: #c5d6e2;border-right-color-ltr-source: physical;border-right-color-rtl-source: physical;border-bottom-color: #c5d6e2;border-left-color-value: #c5d6e2;border-left-color-ltr-source: physical;border-left-color-rtl-source: physical;font-weight: normal;}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Using <control-param name="style">width: 150px</control-param>  gets me closer but size should work.

Thanks for looking at this.
Steve

[unknown-user]

Hi,

Were you able to figure out the issue with "size". I am having the exact same problem and it looks like I'll have to use the "style" param.

Thanks

[devodl]

No, sorry. I've moved on to other work for now.

[ltardioli]

I had this same problem and I wrote a template to add a style param:

<div class="form-field">   <#if form.mode == "view">      <div class="viewmode-field">         <#if field.mandatory && !(field.value?is_number) && field.value == "">            <span class="incomplete-warning"><img src="${url.context}/res/components/form/images/warning-16.png" title="${msg("form.field.incomplete")}" /><span>         </#if>         <span class="viewmode-label">${field.label?html}:</span>         <#if field.control.params.activateLinks?? && field.control.params.activateLinks == "true">            <#assign fieldValue=field.value?html?replace("((http|ftp|https):\\/\\/[\\w\\-_]+(\\.[\\w\\-_]+)+([\\w\\-\\.,@?\\^=%&:\\/~\\+#]*[\\w\\-\\@?\\^=%&\\/~\\+#])?)", "<a href=\"$1\" target=\"_blank\">$1</a>", "r")>         <#else>            <#if field.value?is_number>               <#assign fieldValue=field.value?c>            <#else>               <#assign fieldValue=field.value?html>            </#if>         </#if>         <span class="viewmode-value"><#if fieldValue == "">${msg("form.control.novalue")}<#else>${fieldValue}</#if></span>      </div>   <#else>      <label for="${fieldHtmlId}">${field.label?html}:<#if field.mandatory><span class="mandatory-indicator">${msg("form.required.fields.marker")}</span></#if></label>      <input id="${fieldHtmlId}" name="${field.name}" tabindex="0"              <#if field.control.params.password??>type="password"<#else>type="text"</#if>             <#if field.control.params.styleClass??>class="${field.control.params.styleClass}"</#if>             <#if field.control.params.style??>style="${field.control.params.style}"</#if>             <#if field.value?is_number>value="${field.value?c}"<#else>value="${field.value?html}"</#if>             <#if field.description??>title="${field.description}"</#if>             <#if field.control.params.maxLength??>maxlength="${field.control.params.maxLength}"</#if>              <#if field.control.params.size??>size="${field.control.params.size}"</#if>          <#if field.control.params.width??>style="width:${field.control.params.width}px"</#if>                <#if field.disabled && !(field.control.params.forceEditable?? && field.control.params.forceEditable == "true")>disabled="true"</#if> />      <@formLib.renderFieldHelp field=field />   </#if></div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I'd just added the param width on the textfiel.ftl template.

Well, I dont like this approach, so if someone knows another please let me know.