From time to time we may update the base OpenForms theme that your organization’s themes are built on to bring you new features or styling options.
This article describes the specific elements changed in each base theme version. For general information on base theme versions, and how to update your themes to the latest version, see create a theme for your form.
This information is most useful to qualified front end developers that may need to update a theme’s CSS or external stylesheet.
Version 2 - August 2021
Summary
This update includes the following commonly-requested improvements to form styling:
-
Improvements to the padding, keyboard tabbing order, text wrapping and the aesthetics of navigation buttons.
-
Improvements to the appearance of text in matrices to increase readability and responsiveness
These may cause breaking changes to form themes using the following CSS elements in external stylesheets or Custom CSS:
In addition, if you’re using the following CSS snippet supplied by OpenForms to change the appearance of navigation buttons in your forms:
@media only screen and (min-width: 700px) {
.of-display-navigation {
display: block;
}
.of-save-progress-button {
position: relative;
top: 0;
float: left;
}
.of-nav-next {
position: relative;
float: right;
margin-left: 20px;
margin-right: 0;
}
.of-nav-btn {
width: auto;
min-width: 140px;
}
.of-nav-prev {
position: relative;
top: 0;
float: left;
}
}
You will need to replace it with the following code:
@media only screen and (min-width: 700px) {
.of-display-navigation {
flex-direction: row-reverse;
}
.of-nav-btn:not(.of-nav-next):first-child {
margin-right: auto;
}
.of-save-progress-button {
margin-right: 20px;
}
.of-nav-next {
margin-left: auto;
}
.of-nav-btn {
width: auto; min-width: 140px;
}
}
Updated CSS elements, potential issues and fixes
The elements and properties below are potentially affected by the version 2 base theme update.
It's worth noting that while we've tried to list every issue and fix for these elements, this list is not exhaustive, and may present differently across different devices (mobile, tablet or desktop).
Navigation button containers
Affected CSS selectors:
Properties, issues and fixes:
|
CSS property
|
Possible issues
|
Potential fixes
|
|
display
|
Button positioning may be incorrect.
|
Remove any custom modification of this property.
|
|
height
|
- Button height may be incorrect.
- OpenForms footer may overlap buttons.
|
Remove or adjust custom modifications of this property.
|
Navigation buttons
Affected CSS selectors:
Properties, issues and fixes:
|
CSS property
|
Possible issues
|
Potential fixes
|
|
height
|
Button height does not match the length of button text.
|
Remove custom modification of this property, or use a combination of the min-height property and padding of button contents to set the desired height.
|
|
position
|
Button positioning may be incorrect.
|
Remove custom modifications of this property.
|
|
padding
|
Button text is not centered.
|
Adjust value accordingly.
|
|
width
|
Button positioning may be incorrect.
|
Remove or adjust custom modifications of this property.
|
|
margin
|
Odd gaps around buttons.
|
Remove or adjust custom modification of this property.
|
Navigation button text containers
Affected CSS selectors:
-
.of-nav-btn overlay,
-
of-nav-next overlay
Properties, issues and fixes:
|
CSS property
|
Possible issues
|
Potential fix
|
|
padding
|
Button text not centered.
|
Readjust value accordingly.
|
|
display
|
Button text not centered.
|
Remove custom modification of this property.
|
Paypal submit buttons
Affected CSS selectors:
Properties, issues and fixes:
|
CSS property
|
Possible issues
|
Potential fix
|
|
float
|
Button positioning may be incorrect.
|
Remove or adjust custom modification of this property.
|
|
height
|
Positioning of button might not look correct
|
Remove or adjust custom modification of this property.
|
|
width
|
Positioning of button might not look correct
|
Remove or adjust custom modification of this property.
|
Paypal informative text
Affected CSS selectors:
Properties, issues and fixes:
|
CSS property
|
Possible issues
|
Potential fix
|
|
float
|
Text position may be incorrect.
|
Remove or adjust custom modification of this property.
|
|
width
|
Text position may be incorrect.
|
Remove or adjust custom modification of this property.
|
|
text-align
|
Text position may be incorrect.
|
Remove or adjust custom modification of this property.
|
|
margin
|
Text position may be incorrect.
|
Remove or adjust custom modification of this property.
|
Matrix field tables
Affected CSS selectors:
Properties, issues and fixes:
|
CSS property
|
Possible issues
|
Potential fix
|
|
table-layout
|
Changed from fixed to auto.
|
Remove any custom widths on the columns.
|
|
word-wrap
|
Word wrapping now works correctly.
|
Remove unneeded custom word-wrap in your CSS.
|
Location fields
Affected CSS selectors:
Properties, issues and fixes:
|
CSS property
|
Possible issues
|
Potential fix
|
|
padding-right
|
Text may take up unexpected space.
|
Remove any custom widths on columns.
|