CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user967451
user967451

Reputation:

How to override CSS Box Sizing for just one area on page?

I have the following CSS inside my Twitter Bootstrap file:

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

It is causing a problem with my TinyMCE editor, mainly the resizing of the textarea. Anyway if I remove the above code all is good, but obviously I need it in place cause otherwise the rest of Bootstrap breaks.

So how do I override the above for just TinyMCE? I tried this:

.tinymce-editor,
.tinymce-editor:before,
.tinymce-editor:after {
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

But no luck. .tinymce-editor happens to be the div that my editor is inside.

Upvotes: 16

Views: 11406

Answers (1)

user967451
user967451

Reputation:

Nevermind just got it:

.tinymce-editor *,
.tinymce-editor *:before,
.tinymce-editor *:after {
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

Upvotes: 23

Related Questions