CSS selector helper widget

Category: Widgets
Subcategory: Display widgets

Overview

** Deprecated as of Mendix 8.14 because you can set dynamic classes in the model. ** Continuation of my work at Synobsys. Style specific elements (containers) of a page by putting this widget next to it.

Documentation

mendix-CssSelectorHelperWidget

Widget IDs of a Mendix application change everytime a page is displayed, so CSS selection using IDs is not possible.

With this widget you can style specific elements (containers) of a page by putting this widget next to the element.

This widget places an attribute on the previous sibling in the DOM tree.

##Typical Usage Scenario Style a specific table or group box or elements within a container

##Features And Limitations Set an attribute on the previous sibling node in the DOM to allow CSS selection styling on it. This can also be done dynamically using the context aware version.

Note that this widget can be used in offline apps too.

##Installation Normal installation using the App Store.

##Dependencies Mendix 6.10.2 Environment

##Configuration In the designer, place this widget directly underneath the element (from here on called the reference element) you want to style and set a value for the attribute.

In the css, styling can be created specific for the attribute value so it gets applied to the referenced element

At runtime, the widget will put attribute cssselectorhelper on the referenced element with the value you specified. This allows the CSS to style the referenced element or any sub elements.

##Examples The result of the examples can be seen in the screenshots.

###Example 1, CssSelectorHelperWidget placed directly underneath a table Value group1 was used as attribute value on the CssSelectorHelperWidget.

Put a background color on the entire table.

table[cssselectorhelper=group1] {
	background-color: #DFFFE7;   
}

Select all labels in a table cell with render mode = header and change the text to appear in blue italic.

table[cssselectorhelper=group1] th>label {
	color: blue;  
	font-style: italic;
}

###Example 2, CssSelectorHelperWidget placed directly underneath a group box Value group2 was used as attribute value on the CssSelectorHelperWidget.

Put a background color on the body of the group box.

div[cssselectorhelper=group2]>div {
	background-color: paleturquoise; 
}

Select all labels in a table cell with render mode = header and change the text to appear in red.

div[cssselectorhelper=group2]>div th>label {
	color: red;   
}

Select all output elements in the groupbox and make them appear as bold green.

div[cssselectorhelper=group2]>div div[id^=mxui_widget_TextInput]>label,
div[cssselectorhelper=group2]>div div[id^=mxui_widget_NumberInput]>label,
div[cssselectorhelper=group2]>div div[id^=mxui_widget_DateInput]>label,
div[cssselectorhelper=group2]>div div[id^=mxui_widget_EnumSelect]>label,
div[cssselectorhelper=group2]>div div.mx-referenceselector-input-wrapper>label{
    color: forestgreen;
    font-weight: bold;
}

For more information about CSS selectors, please check http://www.w3schools.com/cssref/css_selectors.asp

##Properties Attribute value. This value is used for attribute cssselectorhelper.

Releases

Version: 1.0.2
Framework Version: 6.10.10
Release Notes: Allow attribute name to be set for context version of the widget
Version: 1.0.1
Framework Version: 6.10.10
Release Notes: Thanks to @ChrisdeG for spotting this.
Version: 1.0
Framework Version: 6.10.2
Release Notes: Continuation of my work, now at ITvisors Ready for Mendix 7