View Full Version : Use of !important to override inline style

14 Jan 2013, 3:15 PM
This is not so a solution request, more of a potential bug report or check that this is the best way to handle this situation.

I have a tab panel ( cls: 'flowsheet_panel') and I'm using some modifications to the base theme. I'm trying to achieve a lightweight look and feel with less lines and boxes than the base theme.

In the tab panel, I have found that I've needed to use !important to switch off the top border of the first .x-panel-body child. So in my scss I have:

.flowsheet_panel>.x-panel-body {
border-top-width: 0 !important;

In doing this, I noticed that there was now a 1px gap between the bottom of the tab pane header and the tab pane body. It appears that the top of the .x-panel-body is 1px out. So I added to the above scss block:

top: $tab-height + 8px !important; /* 8px is padding on .x-tab-bar-top .x-tab-bar-body */

This changes the top value from 33px to 32px and the tab panel header and body are no longer 1px apart.

This solution is fine, but I just wanted to run it by you guys. Two things concern me:

- Generally the use of !important in css should be avoided. I'd prefer a cleaner way to achieve this.
- The Ext Js code that calculates the top value for .x-panel-body to be 33px is obviously incorrect. Any idea why this happens?

16 Jan 2013, 12:43 PM
Border, margin and padding all affect the size and positioning of components. CSS (SASS) can be used to get rid of or modify the CSS values but the layouts calculate the sizing of components so thats why there are border, margin and padding configs on the components because the layouts need to know about them.

16 Jan 2013, 2:44 PM
In theory Ext Js should be able to determine all those values from the dom element and it's associated css properties. But I'm guessing that this doesn't work all the time in all browsers? Or at least not early enough in the page rendering process.

So basically we should do all margin, padding, border via component configs?

If so, that's a shame, but I guess when supporting older browsers you need an infallible approach.

16 Jan 2013, 3:40 PM
FYI this is the look I am trying to achieve - lightweight tab bar that just uses an outline. This was achieved using overrides in scss - using a a few !important declarations:


I've tried to recreate this using the configs for tab.panel but I haven't succeeded yet. Here's the closest I got:

bodyPadding:'10 10 10 10',

( backgrounds are set in scss )

I've noticed that the Ext 4.2 beta has a theme that looks closer to what I want so I'll look into how that is done.

16 Jan 2013, 7:55 PM
It's more performant to do it in javascript as you can insert HTML in one call versus throwing it in the DOM, reading the size and the writing the sizes. So you can do 1 DOM interaction instead of 3 which on complex things it helps a lot.