CODEWITHSUNDEEP
htmlcssruby-on-railstwitter-bootstrapruby-on-rails-4
Anders
Anders

Reputation: 2941

Bootstrap - custom flash/alert boxes

I have a Rails app in which I use Boosttrap and HAML, when I present the flash messages I would like to change their appearance slightly. I want them to be full screen with cold-md-1 margins on each side, and a col-md-10 contains the flash message.

What I've tried is:

- if flash[:notice]

  / Full width is a css class with 100% width, so the width works...
  .alert.alert-info.alert-dismissable.full-width
    .col-md-1
    %button{:type => "button", :class => "close", 'data-dismiss' => "alert", 'aria-   hidden' => "true"} ×
    = flash[:notice]
    .col-md-1

This doesn't work quite as I want (not the correct margins). I have also tried to contain the flash message like this:

.col-md-1
.col-md-10
  [message]
.col-md-1

Then it looks ok, but the close button doesn't work as I want (it doesn't close the whole message). To illustrate what I what to achieve, see the image below:

enter image description here

Here I want the close button (note: only the close button, and not the background) to align with the account drop down and the gray box.

Any ideas on what I should do?

Upvotes: 1

Views: 811

Answers (2)

Anders
Anders

Reputation: 2941

Solved it by using some javascript (or coffee-script). View: 

.alert.alert-info.alert-dismissable.no-border-radius
  .container
    .col-md-1
    .col-md-10
      = flash[:notice]
      %button{:type => "button", :class => "close", 'data-dismiss' => "alert", 'aria-hidden' => "true"} ×
    .col-md-1

JavaScript (or CoffeeScript):

$('.close').click ->
  $(".alert").hide();

Upvotes: 0

Mandeep
Mandeep

Reputation: 9173

You are making simple thing look complex. You want to have col-md-1 margin on each side so your alerts width will be col-md-10 and bootstrap3 has col-md-offset-* classes for offsetting it. 

- if flash[:notice]
  .alert.alert-info.alert-dismissable.col-md-10.col-md-offset-1
    .col-md-1
    // give proper width and margin to this div to align button with dropdown
      %button{:type => "button", :class => "close", 'data-dismiss' => "alert", 'aria-   hidden' => "true"} ×
    = flash[:notice]

Upvotes: 1

Related Questions