Fluid Page - Control Field & Related Display Field

Fluid Pages display all fields one-under-the-other in a single column .There is a concept of a “Display Control Field” and a “Related Display field.” For example, You have a Nationality code of SAU on a page and you want to display the Nationality description on the page along side it.

PeopleSoft classic page show both fields on the same line and fluid page will show Related Display field in next line under the Display Control Field as shown below .

Every HTML element has two type of display values: block and inline. A block-level element always starts on a new line.

A block-level element always takes up the full width available (stretches out to the left and right as far as it can).

An inline element does not start on a new line. An inline element only takes up as much width as necessary.

By default, fluid fields are displayed using the ‘block’ approach. We will change this to ‘inline’ for the fields Nationality (English) and for the related display field which is the long description of Nationality (English).

open up the fluid properties for Nationality (English) field on the page and add the inline style class: psc_display-inline.

Add the following style to related display field 

psc_display-inline psc_label-none 

if control and related display field are too much close , you may add 

psc_padding-left20px