Bootstrap 3 on Drupal 7 Issue with AccuWeather Widget

BootStrap, Drupal 7

Spent hours trying to find out what was causing the CSS to break on my AccuWeather widget. I have Bootstrap on Drupal. This is really a full task to get right.

You’ll need to replace ‘box-sizing:border-box’ with ‘box-sizing:content-box’ and if you have more nested elements that require the ‘content-box’ for whatever reason here is my solution. For example, AccuWeather’s widget does break CSS flow when accommodating Twitter Bootstrap version 3. Try wrapping the AccuWeather widget with a ‘.widget’ class like I did.

.widget * {
webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;

This style will replace all ‘box-sizing:border-box’ from the widget class on down the tree.

Thread tells you: http://stackoverflow.com/questions/18854259/why-did-bootstrap-3-switch-to-box-sizing-border-box

Better box model by default. Everything in Bootstrap gets box-sizing: border-box, making for easier sizing options and an enhanced grid system.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s