1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    48
    Vote Rating
    2
    mbudm is on a distinguished road

      0  

    Default Unanswered: Use of !important to override inline style

    Unanswered: Use of !important to override inline style


    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?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    873
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Nov 2012
    Posts
    48
    Vote Rating
    2
    mbudm is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha User
    Join Date
    Nov 2012
    Posts
    48
    Vote Rating
    2
    mbudm is on a distinguished road

      0  

    Default


    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:

    selected_tab.png

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

    bodyBorder:false,
    bodyPadding:'10 10 10 10',
    margin:5,
    border:'0',
    bodyStyle:{borderTop:'none'},
    tabBar:{border:false},

    ( 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.

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    873
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread