0

テキスト領域に「列」を追加しようとしています。

私はフォームを持っています

$f->addField('テキスト','フィールド'); $f->getElement('field')->setAttr('rows','8');

「rows」プロパティを設定するとテキストエリアに行を追加できますが、「cols」プロパティを設定すると正しく表示されません。

生成された html を調べると、textarea はプロパティ 'cols' を正しく設定していますが、展開されません

誰でも助けてくれますか？

ありがとう

4

1 に答える 1

0

簡単な答えは、@scrappedcola が指摘したように、CSS がテキストエリアに影響を与えているということですが、この問題についてもう少し詳しく説明します。

なんで100%なの？

すべてのフォーム フィールドは幅の 100% を占めます。フォームをよりコンパクトにする必要がある場合は、幅を制限するグリッド列に配置できます。また、水平フォームを使用してスペースを節約したり、複数の列に流したりすることもできます。ここにデモがあります: http://agiletoolkit.org/codepad/gui/formstyle

どこに設定されていますか？

テキストエリアのインスペクターを開くと、テキストエリアに割り当てられている 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 ファイルを作成して、テキストエリア フィールドの幅を別の方法で設定できます。

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

手動で設定することもできます:

$f->addField('text','field');
$f->getElement('field')->setAttr('style','width: 50%');
于 2012-08-02T10:22:13.720 に答える