atk4 - 文本区域字段 getElement()

Question

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

我有一个表格

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

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

如果我检查生成的 html，则 textarea 已正确设置属性“cols”，但不会扩展它

有人帮忙吗？

谢谢

Answer 1

简短的回答是，正如@scrappedcola 所指出的那样，CSS 正在影响文本区域，但我会就此事提供更多信息。

为什么是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%');