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

To disable fixed width on a SINGLE page

#home.<YOUR-CLASSNAME-HERE> .fixed-width-content {
	max-width: inherit !important;
}

To disable fixed width on MULTIPLE pages

#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;
}

To disable fixed width on ALL QUEUES

#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

Page:
Disable the fixed page width (LearningBuilder Documentation)
- fixed-width
- responsive-design
Page:
Responsive Design (LearningBuilder Documentation)
- responsive-design

Browser not supported