topic Problem with control-param for field size (columns) in Alfresco Archive

Problem with control-param for field size (columns)

devodl — Fri, 02 Dec 2011 13:22:19 GMT

Using Alfresco 4.0.c, Share, 3-column-edit-form.ftl to Edit propertiesWe 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>

Re: Problem with control-param for field size (columns)

erikwinlof — Mon, 05 Dec 2011 10:59:52 GMT

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

Re: Problem with control-param for field size (columns)

devodl — Mon, 05 Dec 2011 15:53:43 GMT

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

Re: Problem with control-param for field size (columns)

unknown-user — Mon, 02 Jul 2012 21:31:59 GMT

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

Re: Problem with control-param for field size (columns)

devodl — Mon, 02 Jul 2012 21:38:20 GMT

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

Re: Problem with control-param for field size (columns)

ltardioli — Fri, 05 Oct 2012 20:08:33 GMT

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.