Remove border and gray field from data view

Hi guys, I was wondering how to remove the rectangle (and gray field) behind the non-editable items in a data view (like in a template grid) with styling. And no, actually using a template grid is not an option. :)
2 answers

Add a new class to your theme as below:

.field_as_text {
      background-color: #FFF !important;
          border-color: #FFF !important;

And add the class to the field you want to have displayed without the gray background and border.

If you want to do this for all fields then override settings the .tundra .MxClient_formDisabled class in your theme.


CSS rules marked !important take precedence over later rules. Normally in CSS the rules work from top to bottom, so if you assigned a new style to an element further down the style sheet or in a secondary style sheet then the later rule would take precedence. !important ensures that this rule has precedence.

For Mendix themes this means that you need to make sure the tundra class always comes first in your code. Tundra is a default style we use.


.fieldastext { background: #FFF; }

This should be:

.tundra .fieldastext { background: #FFF; }

In some cases it would happen that a widget or default mendix styling overwrites a certain class, then it make sense to use !important.