3

画像の説明をここに入力

.col-sm-12#customer
  %h2 顧客情報
  %dl.dl-horizontal
    %dt 電話番号
    %dd
      %div(style="padding: 0px;" class="col-sm-4")
        .input-group
          = text_field_tag 'customer[phone1]', '', class: "form-control"
          %span.input-group-addon -
          = text_field_tag 'customer[phone2]', '', class: "form-control"
          %span.input-group-addon -
          = text_field_tag 'customer[phone3]', '', class: "form-control"
      %div(style="padding: 0px;" class="col-sm-12")
        .supplementation 半角で <b>03-9999-9999</b> のように入力してください。

2 件の回答 2

1

あまり難しく考えずに、各項目にclassを付けて、スタイルシートで幅を指定すればよいのでは?と思いました。

.col-sm-12#customer
  %h2 顧客情報
  %dl.dl-horizontal
    %dt 電話番号
    %dd
      %div(style="padding: 0px;" class="col-sm-4")
        .input-group
          = text_field_tag 'customer[phone1]', '', class: "form-control area-code"
          %span.input-group-addon -
          = text_field_tag 'customer[phone2]', '', class: "form-control city-code"
          %span.input-group-addon -
          = text_field_tag 'customer[phone3]', '', class: "form-control subscriber-number"
      %div(style="padding: 0px;" class="col-sm-12")
        .supplementation 半角で <b>03-9999-9999</b> のように入力してください。

custom.sass

.area-code
  width: 30px
.city-code, .subscriber-number
  width: 50px

もし、こういったやり方を採用できない制約があれば質問に追記してください。

1
  • responsive にしたいのですが、うまくゆきません。
    – den256
    Commented 2015年3月18日 7:09
1

.form-group
  %label.col-xs-2.control-label 電話番号
  .col-xs-10
    %div(style="padding: 0px;" class="col-xs-5")
      .input-group
        = text_field_tag 'customer[phone1]', '', class: "form-control", style: "width: 60px;"
        %span.input-group-addon -
        = text_field_tag 'customer[phone2]', '', class: "form-control", style: "width: 120px;"
        %span.input-group-addon -
        = text_field_tag 'customer[phone3]', '', class: "form-control", style: "width: 120px;"
  .col-xs-offset-2.col-xs-10
    %p.help-block 半角で <b>03-9999-9999</b> のように入力してください。

原因が分からないのですが、style に width を設定したらうまく行きました。
ありがとうございました。

2
  • うまくいったのであれば良かったです。が、一般的にHTML内にstyleをベタ書きするのはあまり好ましくないプラクティスとされています。なぜ好ましくないのかはここでは書きません。ネットの情報等を参考にしてご自身で理由を考えてみて下さい。また、さらに細かいことを言うと原因がわからないまま放置するのも技術者として危うい気がします。わからないまま放っておくか、納得がいくまで原因と解決策の関係を追求するかで、技術者としての成長具合に大きく差が出てきます。もしden256さんが「技術者としてもっとスキルを伸ばしたい」と思われるのであれば、僕が今回指摘したこの2点をもう一度掘り下げて考えてみて下さい。 Commented 2015年3月18日 19:16
  • コメントありがとうございます。そうですね。ここが踏ん張りどころですよね。よく分からないままには、したくないです。
    – den256
    Commented 2015年3月19日 4:46

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。