nlog(n): input 要素を幅いっぱいに表示する

Fri February 22, 2008

input 要素を幅いっぱいに表示する

input 要素は，Firefox2 と IE6 では欄の長さが違って表示されてしまう。MT 4.1 の管理画面では，この問題が解決されている。

■ ■ ■

Firefox2 と IE6 では，input 要素の size 指定が同じであっても，幅が違って表示されてしまう (AOL Q&A広場 Firefoxとie6での表示の違い)。Movable Type Open Source 4.1 の管理画面 (操作メニュー) では，この問題が解決されている。input 要素の幅を横いっぱいにしたいときに限ってではあるが，Firefox 2.0 と Internet Explorer 6.0 で同じように表示させる方法がある。このテクニックはプラグインを書く場合に応用できる。

先日公開したプラグインでは，設定画面において，値を入力する欄に input 要素を使った (nlog(n): リダイレクタ追加プラグイン 0.10)。

細かい指定を省いて構造だけ示すと，次のようになっていた。label は trans 後だとする。

<mt:App:Setting label="リダイレクタのURL">
<input name="redirector" id="redirector" size="35" value="..." />
</mt:App:Setting>

[Firefox2] input 欄は横幅より少し短い (size=35)

(Firefox2)

[IE6] input 欄がかなり短い

(IE6)

この指定では，Firefox2 では入力欄が長く表示されるのだが，IE6 では短くなってしまう。

MTOS 4.1 の操作メニューの HTML ソースを見てみると，「full-width」というクラスがあるのを発見した。CSS では，width: 100% と指定されている。そこで，このクラスを input 要素に属性として追加してみることにした。

<mt:App:Setting label="リダイレクタのURL">
<input name="redirector" id="redirector" class="full-width" size="35" value="..." />
</mt:App:Setting>

[Firefox2] input 欄は横幅いっぱいになる

(Firefox2)

[IE6] input 欄が改行されてしまう

(IE6)

すると，Firefox2 では幅いっぱいになるが，IE6 では改行されて，input 欄だけで幅いっぱいになってしまう。もう少しよく見てみると，input 要素が textarea-wrapper クラスで囲まれていることが分かった。そこで，次のように書いてみることにした。

<mt:App:Setting label="リダイレクタのURL">
   <div class="textarea-wrapper">
   <input name="redirector" id="redirector" class="full-width" size="30" value="..." />
   </div>
</mt:App:Setting>

[Firefox2] input 欄が幅いっぱいまで表示されている

(Firefox2)

[IE6] input 欄が幅いっぱいまで表示されている

(IE6)

成功である。これで Firefox2, IE6 ともに，input 要素の幅がいっぱいまで表示されるようになった。この手法を使えば，input 要素の size の値が 30 でも 35 でも同じ幅になる。

プラグインのテンプレートは，操作メニューに表示されるときには変換がかかる。変換後は次のようになる。

<div class="field-inner">
   <div class="field-header">
   <label id="redirector-label" for="redirector">リダイレクタのURL</label>
   </div>
   <div class="field-content">
   <div class="textarea-wrapper">
   <input name="redirector" id="redirector" class="full-width" size="30" value="..." />
   </div>
   </div>
</div>

CSS は次の通り。「create-inline 」クラスがどこで使われているのかは見つけることができなかった (HTML ソースの中に出てこない)。

input,
textarea {
   margin:0;
   padding:0;
}
.create-inline .field-inner,
.create-inline .field-content,
.create-inline .field-header label {
   display:inline;
   margin:0;
   border:0;
   padding:0;
   text-align:left;
   width:auto;
}
.textarea-wrapper {
   border:1px solid #ccc;
   background-color:#fff;
   padding:0 4px;
}
.textarea-wrapper input {
   border:0;
}
.full-width {
   width:100%;
}

CSS のどこがポイントなのか，私は実はよく理解していない。あまり興味がないからである。とは言っても，この実装は上手くいっているので，プラグインのテンプレートにも利用すべきだろう。nlog(n) - リダイレクタ追加プラグインのバージョンをあげておく。

Posted by n at 2008-02-22 23:33 | Edit | Comments (0) | Trackback(0)

Trackbacks

「手違いで複数トラックバックを送ってしまった!」という場合でも気にしないでください (重複分はこちらで勝手に削除させていただきます)
タイムアウトエラーは，こちらのサーバの処理能力不足が原因です (詳細はトラックバック送信時のエラーをご覧ください)
トラックバックする記事には，この記事へのリンクを含めてください(詳細は迷惑トラックバック対策をご覧ください)

Comments