Mar 30, 2017, 10:02 AM
[CLOSED] Buttons, and Custom CSS design guidelies
We’re customizing the style of the Buttons by basically flattening and setting a background color.
However, in IE8/9 we’ve seen that buttons are rendered using a <table> instead of <span>, and in order to render rounded corners there are background images the child elements of the table itself…
In the image above, the button is with a gray background, however in Chrome we see it with orange background (which is our configured style override).
In our case, we would like to change the style of the buttons primarily to “background color†and “padding†styles.
We would like to know your point of view and suggestion on the following requirements.
FIRST REQUIREMENT: We need to reset the styles defined by ExtJS to the buttons.
Currently we’re resetting background-image and backgroun-color of all the classes of this kind (x-btn-default-small-tr, … -tl, … ml… ).
This way we’re skipping background images from being applied:
For example, we’re specifying this override:
(x-nbr = no border radius, x-nlg = no linear gradient, https://forums.ext.net/showthread.ph...erent-browsers)
• We’re using the same technique for all button statuses (eg. overriding the classes also for x-btn-over, x-btn-focus, x-btn-pressed).
Is this approach correct? Is there a simpler way remove the background images added to the buttons somehow?
SECOND REQUIREMENT: Make sure that our specified style isn’t overridden by ExtJS base styles for IE 8/9
We’re only defining custom styles for buttons directly for the most external element of the button (.x-btn).
In order to make our styles work with IE8 and 9 we’re currently required to define it with !important keyword, since there is a base ExtJS class that enforces the background color as “transparentâ€:
Our override:
Is there another way to avoid this issue from your knowledge?
THANK YOU FOR YOUR VALUABLE SUPPORT
However, in IE8/9 we’ve seen that buttons are rendered using a <table> instead of <span>, and in order to render rounded corners there are background images the child elements of the table itself…
In the image above, the button is with a gray background, however in Chrome we see it with orange background (which is our configured style override).
In our case, we would like to change the style of the buttons primarily to “background color†and “padding†styles.
We would like to know your point of view and suggestion on the following requirements.
FIRST REQUIREMENT: We need to reset the styles defined by ExtJS to the buttons.
Currently we’re resetting background-image and backgroun-color of all the classes of this kind (x-btn-default-small-tr, … -tl, … ml… ).
This way we’re skipping background images from being applied:
For example, we’re specifying this override:
body.x-nbr a.x-btn-over .x-btn-default-small-mr {
background-image: none;
background-color: transparent;
}
• We’re also taking advantage of the x-nbr/x-nlg classes, that are added to the body to limit the rules only to buttons rendered with <table> element.(x-nbr = no border radius, x-nlg = no linear gradient, https://forums.ext.net/showthread.ph...erent-browsers)
• We’re using the same technique for all button statuses (eg. overriding the classes also for x-btn-over, x-btn-focus, x-btn-pressed).
Is this approach correct? Is there a simpler way remove the background images added to the buttons somehow?
SECOND REQUIREMENT: Make sure that our specified style isn’t overridden by ExtJS base styles for IE 8/9
We’re only defining custom styles for buttons directly for the most external element of the button (.x-btn).
In order to make our styles work with IE8 and 9 we’re currently required to define it with !important keyword, since there is a base ExtJS class that enforces the background color as “transparentâ€:
Our override:
body.x-nbr a.x-btn {
padding: 6px 12px !important;
background-color: #E28B00 !important;
}
Is there another way to avoid this issue from your knowledge?
THANK YOU FOR YOUR VALUABLE SUPPORT
Last edited by fabricio.murta; May 12, 2017 at 11:46 PM.