Disable the fixed page width
- Seth Petry-Johnson
Summary
In version 9.9, LearningBuilder introduced a fixed page width for most pages in the site. This can be disabled globally, or overridden on a page-by-page basis.
Why a fixed width?
We have observed that many people use the web with a maximized browser. This typically results in a responsive page stretching to fill the entire viewport, often resulting in a sub-par user experience unless that page was specifically designed to make use of tons of horizontal real-estate. Constraining the page width makes it easier to use by making text easier to read, reducing the amount of "mouse travel" that's needed to move a pointer across the screen, etc.
What pages use the fixed-width?
As of Release 9.9.0, everything uses the fixed width except the following:
- (All Areas) → Report Viewer
- Admin → Permission List
- Admin → Member → Activity List
- Admin → Workflows → Edit Workflow
- Auditor → Activity Audit Queue
- Provider → Activity List
- Sys Admin → Jump Link Editor
- Sys Admin → App Config Editor
- Sys Admin → Attribute Definition Editor
Based on feedback, we are considering changes for the next release that would enforce the width in the Practitioner area only, allowing Administrators and Operators more flexibility to utilize wide-screen monitors when working in the application.
Globally disabling the fixed width
To disable the entire feature, use the SysAdmin → App Configuration page to set the UseFixedWidthLayout setting to false.
Disabling the fixed width for specific pages only
If you want to keep the fixed width enabled for most of the site, but disable it for specific pages only, you can do that with some simple CSS. (Common candidates for this technique are search queues that have been configured with a large number of result columns)
Step 1 - Determine the "page-specific CSS class"
Every page in LearningBuilder is assigned a unique CSS classname. To find it:
- While on the page in question, right-click on the page background and choose "View Page Source"
- When the HTML code is displayed, do a text search for class="url
- You should find a result that looks like this screenshot. Make a note of the full text contained within the quotes (circled red in the image)
Step 2 - Create a CSS rule that ignores the fixed width for that page
- Go to Admin → Tenants and click the edit icon (NOT the "Configure" button) for the relevant Tenant
- Modify the Custom CSS section using one of the samples shown below
#home.<YOUR-CLASSNAME-HERE> .fixed-width-content {
max-width: inherit !important;
}
#home.<PAGE1-CLASSNAME-HERE> .fixed-width-content,
#home.<PAGE2-CLASSNAME-HERE> .fixed-width-content,
#home.<PAGE3-CLASSNAME-HERE> .fixed-width-content {
max-width: inherit !important;
}
#home.url-eligibility-queue-show .fixed-width-content,
#home.url-auditor-auditqueue-show .fixed-width-content,
#home.url-admin-profile-adminprofilelist .fixed-width-content,
#home.url-activityapprovals-activities-list .fixed-width-content {
max-width: inherit !important;
}
Changing the width of the fixed-width area
Not officially supported
It is technically possible to change the width of the fixed-width content area by overriding the fixed-width-content CSS class.
However, this is not an officially supported technique; if you change the width of the content area you may run into problems with future versions of the software that will not have been tested against your custom width.
Unless you understand the consequences, we recommend that you accept the default width or opt out. Customizing the width itself should be done sparingly.
Related articles