BoostCake(CakePHP + Bootstrap)でHorizontal formに横並びのテキストボックスを作る | 14時の間食
BoostCakeを使ってCakePHP & Bootstrapなサイトを作っていると、Horizontal formの中にInline formのような横並びのテキストボックスを作りたい場面が時々出てきます。 例えば名前の「姓」「名」や、郵便番号の上3桁と下4桁などが2つのテキストボックスに分かれている場合、2行に分けて表示せずに1行で横に並んで欲しいんですよね。 色々試行錯誤したところ、バリデーションエラーをきちんとそれぞれのテキストボックスの下部に表示させつつ、レスポンシブにも対応させるとなると、それなりに記述に工夫が必要だったのでメモしておきます。 前提 CakePHP2.6.10 BoostCakeプラグイン(導入済み) Bootstrap3.3.5 以上の環境で制作しています。 完成形 こんな感じです。 「お名前」「フリガナ」「郵便番号」が横並びを実現した箇所になっています。
BoostCake - Bootstrap3 examples
Default styles Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls. Legend <?php echo $this->Form->create('BoostCake', array( 'inputDefaults' => array( 'div' => 'form-group', 'wrapInput' => false, 'class' => 'form-control' ), 'class' => 'well' )); ?> <fieldset> <legen
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HugeDomains.com
