textarea字段getElement（）

Question

我试图在文本区域添加更多“列”。

我有一个带

的表格

$ F-＆GT;激活addField（ '文本'， '场'）; $ F-＆GT; getElement（ '场'） - ＆GT; SETATTR（ '行'， '8'）;

如果我设置'rows'属性，我可以向textarea添加更多行，但是如果我设置'cols'属性它不显示正确。

如果我检查生成的html，textarea正确设置了属性'cols'，但它没有扩展它

任何人都可以提供帮助吗？

感谢

Answer 1

简短的回答是CSS正在影响textarea，正如@scrappedcola指出的那样，但我会就此问题提供更多信息。

为什么是100％？

所有表单字段占用宽度的100％。如果您需要更紧凑的表单，可以将其放入网格列，这将限制它的宽度。您还可以使用水平形式来节省空间或使其在多列中流动。这是一个演示：http://agiletoolkit.org/codepad/gui/formstyle

它在哪里设置？

如果您打开textarea的检查器，您可以找到为textarea分配的CSS属性：

点击StyleRules下的箭头（这是safari，但firefox的firebug插件类似），您可以在atk-main.css文件中看到以下规则：

.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%;
}

atk-main.css来自atk-main.less文件：

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;}
    }
}

如何覆盖？

您可以创建一个本地CSS文件，以不同的方式设置您的textarea字段的宽度。

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

您也可以手动设置：

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