CSS on non-editable DataView fields

0
Hi all, I am trying to style all non-editable DataView fields in such a way that the end-user will see from the GUI directly that it is non-editable. Since in Mendix 5 there is no specific class for non-editable fields, but only a child 'label' element is added I can't apply a general CSS rule for it. This will affect all label-fields, I only want the parent DIV of the label fields from a DataView to be affected. I have to resort to jQuery, with something like: $("tbody > tr > td > div > label").parent().css({'border-radius' : '4px', 'background-color': '#f9f9f9', 'color': '#414241', 'border': '1px solid #cccccc', 'text-indent' : '4px' }) If I add this in a HTMLsnippet in the layout page it doesn't work. When I put it in all pages separately it does work... Two questions: Is there a better way for doing this? Is it possible to get this working in the layout page instead of all pages separately?
asked
4 answers
1

One of these might help:

https://forum.mendix.com/questions/5306/Styling-using-CSS-in-Mendix-5

https://forum.mendix.com/questions/6009/Style-areas-of-a-page-in-Mendix-511

answered
2
/* Non-editable DataView fields
===========================================================================*/

div[id^=mxui_widget_TextInput]>label,
div[id^=mxui_widget_TextArea]>label,
div[id^=mxui_widget_BoolSelect]>label,
div[id^=mxui_widget_NumberInput]>label,
div[id^=mxui_widget_DateInput]>label,
div[id^=mxui_widget_EnumSelect]>label,
div.mx-referenceselector-input-wrapper>label{
    background-color: #f9f9f9;
    border: 1px solid #cccccc;
    border-radius: 4px;
    display: block;
    color: #808080;
    text-indent: 2px;
    line-height: 10px;
    height: 25px;
}
answered
1

For those who are using a Mendix theme in > Mx5.18 here another solution:

add this to your custom.css

.form-control-static, .form-group div[class='textBox'] > label, .form-group div[class='textArea'] > label, .form-group div[class*='datePicker'] > label {

background-color: #F7F7F7;
border: 1px solid #CCCCCC;
border-radius: 4px;
padding: 5px 8px;
width: 100%;

}

answered
0

There is no specific class or structure in place that you could use for that.

You could try and use the structure of the html, the label is always placed inside a div, what you could do is style it based on that? 

.mx-dataview-content  div label {  /*  The CSS */  }

But I would recommend entering a feature request for this, because the above css could potentially influence other information as well.

answered