Results 1 to 4 of 4

Thread: Why are inline styles being added to buttons when no inline style is defined...

  1. #1

    Question Why are inline styles being added to buttons when no inline style is defined...

    We are trying to restyle EXT's buttons via CSS, but EXT is making it difficult. Any button in our enviroment gets the following inline styles added to it:

    • border-width: 1px;
    • margin-top: 0px;
    • margin-right: 0px;
    • margin-bottom: 0px;
    • margin-left: 0px;

    When the button is created it is simply overiding the baseCls, ui, and standard things like text and icnCls. We cannot figure out where the border-width is coming from. None of this appears to happen in ext's demos using similar code. Anyone know what is going on?

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    I'm not seeing the margin style in 4.0.7 and 4.1.0 beta 3
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3

    Default

    My point exactly. We are using 4.1.0 beta 3 and still getting the margin and border width without asking for those styles to be added. As I said in the question I can see this does not happen in the ext 4 demos, so clearly we have some higher level setting switched on that is causing the issue. It happens on every button regardless of browser. It's particularly causing problems in ie where the border is not wanted as it is part of the image background.

    Ultimately the issue comes down to I can override the styles via CSS because they are inline, and I do not want to use !important as that will cause things to break when inline styles are needed, and makes it much harder to do inheritance via CSS as everything then needs to be !important which really should only be used for debugging.

    So again the question is, if we are not explicitly coding in these inline styles when creating the button, what might be causing them to be added (higher level setting or being in a certain panel etc.)

    Quote Originally Posted by mitchellsimoens View Post
    I'm not seeing the margin style in 4.0.7 and 4.1.0 beta 3

  4. #4
    Sencha Premium User
    Join Date
    Jul 2013
    Posts
    15

    Default State in 4.2.2

    I think the current way the icons are getting these margin settings is through the CSS generated from the theme:
    Code:
    /* line 32, ../../../../ext/packages/ext-theme-base/sass/src/tab/Panel.scss */
    .x-btn-icon-el {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      position: absolute;
      background-repeat: no-repeat;
      text-align: center;
    }

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •