Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
Hi,
I noticed that the chat boxes are malformed in my Bootstrap-based sites.
The following line added to my CSS fixes it:
#drupalchat *,*:before,*:after{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
I thought someone might find it helpful.
Also, could you please consider adding it to the CSS that comes with the module? That is a feature request, right?
Thanks.
Comment | File | Size | Author |
---|---|---|---|
#6 | Screen Shot 2014-12-12 at 3.40.45 PM.png | 194.23 KB | duckydan |
#6 | Screen Shot 2014-12-12 at 3.41.44 PM.png | 95.75 KB | duckydan |
#3 | drupalchat-css-fix-2292783-0.patch | 1.25 KB | samwilson |
Comments
Comment #1
duckydan CreditAttribution: duckydan commentedComment #2
duckydan CreditAttribution: duckydan commentedShould be:
#drupalchat *,#drupalchat *:before,#drupalchat *:after{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
My selectors were wrong.
Comment #3
samwilson CreditAttribution: samwilson commentedThanks for figuring this out! We're very grateful.
Does the
box-sizing
need to be set on all child elements?Here's a patch that adds it to
#drupalchat-wrapper
only. It works everywhere I'm able to test it (which isn't more than FF, IE, and Chrome on Windows).See what you think.
Thanks,
Sam.
Comment #4
SocialNicheGuru CreditAttribution: SocialNicheGuru commentedComment #5
darklrd CreditAttribution: darklrd commentedHas anyone tried out this patch? Thanks!
Comment #6
duckydan CreditAttribution: duckydan commentedThe screen shots show that with the patch, it is better, but jumbles up.
The screen shot that looks nicer is just the CSS change done through css_injector
Comment #7
samozin CreditAttribution: samozin commentedthis batch is not working with me even with css_injector module
iam using bootstrap 3.2.x
Comment #8
ql28 CreditAttribution: ql28 commentedSame for me, it's not working with Bootstrap v3.3.2
Comment #9
Media Crumb CreditAttribution: Media Crumb commentedfit is fairly easy. Just override in your CSS.
Comment #11
darklrd CreditAttribution: darklrd commentedComment #12
darklrd CreditAttribution: darklrd commented