プログラミングや電子工作などについての記事がほとんどです

Rails Tutorial7章でBootstrapのCSSが反映されない問題

0 件のコメント

Rails TutorialのRails4.0版に取り組んでいるのですが、指示に逆らってgemをすべて最新版を入れているので非常にエラーが多いです。
同じようにGemfileにバージョン指定をせず、最新版をインストールして勉強している皆さん向けの記事です。

問題の部分

Rails Tutorial 7章のフォームにスタイルを着ける部分で、図7.18と自分の作成したアプリの表示が異なり、首をかしげる。
完全に写経できたはずなのにフォームにエラーのスタイルが反映されない……。具体的には

  • The form contains 〜 errors.
  • エラーが生じているフォーム部分

が上手く表示されていない。

対処方法

調べてみるとBootstrapのバージョンが2から3に伴う仕様変更のせいらしい。

The form contains …のところの問題

問題はdivタグのalert-errorクラスがバージョン3でalert-dangerに変更された点である。そのため、該当部分を変更する。

app/views/shared/_error_messages.html.erb
<% if @user.errors.any? %>
  <div id="error_explanation">
    <div class="alert alert-danger">
      The form contains <%= pluralize(@user.errors.count, "error") %>.
    </div>
    <ul>
    <% @user.errors.full_messages.each do |msg| %>
      <li>* <%= msg %></li>
    <% end %>
    </ul>
  </div>
<% end %>

フォームのスタイルが変わらない問題

仕様変更により、フォームの要素にクラスを追加する必要があるらしい。ラベルにはcontrol-labelクラス、テキストフィールドにはform-controlクラスを付与する。

app/views/users/new.html.erb
<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>
<div class="row">
    <div class="span6 offset3">
        <%= form_for(@user) do |f| %>
            <%= render 'shared/error_messages' %>

            <%= f.label :name, class: "control-label" %>
            <%= f.text_field :name, class: "form-control" %>

            <%= f.label :email , class: "control-label" %>
            <%= f.text_field :email, class: "form-control" %>

            <%= f.label :password, class: "control-label" %>
            <%= f.password_field :password, class: "form-control" %>

            <%= f.label :password_confirmation, "Confirmation" , class: "control-label" %>
            <%= f.password_field :password_confirmation, class: "form-control" %>

            <%= f.submit "Create my account", class: "btn btn-large btn-primary" %>
        <% end %>
    </div>
</div>

結果

以上を適用すると下のような感じになる。

なんか思っていたのと少しだけ違うけど、まあいいかと妥協できるレベルに。
エラーメッセージがインデントされている理由はわからないけど、見やすくなった気がするから良し。
Confirmationのスタイルが適用されていないのは検証がうまくいっていないからかな?

参考

Migrating to v3.x · Bootstrap
1つ目の問題に関するサンプル
2つ目の問題に関するサンプル

0 件のコメント :

コメントを投稿