CSS Do’s and Don’ts in the DataFlex Web Framework

In this third blog about Styling DataFlex Web Applications, I’ll discuss how styling and designing DataFlex Web Framework applications is different than doing the same for plain HTML & JavaScript applications. I’ll also offer a few do’s and don’ts to help you along.

CSS is designed to be cascading and supports inheritance where elements inherit specific styles from their parent elements. Within a single page (and entire applications live in a single page these days), there is no method to exclusively assign specific styles sheets to a specific section within that page. Other CSS can always influence a specific element inside that section and assign rules that “break” the framework. Breaking in the sense means that it looks bad, or even worse, doesn’t function as expected.

In the case of integrating a WebApp Framework application into an existing page, this CSS can be external and part of a different framework or template. Therefore, when styling Web Framework applications it can be easy to accidentally cause problems by yourself. To function properly, the framework relies on certain styles to be set, and certain other styles to never be set. Since there is no suitable method for the framework to enforce these rules, designers must make sure they don’t introduce problems themselves!

One of the major concepts where the WebApp Framework collides with how web developers / designers are used to working is with the positioning. The WebApp Framework itself controls the positioning of controls and containers (panels). Within the DataFlex Studio, the WebApp Designer can be used to (re)position the components - this should never be done using CSS. If CSS properties like ’position’, ’float’, ’left’, ’top’ and even ’display’ are used in Application.css and Theme.css, then it would (most likely) be better to do the repositioning in DataFlex code.

Column

When looking at the positioning of controls, the column layout system of the WebApp Framework determines how controls are positioned relative to each other. This translates into inline styles that are set on the wrapping div element of each control.

element.style {
    float: left;
    clear: none;
    margin-left: 20%;
    width: 50%;
}
.WebControl {
    display: block;
}

The CSS above shows what is applied at runtime to a WebCombo positioned with a piColumnSpan of 5, piColumnIndex of 5 inside a container with a piColumnCount of 10. Using float, float left, margin-left and width, the framework puts this control in a specific position. The margin-left in this case actually depends on the sibling control to the left of this control. Overriding any of these styles with CSS obviously breaks the framework’s positioning. Adding another margin (margin-right for example) or a border to this element will cause the positioning to break, as well. The Theme.css does determine the space between controls, but to do that it sets a margin on the WebCon_Inner element. Every control has this div element that is a direct child of the WebControl wrapping div.

.WebControl > .WebCon_Inner {
    margin: 2px 5px;
    min-height: 29px;
}

Panel Layout

To align panels the framework uses an absolute positioning system where absolute coordinates are used relative to its container:

element.style {
    position: absolute;
    top: 0px;
    right: 100px;
    left: 100px;
    bottom: 0px;
}
.WebContainer {
    position: relative;
    outline: none;
    overflow: visible;
    box-sizing: border-box;
}

A common problem here is that paddings and borders in the wrong place cause scrollbars or clipped contents. One issue is that the WebApp Framework actually queries the DOM elements to determine their height, and it needs to calculate some heights taking in account the space taken by wrapping elements. Over the years these calculations have grown and take in account more and more values, but there are still issues.

Since DataFlex 18.2 the recommended element to use to add a border around a panel is the WebCon_Sizer element that is a direct child of the panel. The following sample shows how to do this (assuming MyBorderPanel is set as psCSSClass on the panel object):

.MyBorderPanel > .WebCon_Sizer{
    border: 2px solid #000000;
}

Adding padding to a container (containers are cWebPanel, cWebTabPage, cWebView, cWebModalDialog, ..) should be done on the WebCon_Content element. The theme usually sets a padding value for all types of containers at once.

.WebContainer .WebCon_Content {
    padding: 4px 2px;
}

 This blog is the third in a series about styling DataFlex web apps. The first two are Introduction to WebApp Styling, and CSS Classnames.