I have installed version 15.1.7 and I have problems with CSS in the webpages that use ASPxDashboardViewer.
It seems that the "dx-theme-generic-typography" class that it is automatically added to the body element of every page that has inside an ASPxDashboardViewer control.
AspxDashboardViewer issue with an appended CSS class
created 9 years ago
(modified 9 years ago)
Answers
I just ran into the exact same problem when upgrading from 14.2.5 to 15.2.5! This is killing me because it totally changed my menu system. How you can automatically add a class to the Body where it overrides color is beyond me. I've attached screen shots and the aspx file. I can't send the .cs file since this is a public message.
I have a giant ASPxCallbackPanel where the Dashboard is wrapped. The Menu system is in the Master. When I click on the ASPxTreeView I do a read to get the associated dashboard .XML file. On Postback the Body is changed as you can see to include the new class which overrides my forms color.
Dashboard1.jpg - Shows the original menu choice with blue being defined as color
Dashboard4.jpg - Shows the original form as loaded. Notice Body has no classes
Dashboard5.jpg - Shows the actual view of the form in blue.
Dashboard3.jpg - Shows what happens after loading one of the Dashboards via the Tree View. The Body now has a few classes added to it, one of which overrides my color!
Dashboard2.jpg - Shows the result of the color override
Comments
(3)
I have tried to replicate the problem on my side but have not noticed any issue. You can find my test project in the attachment. Please change it to replicate the problem or provide us with your sample project replicating the issue. We will review it and do our best to find a solution for you.
I am awaiting your response.
RK
9 years ago
Here you are.
Go to the web page (I'm in IE 11 but the browser probably doesn't matter)
Press F12 to open your Developer Tools window
In the DOM Explorer Window you'll notice Body tag is empty
C lick Fake Dashboard 1. It will take a second and you will get Dashboard was not found. Now this step didn't change Body.
Click Fake Dashboard 2. Bam. You'll notice that a class has been added to the Body and the fonts change etc.
PS. The same steps work in Chrome v48 when viewing the Elements tab
Hello,
Thank you for providing us with a sample project demonstrating the issue. I have created a separate bug report regarding this problem: T344979: The .dx-theme and .dx-color-scheme styles are added to the body tag if dashboard is loaded on callback. We will research the case and will notify you once we have any results.
Hello Joe,
Would you please describe the issue in general? From what I gather, you create a CSS style and the "dx-theme-generic-typography" class prevents you from using it. Would you please provide us with your css style? What should it do? I hope to hear from you soon.
Maxim,
We use a masterPage that assigns a CSS Class to the Body tag. When we INITIALLY load the page the body tag is as follows:
<body class="OBI">
Css Class:
body {font:8pt Tahoma, Arial, sans-serif; background:#fff url(images/body_bkg_gray.jpg) repeat-x; text-align:center; padding:0; margin:0; color:#333333;}
body.OBI {width:100%; height:100%; overflow:hidden; padding:0; margin:0;}
In the scenario that we are running into, I placed an AspxDashboardViewer Control in a popupControl. When I call the popupControl that displays a dashboard, the body class "OBI" has the "dx-theme-generic" "dx-theme-generic-typography" and "dx-color-scheme-light". It seems that when loading a Dashboard within the AspxDashboardViewer the CSS class we initially assigned to the body is overwritten to account for the stylings required for the Dashboard. This is the body
after a dashboard loads into the viewer:
<body class="OBI dx-theme-generic dx-theme-generic-typography dx-color-scheme-light">
The biggest issue with this, is that it changes the underlying font from 8pt to 14 px, which is a stark contrast from its initial load.
I have tried to replicate the problem on my side but have not noticed any issue. You can find my test project in the attachment. Please change it to replicate the problem or provide us with your sample project replicating the issue. We will review it and do our best to find a solution for you.
I am awaiting your response.