DataView elements height is overwritten automatically
Hello everybody :) I have following issue that has been driving me a little crazy: On a project I am working on, I have a dataview from the Email Connector module. There is certain elements in that dataview, where I am trying to change the height to 100% and make it scrollable because otherwise it is not responsive and makes the whole page grow too big. No matter if I override it in the SCSS or browser it get’s overwritten automatically and the height is set to the original auto value again. Even if I use the !important tag. This is the case on elements like mx-dataview-content or mx-grid-content. If I apply the changes in the browser dev tools, the values stick for a while and then get overwritten. When I stop the application with the browser debugger, I can work on it and make the changes I want. So I guess there is some JS code, that checks the values constantly and overwrites them? If yes, how can I find out where this exactly happens and deactivate that part? Or in the best case not touch the JS at all and make my CSS changes stick? (I am using Mendix 10.2.0 btw but I could not select it in the dropdown here)
those style values are usually rendered in the background.
style is more dominant then your stylesheet so if you would like to remove it you’ll need to add an !important. So height: 100% !important; in your stylesheet.
an alternative could be wrapping the accessibility widget around it and target the style element to add height: 100% to overwrite the generated css. But it could be that style is excluded.