1. Posts/

Spring Roo :: Adjusting Textarea rows and cols (width and height)

···
java Spring Roo

If you have been using Spring Roo for rapid application development, you know how messy things can get when you need UI customization. You could try to override the default standard.css for most cases. But things like adjusting the rows and columns in Textarea is not that easy. Spring Roo uses Apache Tiles, jspx, tagx and Dojo extensively for UI manipulation. So customization can be a a bit hard, when you are a beginner. I had to set rows and columns for textarea in the form as it always defaulted to rows="3" and cols="20".

textarea.tagx can be found at the following location.

1
src/main/webapp/WEB-INF/tags/form/fields/textarea.tagx

I tried editing the textarea.tagx file to add cols and rows attributes to the form:textarea tag.

1
<form:textarea cols="${cols}" id="_${sec_field}_id" path="${sec_field}" disabled="${disabled}" rows="${rows}"/>

But this gets overridden when viewed in the browser. This behaviour is because dijit.form.SimpleTextarea widget is applied to the textarea after the DOM is loaded. So we have to set cols and rows as the dijit.form.SimpleTextarea widget’s attributes.

1
2
3
4
5
6
7
8
9
Spring.addDecoration(new Spring.ElementDecoration({
    elementId : '_${sec_field}_id',
    widgetType : 'dijit.form.SimpleTextarea',
    widgetAttrs : {
        cols: ${cols},
        disabled : ${disabled},
        rows: ${rows}
    }
}));

I have done modification in textarea.tagx to include cols and rows as attributes. The full textarea.tagx can be found in the following gist.

Please note: The file is given .jsp extension to enable formatting in the gist. You just need textarea.tagx.

Copy and paste this code to your existing textarea.tagx to enjoy the benefits of cols and rows attributes.

Usage
#

Use this tagx as you would use the shipped textarea.tagx, with the new attributes.

1
<field:textarea cols="10" field="field" id="c_id" required="true" rows="40" z="/vGKcV8LFnbjXO2Rf9V1g3MB35o="/>