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.