Widgets CSS

For all widgets, this documentation shows the generated code. Variables like {custom CSS} or {marin top property} are replaced by the value set in the widget properties.

Generic CSS

#pgm-widget-{{number}} is a div containing each widget. The number is randomly generated at runtime,
.pgm-widget the class on the #pgm-widget-{{number}} div, containing every widget;
.pgm-widget-label-top is the class for the label on top of a widget;
.pgm-widget-message is the div containing the message below the widget, used for errors and language messages;
.pgm-widget-message-{success, warning, error} controls the color of the widget's message;
.pgm-widget-help is the div below a widget for the help text.

<div style="margin-top: {margin top property}px">
    {widget}
</div>

<div class="pgm-widget-label-top" style="margin-top: {margin top property}px">
    {label}
</div>
{widget}

<div class="pgm-row" style="margin-top: {margin top property}px">
    <div class="pgm-col-2 pgm-col-padding-right"></div>
    <div class="pgm-col-10">
        <div class="pgm-widget-label-top">{label}</div>
        {widget}
    </div>
</div>

<div class="pgm-row" style="margin-top: {margin top property}px">
        <div class="pgm-col-2 pgm-col-padding-right pgm-widget-label">{label}</div>
        <div class="pgm-col-10">{widget}</div>
</div>

Widgets

Button

<button class="pgm-button pgm-button-{design} pgm-button-{size}" {custom CSS}>{value}</button>

.pgm-button is a the design of all the buttons in the PGM section;
.pgm-button-sm (small), .pgm-button-md (medium), .pgm-button-lg (large) will change the button size;
.pgm-button-fw will make a block, full width button;
.pgm-button-form will make a block, full width button of the same height as the other inputs;
.pgm-button-primary, .pgm-button-outline-primary, .pgm-button-info, .pgm-button-success, .pgm-button-warning, .pgm-button-danger, .pgm-button-transparent changes the color and look of the button.

Container box / list

<div class="pgm-widget-box pgm-widget-box-{design}" {custom CSS}>
    <div class="pgm-widget-box-header">{header}</div>
    {widgets}
</div>

.pgm-widget-box is the main div of the box;
.pgm-widget-box-header is the header part of the box list, and is omitted is there is no header content;
.pgm-widget-box-{primary, secondary, success, info, warning, danger, light, dark, none} controls the look and colors of the box.

Container columns

<div class="pgm-widget-columns" {custom CSS}>
    <div class="pgm-widget-column pgm-widget-column-{width}" data-columns="{widget internal id}" data-column="{column id}">{column widgets}</div>
    {other columns}
</div>

Container tabs

<div class="pgm-widget-tabs-container" {custom CSS}>
    <div class="pgm-widget-tabs">
        <div class="pgm-widget-tab pgm-widget-tab-selected" data-tabs="{widget internal id}" data-tab="{tab id}">{tab label}</div>
        {other tabs headers}
    </div>
    <div class="pgm-widget-tabs-contents">
        <div class="pgm-widget-tab-content" data-tabs="{widget internal id}" data-tab="{tab id}">{tab content}</div>
        {other tabs contents}
    </div>
</div>

Date

<input type="date" class="pgm-widget-input" value="{value}" {custom CSS}/>

Graph

<div id="pgm-widget-graph-{widget internal id}" class="pgm-widget-graph" style="margin: 0 auto; width: {graph width}%; height: {graph height}px" {custom CSS}></div>

Iframe

<iframe class="pgm-widget-iframe" src="{value}" {custom CSS}></iframe>

Image

<img class="pgm-widget-image" src="{value}" {custom CSS}/>

Label

<div class="pgm-widget-label" {custom CSS}>{value}</div>

Number

<input class="pgm-widget-input" type="{range, number}" min="{min}" max="{max}" step="{step}" value="{value}" {custom CSS}/>

On/off

Checkbox

<input type="checkbox" class="pgm-widget-checkbox" {checked} {custom CSS}/>

Switch

<label class="pgm-widget-switch" {custom CSS}>
    <input type="checkbox" ${checked}>
    <span class="pgm-widget-switch-slider"></span>
</label>

Path

<div class="pgm-row pgm-widget-path" {custom CSS}>
    <div class="pgm-col-10">
        <input type="text" class="pgm-widget-input pgm-widget-path-input" value="{value}"/>
    </div>
    <div class="pgm-col-2 pgm-col-padding-left">
        <button class="pgm-button pgm-button-form pgm-button-primary pgm-widget-path-button">Browse...</button>
    </div>
</div>

Progress

Bar

<div class="pgm-widget-progressbar" {custom CSS}>
    <div class="pgm-widget-progressbar-inner" style="background-color: {color}; width: {percentage}%; color: {calculated text color}">{description}</div>
</div>

Circle

<svg width="120" height="120" {custom CSS}>
    <text x="50%" y="51%" font-family="Verdana" font-size="20" fill="#777777" dominant-baseline="middle" text-anchor="middle">{description}</text>
    <circle class="pgm-widget-progresscircle" stroke="{color}" [...] />
</svg>

Select

Radio / Checkbox

<div class="pgm-widget-label" {custom CSS}>
    <input type="{radio, checkbox}" name="pgm-widget-{radio, checkbox}-{widget internal id}" value="{value}" {checked}/> {text}
    {other options}
</div>

Select / Multiselect

Please note that the code below is hidden and replace with a custom widget using Choices JS.

<select class="pgm-widget-input" {custom CSS} {multiple}>
    <option value="{value}" title="{text}" {selected}>{text}</option>
    {other options}
</select>

Text

Text input

<input type="text" class="pgm-widget-input" value="{value}" {custom CSS}/>

Textarea

<textarea class="pgm-widget-input" {custom CSS} rows="5">{value}</textarea>

Grid

.excel-colname, .excel-rowname
.excel-colname.excel-headerselected, .excel-rowname.excel-headerselected
.excel-firstcelldiv for the top left cell
.excel-content tr for the rows of the content
.excel-cellselector the selected cell (by default: border: 2px solid #4b89ff;)
.excel-rangeselector the selected range (by default: border: 1px solid rgb(231, 76, 60); background-color: rgba(231, 76, 60, 0.12);)