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


Tags: html,css,twitter-bootstrap

Problem :

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.



Solution :

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;
}

    CSS Howto..

    How do I get stack my web page content in to 2 columns and be consistent on page sizes

    How to add head section in a page that has layout template

    How to close CSS3 Lightbox by clicking outside of the current image?

    Div is laying ontop of absolute-positioned element. How to put element above the div?

    How to position two elements side by side using CSS

    How to align two anchor tags with text horizontally next to each other?

    How to access parent element in CSS? [duplicate]

    How to make pixel perfect font in css?

    How to add Print headers and footers in HTML, CSS and JavaScript?

    How does one know exact pixel size / relationships between CSS elements?

    How to have choices that change the background of a site

    How can I make these CSS absolute positions work in IE?

    How to make custom shape div, or manipulate divs

    How to make my popup not transparent and sideways draggable?

    How do I get two divs next to eachother, but spaced?

    How to parse css (stylesheet) comments (annotations)?

    How do I move all the li elements with specific css style to another ul?

    How to place differently sized images in 2 columns with figcaption aligned

    HTML5/CSS: How to set the height of the page without considering the footer?

    How to do line animation using CSS and SVG

    How do I align elements using CSS?

    how to let CMS make use of my css files instead of its own css?

    How to get rid of CSS cascading in internal element widgets

    How to customize ionic style components (lists and tabs with different shapes)

    How could I achieve the same navigation using CSS3? (currently flash AS3)

    how to put 6 divs in the same line?

    How to create a css hoverover box with two section

    How can I show this 2 div side by side?

    How to completely fill screen with smaller elements?

    How to align both vertically and horizontally in CSS?