View Full Version : Why are inline styles being added to buttons when no inline style is defined...

6 Mar 2012, 2:36 PM
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? :((

7 Mar 2012, 10:47 AM
I'm not seeing the margin style in 4.0.7 and 4.1.0 beta 3

7 Mar 2012, 11:54 AM
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.)

I'm not seeing the margin style in 4.0.7 and 4.1.0 beta 3

1 Apr 2014, 3:36 AM
I think the current way the icons are getting these margin settings is through the CSS generated from the theme:

/* 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;