Article Details

Id:	19972
Product:	finPOWER Connect
Type:	NEW
Version:	4.00.01
Opened:	07/02/2023
Closed:	21/02/2023
Released:	20/03/2023
Job:	J030438

High Importance

Portals and HTML Widgets; Public1 styling may show corrupted checkboxes

Portals and HTML Widgets using the "Public1" Widget styling may show corrupted checkboxes. These appear as a tall rectangle (in most browsers) with no visual indication as to whether the box is checked or not.

Microsoft have flagged certain glyphs in the "Segoe MDL2 Assets" as deprecated. These symbols were used for checkboxes on HTML Widgets and Portals and this may have broken the appearance on devices such as iPhones and Android devices or even Windows PCs with a different version of this font installed.

https://learn.microsoft.com/en-us/windows/apps/design/style/segoe-ui-symbol-font

The following custom CSS can be copied into the field on the "HTML Widgets" page of the Portal form to correct this:

span[controltype="checkbox"].is-checkbox > input:checked + label.is-no-select,
span[controltype="checkbox"].is-checkbox > input:not(:checked) + label.is-no-select {
  &:before {
    border: 1px solid #D0D0D0 !important;
  }
}

span[controltype="checkbox"].is-checkbox > input:not(:checked) + label.is-no-select {
  &:before {
    content:" " !important;
  }
}
span[controltype="checkbox"].is-checkbox > input:checked + label.is-no-select {
  &:before {
    content:"\E001" !important;
  }
}

The "SemUI" Widget style looks very similar to "Public1" but does not have the issue with checkboxes so this is another suggested workaround.

Print this Article