【Struts2】"s:form"タグで囲われた中身の表示が崩れる理由と対処法
<s:form action="XXX">
〜〜
</s:form>
の中(〜〜部分)で書いた文字が予想外の場所に表示されてビックリした話。
以下のように、JSPファイルにs:formタグ内(図では見えませんがこの上に書いてます)でテキストボックスの右側に「個」と書きました。
これで、僕は「 ●個」 という風に表示されるだろうと思って実行してみると、
・・・ファッ( ﾟдﾟ)！？
「購入個」の右側に表示されてる入力フォームも何だか1列下に位置がずれてるし。
最初は意味が分かりませんでした。プログラマカレッジでStruts2を勉強していて1位2位を争うレベルで「！？」ってなったことかもしれません。
"s:form"タグで囲んだデザインが崩れる解決法
これには、２つの解決方法がありそうです。
表示崩れの解決方法
- 各JSPファイルで<s:form action="XXX" theme="simple"> と書く
- struts.xmlファイルで<constant name="struts.ui.theme" value="simple" />と書く
上記①②どちらかを実施すると、以下のように意図した場所に文字がレイアウトされるようになりました。
ちなみに、①の方法は、s:formタグが出てくるたびに指定しないといけないので、struts.xmlファイルに1行付け足すだけで全JSPファイルに適用される②の方法が楽です。
そもそもの原因
なんでこんな意図しない表示崩れが起きるか。
それは、s:formタグは勝手に余計なHTMLタグを生成してしまうからでした。
Struts 2はフォーム内のフィールドやボタンのレイアウトを自動的に行う機能を提供しています。この機能はレイアウトテンプレートを指定することで、様々な制御が可能ですが、今回はJSPの記述のままのレイアウトを生成するよう、<s:form>タグのtheme属性に"simple"を指定しています。
これは表示されたブラウザ画面で右クリックして「ページソースの表示」を見ると一目瞭然です。
theme="simple" を指定した場合としていない場合のソースを見比べると、HTMLタグの構造が明らかに違うことが分かるので一度試してみるといいかも。
ログイン処理やらなんやら「機能」のみに焦点を当てた学習をしているとあまり気にならないのですが、HTML/CSSでデザろうと思った瞬間にこいつらは敵になります。
余計なことしてくれるな、と思ったらstruts.xmlファイルで一撃なのでお試しください。
豆知識 Struts2タグ<s:xxx>をCSSで指定する方法
<s:submit>タグで作ったボタンをCSSでデザろうと思って<s:submit class="button">とかやっても認識してくれないんですよね。
え？なにこれStruts2タグを使うとCSSでデザれなくなるわけ？と思って調べてみると、class="xxx"ではなく
cssClass="xxx"と書く
ことで解決します。つまり、JSP側で<s:submit cssClass="button">と書いたらCSSでは今までと変わらず .button { と書けばOKです。
