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

Rails Tutorial 8章9章 フラッシュメッセージのCSSが適用されない問題の解決方法

0 件のコメント

前回の記事では7章のCSSが上手く反映されない問題について説明しました。
Rails Tutorial7章でBootstrapのCSSが反映されない問題

Bootstrap3を使用していると、8章と9章においてもCSSのスタイルが反映されないところがあるので補足しようと思います。いずれのパートにおいても対応方法が2種類あります。

8章のアラートに色がつかない

Bootstrap3を使用している方は8.1.5節のフラッシュメッセージに図8.6のような赤色のスタイルが適用されません。これは仕様変更にともなって、赤色のスタイルが適用されるクラスがalert-errorからalert-dangerに変更されたためです(記事末の参考を参照)。

sessions_controller.rbを編集する方法

app/controllers/sessions_controller.rbのflashを発生させる部分を変更させます。具体的には
flash[:error]flash[:danger]に変更することで解決できます。

custom.css.scssを編集する方法

app/assets/stylesheets/custom.css.scssに下記のコードを追加します。
CSSクラスをそのままにしておきたい場合はこの方法が良いでしょう。

.alert-error{
    @extend .alert-danger;
}

これにより、alert-noticeクラスにもalert-warningのスタイリングが適用されるようになります。

9章のアラートに色がつかない

Bootstrap3を使用している方は9.2.1節の図9.6のように、アラートの背景が黄色くならないと思います。これは仕様変更にともなって、黄色のスタイルが適用されるクラスがalert-noticeからalert-warningに変更されたためです(記事末の参考を参照)。

users_controller.rbを編集する方法

app/controllers/users_controller.rbのsigned_in_userを以下のように変更します。

def signed_in_user
    #元の
    #redirect_to signin_url, notice: "Please sign in." unless signed_in?
    redirect_to signin_url, warning: "Please sign in." unless signed_in?
end

すなわち、notice:warning:に変更すればよいです。

custom.css.scssを編集する方法

app/assets/stylesheets/custom.css.scssに下記のコードを追加します。

.alert-notice{
    @extend .alert-warning;
}

これにより、alert-noticeクラスにもalert-warningのスタイリングが適用されるようになります。

参考

Migrating to v3.x · Bootstrap

0 件のコメント :

コメントを投稿