[CLOSED] Changes in overriding css styles 2.x to 4.x

[rmelancon]

Since upgrading from 2.x to 4.x many of our css style overrides are not really working. Spacing is off, fonts are not the same, padding is gone. This is an example override that looked fine in 2.x and in 4.x looks completely different.

        a.MainMenuBtn span.x-btn-inner,
        .x-btn-inner-default-toolbar-small {
            color: #15428b;
            font-family: "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
            font-size: 1.1em;
            font-weight: bold;
            margin: 0;
            height: 25px;
            padding-left: 16px;
        }

The padding is gone and when I inspect the rendered html, it looks like it is applied but something else is taking precedence and overriding or being applied? I can't really tell. In 2.x if you look at the attached image (from inspect element) the second ".x-btn-inner-default-toolbar-small" is not there. That seems to be what it's using at least the font part.

Can someone point me to what changed in this regard and what is the proper way to override elements in 4.x as opposed to 2.x

Thanks.

[fabricio.murta]

hello @rmelancon!

The themes changed significantly between Ext.NET 2 to 4, there's no way to tell what changed how. The way to go would be to go without the broken CSS override, then load the page and, with debugger tools / DOM Inspector, adjust the CSS rules back to your liking.

I can't really tell much of the CSS override you provided without the context where it should show. If you can provide the test case where it worked and where it didn't work (probably the same test case run on v2 and v4, we could help you figure out the override you need.

At least for the first few CSS overrides, then possibly we can find a pattern of changes or general steps to perform on the upgrade process... Some screenshots of it working and with it broken (maybe pointing the broken visual issues) would help too.

Hope this helps!

[rmelancon]

Will do, I just thought there may be something obvious that I was missing. I had read somewhere about some "scopeResetCSS" setting that has changed and thought maybe that had something to do with it. Thanks again, I'm trying to put together a simple sample, but there are several levels of css that are in play and it's tricky to get the right stripped down version to show the problem. Thanks for the help.

[fabricio.murta]

Alright, as I see you created another thread with the sample, right? If so, am I okay to mark this one as closed?

[rmelancon]

Yes that's fine.