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:
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?