ピースペース

bootstrap3で開始/終了時刻の入力コントロールを横並びにする

leave a comment »

作業の開始と終了を報告するのはよくあるパターンで
できれば横に並べて入力したい。も普通の要求で
一方bootstrapでは、.form-controlなinput要素は自動でwidth: 100%;になる。が基本。
で、2つのinputを横に並べる。をやってみた。

方法A: form-inline を使う

   
<div class="form-group">    
  @Html.LabelFor(m => m.StartTime, new { @class = "control-label", @for = "StartTime" })     
  <div class="form-inline">  
    @Html.TextBoxFor(m => m.StartTime, new { id = "StartTime", @class = "form-control timepicker" })    
    @Html.TextBoxFor(m => m.EndTime, new { id = "EndTime", @class = "form-control timepicker" })    
  </div>    
  @Html.ValidationMessageFor(m => m.StartTime, null, new { @class = "help-block" })    
</div>     

class=”form-inline”は、form要素で指定するclassだけどdivでもまったく使えないわけじゃない。
image

しかし、Deviceの幅が768px以下ではinlineじゃなくなる。幅にまだまだ余裕があっても。
けっきょく、やっぱり、form-groupの内側でform-inlineは使えない!と割り切るのが良さげ。

image

方法B: input-group を使う

囲みのclassをform-inline→input-groupに変えてみる。
悪くない! デバイスの表示幅に関わらずちゃんと横に並んでくれる。

image

しかし、なぜか入力コントロールをクリックしても指定しているtimepickerが表示されなくなる??
どっちが悪いのかわからないけど、相性の問題でtimepickerな時刻入力でこの手は使えない

方法C: グリッドシステム を使う

   
<div class="form-group">    
  @Html.LabelFor(m => m.StartTime, new { @class = "control-label", @for = "StartTime" })     
  <div class="row">    
    <div class="col-xs-4">    
      @Html.TextBoxFor(m => m.StartTime, new { id = "StartTime", @class = "form-control timepicker" })    
    </div>    
    <div class="col-xs-1 help-block">~</div>    
    <div class="col-xs-4">    
      @Html.TextBoxFor(m => m.EndTime, new { id = "EndTime", @class = "form-control timepicker" })    
    </div>    
  </div>    
  @Html.ValidationMessageFor(m => m.StartTime, null, new { @class = "help-block" })    
</div>     

image

timepickerも問題なく動作するようで、結局この方法に落着く。

Bootstrapは、便利だし、素晴らしいし、使わないわけにはいかない。
のだけれど、なんだろ、きちんと説明できないクセのようなものがあって、
それに慣れていないと、思ってることをするのになかなかはかどらない。ことがある。
それはまったく、時間をかけてちゃんと理解すれば良いこと ←あたりまえだな
Bootstrapの思想を受け入れてそれに従う。必要があるのだ!
に従うと、オラ的要求はけっこうたびたび蹴られる;;;;  まだまだな

Written by nasu38yen

2015年10月8日 @ 5:50 PM

カテゴリー: .NET

Tagged with

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。