[Seasar-user:7815] Re: [Teeda]Gridの列幅に、スタイルシートのpadding値が加算されてしまう

2007年 5月 25日 (金) 09:10:51 JST

大谷さん

こちらも他の作業に追われていてペンディングしていました。昨日に
なって時間が取れたのでじっくり見てみたところ、解決策と思われる(？)
方法を見つけました。多少長文になりますがお許しください。

ずいぶんと試行錯誤してみて、この現象の意味がやっとわかりました。

「Teedaの生成htmlで列幅の設定がセル中の<div>要素に対して為されて
いるため、同一の<div>に対するpadding設定とあいまって実際の表示幅は
width+padding になってしまう。
表示幅が width+padding（本当はwidth+padding+borderですが、
borderでの差は小さいのでここでは無視させて頂きますm(_ _)m）と
なるのはFirefox独自ではなく、標準仕様。ＩＥでの表示幅はwidthだけで
paddingは反映されないが、実はこっちの方が非標準。」

ということだったようです。私はスタイル設定に関して全然知識がなく、
初めて理解しました。で、Teeda1.0.3を使うとなぜ現象が起きないのか
については、スクリプトを見比べたところ、1.0.3の方では列幅調整の
コードで「.style.width = 数値」となっているのですが、Firefoxでは
これが効かず、1.0.4で「.style.width = 数値 + 'px'」に修正されて、
そこで初めて効いたということだったようです。1.0.3までは「大丈夫」
だったと思ってたら、逆で、単に効いてなかっただけでした。(^^;

Teedaのgridでは、Rightテーブルの表示幅が小さい場合に自動的にスクロール
表示する意図から、出力するhtmlでの列幅の設定は<th>ではなく<div>の
スタイルに変換されているのですね。たとえテンプレートの<th>で設定されて
いるものでも、あえて<div>に振りなおしていると。

ところがこれにより、W3C標準に従うFirefoxでの列の表示幅は、
<div>のスタイルのwidth+pddingになってしまうので、ここでIEでの表示と
差が出てしまっているわけですね。

もしもTeedaが<div>ではなく<th>および<td>に対して幅設定を出力していたら
この差は出なくなりますが、それだと上述のスクロール表示がされず、単に
テーブル幅が縮小表示されてしまうので、非常に悩ましいところです。

そこで、とりあえず次のような前提に従って考えてみることにしました。

１．設計者が列幅を固定しようと考える場合、必然的にテンプレート上で<th>に
対してサイズ固定を行う。

２．設計者がセルにpaddingを設定しようと考える場合、class="gridCell" に
対してpadding設定を行う。

１は、デザイナはそもそもテンプレートの段階で、Teedaが吐き出す予定の
<div>を意識することは出来ないので、自明です。

２では、<th><td>に対してpadding設定することも考えられますが、
「セル内のスタイルは.gridCellに」というのがTeedaのgridのアプローチと
思いますので、それがスタンダードと考えることにします。

その前提でForefoxのwidth+padding表示を見ると、これは仕様としては確かに
標準だけれども、設計者が<th>の列幅として意図した設定がTeedaによって
<div>の列幅にすり替えられているだけなので、本来はpaddingを含まずwidth
のみの幅で「表示されて欲しい」ものだと言えます。ですので、その要求を
うまく処理するために、設定値より表示幅が大きい場合は、設定値を調整して
意図した表示幅に修正してしまう（それをスクリプトでやってしまう）という
考えで良いのではないかと思います。

ただ困ったことに(Firefoxでしか確認していませんが)CSSファイルで設定した
paddingの値は、なぜかスクリプト中で（object.style.paddingで）参照する
ことが出来ず、何も設定されてないことになっており、offsetWidthにのみ、
その値が反映（つまりwidth+padding）されているようなのですorz..
（ちなみにスクリプト中でpaddingを設定したものなら参照出来ます・・・）
paddingが判らないとセルの設定幅(style.width)と実表示幅(offsetWidth)の
差を事前に解決することが出来ません。仕方がないので、とりあえずは
style.widthをセットしてみて、もしoffsetWidthとの差が出たら、その差分
だけstyle.widthから引いてやる、なんてことが必要なようです。

あと、そもそもデザイナが列幅の固定を考える場合、中身の文字列の幅とか
関係なく、有無を言わさず固定したいと思っているはず(^^;)ですので、
列幅調整スクリプト中で言えば、originalWidth がいつも優先されるような
扱いが望ましいのではないかと思います。

というわけで、これらを盛り込むためにTHtmlGrid.jsの「_adjustWidth」を
書き換えてみたところ、意図したとおりに動いたので添付いたします。
このコードは、さらに以下の問題への対処も含んでいます。

IEでの問題
・列幅を固定する場合、同列の全行のセルのスタイルにwidth設定が必要。

widthを設定していないセルで、データ幅が意図する列幅よりも大きいもの
が一つでも存在すると、列幅自体がそのデータ幅にひきずられてしまいます。
そのためセルのwidth設定は、bodyTableの最初の有効な一行だけでなく、
全行に対して行う必要があるようです。

私のところ（だけですか？）ではこういう状況になったため、全行対象に
ループする様にとりあえず変更してみました。
ただしこの処理をいつもやっていると、データ量が多いときにはハンパじゃ
なくなりますので、全行対象を有効にするかどうかのオプションスイッチが
必要になりますが。。

以上、すみませんが、ご確認宜しくお願いいたします。

Shinpei Ohtani wrote:

>緑川さん、津田さん、
>
>大谷です。
>
>すいません、こちらの件もう少し時間ください。
>宜しくお願いします。
>
>07/05/18 に Tetsuya Midorikawa<[E-MAIL ADDRESS DELETED]> さんは書きました:
>  
>
>>緑川です。
>>
>>大谷さん、対応ありがとうございます。
>>
>>こちらでもまだ現象の再現性を確認したところまでですが、
>>以下の手順で１００％再現しますのでご確認をお願いします。
>>
>>１．Dolteng 0.18.3 にて、Churaプロジェクト（Super Agile）を新規作成
>>２．DatabaseViewより、適当なテーブルでScaffoldを生成
>>３．生成された xxxxList.html で、gridのthead/tbodyの各列にwidthを設定
>>４．実行し、ヘッダ部とボディ部の幅が等しく表示されるのを確認
>>５．global.cssの .gridCellに padding-left: 5px; padding-right: 5px; を設定
>>６．実行するとボディの列幅がヘッダ部より大きくなって表示される
>>７．WEB-INF/libに teeda-extension-1.0.3.jarを配備してTomcatを再起動
>>８．実行すると、元通りヘッダ幅とボディ幅が等しく表示される
>>
>>以上です。
>>デフォルトのglobal.cssの .gridCell に手を入れただけで再現します。
>>ちなみに当方では、global.css を以下のように編集して、罫線とpaddingを
>>確認しやすくしています。
>>
>>.gridTable {
>>background-color: black;
>>border-collapse: collapse;
>>}
>>
>>.gridTable th, .gridTable td {
>>border: solid black 1px;
>>}
>>
>>.gridCell {
>>height: 25px;
>>padding-left: 5px;
>>padding-right: 5px;
>>}
>>
>>宜しくお願いいたします。
>>_______________________________________________
>>Seasar-user mailing list
>>[E-MAIL ADDRESS DELETED]
>>https://ml.seasar.org/mailman/listinfo/seasar-user
>>
>>    
>>
>
>
>  
>
-------------- next part --------------
文字コード指定の無い添付文書を保管しました...
名前: adjustWidthTest.js
URL:  http://ml.seasar.org/archives/seasar-user/attachments/20070525/be87b540/attachment.pl 