textarea field getElement()

Question

Iḿ trying to add more "columns" to a text area.

I have a form with

$f->addField('text','field'); $f->getElement('field')->setAttr('rows','8');

If I set 'rows' property I can add more rows to my textarea, but if i set the 'cols' property It doesn't display correct.

If I inspect the generated html, the textarea has correct set the property 'cols' but it doesn't expand it

Anyone as some help ?

thanks

Answer 1

The short answer is that CSS is affecting the textarea as @scrappedcola pointed out, but I'll give a bit more info on the matter.

Why is it 100%?

All the form fields take 100% of the width. If you need form to be more compact, you can place it into a grid column, which will limit it's width. You can also use horizontal form to conserve space or make it flow in multiple columns. Here is a demo: http://agiletoolkit.org/codepad/gui/formstyle

Where is it set?

If you open inspector for the textarea, you can find what the CSS properties are assigned to the textarea:

By clicking on the arrow under StyleRules (this is safari, but firefox's firebug addon is similar), you can see the following rules in atk-main.css file:

.atk-form fieldset .atk-form-row > .atk-form-field
    input[type=text]:not([class*="span"]),
.atk-form fieldset .atk-form-row > .atk-form-field
    input[type=password]:not([class*="span"]),
.atk-form fieldset .atk-form-row > .atk-form-field
    textarea:not([class*="span"]),
.atk-form fieldset .atk-form-row > .atk-form-field select {
  width: 100%;
}

The atk-main.css is generated from atk-main.less file:

fieldset .atk-form-row {
    .clearafter();
    margin-top:@margin/2;
    &:first-child {margin-top:0;}
    &.has-error>label {color:@error;}
    &.has-error input {border-color:@error;}
    >label {font-weight:bold;width:@label;margin-top:0.4em;float:left;}
    >.atk-form-field {
        margin-left:@label+@labelMargin;
        input[type=text]:not([class*="span"]),
        input[type=password]:not([class*="span"]),
        textarea:not([class*="span"]),
        select {width:100%;}
        select {width:100%;margin-top:0.5em;}
        textarea {display:block;margin-bottom:@margin/5;}
        input+input {margin-left:0.4em;}
        .atk-form-error {margin:@margin/5 0 0;color:@error;}
    }
}

How to override?

You can create a local CSS file to set the width of YOUR textarea fields differently.

$this->api->jui->addStaticStylesheet('yourfile');

You can also set it manually:

$f->addField('text','field');
$f->getElement('field')->setAttr('style','width: 50%');