JSFのタグを使って画面を作っているのですが、
いろいろと試行錯誤しているときにぶつかった問題。
commandButtonより下にinputを配置すると、レイアウトの崩れが発生する、という現象が起こりました。
実際の開発ソースではBootstrapを使用してデザインを行っているのですが、
本当は横に４つテキストボックスが並ぶはずなのに、
1個目で改行されてしまうというか、なんかぐちゃっと並んでしまう。
ブラウザ上からソースをチェックしてみると、h:inputTextから展開されたinputタグ、
最後にスラッシュがついているにも関わらず、閉じタグがさらにくっついている！
どんな感じかというと、
<h:inputText value="#{hogehoge.hoge}" />
こういうのが
<input type="text"" value="hoge" /></input>
こんな感じになってしまっているという。
ちなみに、最後を閉じタグの形式（<h:inputText></h:inputText>）にしても
同様の現象が発生しました。
なんじゃこりゃ！？
commandButtonがinputの下にあるときは問題ないようなんだけど、
画面デザイン的にそれはできない。
inputにjsf:を突っ込んでみてもダメ。
結局どうしたかというと・・・h:commandlinkに逃げました…。
根本原因はわからず。とりあえず、h:commandlinkでも望みの動作はしてくれるし、
Bootstrapのcssさえちゃんと指定すれば、見た目も同じになるしってことで。
今後また何かの拍子に発生することもあるかもしれないので、メモ
いろいろと試行錯誤しているときにぶつかった問題。
commandButtonより下にinputを配置すると、レイアウトの崩れが発生する、という現象が起こりました。
実際の開発ソースではBootstrapを使用してデザインを行っているのですが、
本当は横に４つテキストボックスが並ぶはずなのに、
1個目で改行されてしまうというか、なんかぐちゃっと並んでしまう。
ブラウザ上からソースをチェックしてみると、h:inputTextから展開されたinputタグ、
最後にスラッシュがついているにも関わらず、閉じタグがさらにくっついている！
どんな感じかというと、
<h:inputText value="#{hogehoge.hoge}" />
こういうのが
<input type="text"" value="hoge" /></input>
こんな感じになってしまっているという。
ちなみに、最後を閉じタグの形式（<h:inputText></h:inputText>）にしても
同様の現象が発生しました。
なんじゃこりゃ！？
commandButtonがinputの下にあるときは問題ないようなんだけど、
画面デザイン的にそれはできない。
inputにjsf:を突っ込んでみてもダメ。
結局どうしたかというと・・・h:commandlinkに逃げました…。
根本原因はわからず。とりあえず、h:commandlinkでも望みの動作はしてくれるし、
Bootstrapのcssさえちゃんと指定すれば、見た目も同じになるしってことで。
今後また何かの拍子に発生することもあるかもしれないので、メモ