search

HubSpot / messenger

Growl-style alerts and messages for your app. #hubspot-open-source
http://github.hubspot.com/messenger/
MIT License
4.02k stars 406 forks source link

Conflict with .alert style from bootswatch bootstrap css #90

Open rtarnec opened 9 years ago

rtarnec commented 9 years ago

Hello,

Very nice library!

I encounter the following problem: on my page I have the Messenger CSS links as well as a link to a bootswatch theme (//maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css)

This bootstrap.min.css includes an .alert style with a margin-bottom of 21px, see below.

Therefore my Messenger blocks which are aligned to the bottom are shown 21 px above the page bottom...

Any idea how I could solve that?? Many thanks in advance

.alert{ padding:15px; margin-bottom:21px; border:1px solid transparent; border-radius:4px }

blackfyre commented 9 years ago

Can confirm that the .alert, .alert-success, .alert-info classes are conflicting with twitter bootstrap's corresponding alert classes... so this is a :+1: for the OP I just don't understand why is there a need for the alert classes in the package while it also uses .messenger, .messenger-success, .messenger-info classes already...

adamschwartz commented 9 years ago

:+1:

I believe the original intention was specifically for the purpose of inheriting the bootstrap styles, since I believe at the time that decision was made, there weren’t CSS themes yet. Name-spacing makes total sense to me now and probably something we should have done when we implemented theming. PR?

blackfyre commented 9 years ago

I've forked the repo, modified the coffescript file to leave out the alert classes completely, and updated the alert classes to message and it work beautifully alongside bootstrap without conflicting. However there's been a sass to scss conversion in the process (out of personal taste) and that's I'm hesitant to create a pull request.

wodCZ commented 8 years ago

hello, any update on this please?