Achieving Full-Width Containers in ServiceNow Service Portal

Are you looking to make your ServiceNow Service Portal pages more visually appealing and utilize the full screen width? Many ServiceNow developers and administrators want to create immersive experiences within the portal. This article addresses a common challenge: how to make containers and widgets span the entire width of a Service Portal page. We'll explore the reasons why your containers might not be full-width and provide practical solutions, including CSS adjustments and leveraging built-in configurations.

Understanding the "Not-So-Full" Width Container Issue in ServiceNow

When working with ServiceNow Service Portal, you might encounter situations where your containers or widgets don't extend to the full width of the page, despite your efforts. This can be frustrating, especially when you're aiming for a modern and edge-to-edge design. Several factors can contribute to this issue:

• Fixed vs. Fluid Containers: ServiceNow utilizes Bootstrap's grid system. By default, containers might be set to "fixed," meaning they have a maximum width and will not expand to fill the entire screen, especially on larger displays.

• Padding and Margins: Default CSS styles often include padding and margins on containers or columns. These styles create spacing around the content, preventing it from reaching the edges of the page.

• Conflicting CSS: Existing CSS rules in your theme or page-specific styles might be overriding your attempts to make the container full-width.

  
  

Solutions for Full-Width Containers in ServiceNow Service Portal

Here's a breakdown of proven solutions to achieve full-width containers in your ServiceNow Service Portal:

1. Leverage the Container Record Setting (The Simplest Approach)

This is often the easiest and most effective solution. ServiceNow provides a built-in setting within the container record itself:

• Navigate to the Page Record: Find the specific Service Portal page where you want to modify the container.

• Access Container Records: Within the page record, you should find a related list or section that displays the containers used on that page.

• Edit the Container: Open the specific container you want to make full-width.

• Change to Fluid: Look for a dropdown field labeled something like "Width" or "Container Type." Change the selection from "Fixed" to "Fluid."

• Save the Record: Save the container record.

  
  

This setting directly applies the container-fluid class from Bootstrap, which removes the fixed width and allows the container to expand to the full width of the screen.

2. CSS Overrides in "Page Specific CSS"

If the container record setting doesn't fully resolve the issue (perhaps due to existing padding or margins), you can use CSS to fine-tune the appearance:

• Access Page Properties: Open the Service Portal page record where you need the full-width container.

• Locate "Page Specific CSS": Find the field (often a multi-line text field) labeled "CSS" or "Page Specific CSS." This is where you can add CSS rules that apply only to this specific page.

• Add the Following CSS: The following CSS snippet addresses common padding and margin issues:

  
  

Explanation:

• .container-fluid: This targets the Bootstrap container-fluid class, removing the default left and right padding.

• .col-md-12: This targets a 12-column layout. Adjust the col-md-* value if your layout uses a different column configuration. This removes the default padding from the column itself.

• Save the Page Record: Save the page record to apply the CSS.

  
  

3. Addressing Height Issues

Sometimes, you might want the container to also span the full height of the page. Because the height of an element depends on the height of its content, use:

Explanation:

• min-height: sets a minimum height for the container, ensuring it stretches to fill the available space.

• calc(): allows you to perform calculations within CSS.

• 100vh: represents 100% of the viewport height.

• 222px: This is the combined height of your header and footer. You will need to inspect the page in your browser to determine the correct value for your specific implementation.

  
  

By subtracting the combined height of the header and footer from the full viewport height, you can ensure that the container dynamically adjusts to fill the remaining space, regardless of the screen size.

Embrace Full-Width Service Portal Designs

Achieving full-width containers in your ServiceNow Service Portal is often a straightforward process. By understanding the underlying factors that affect container width and utilizing the solutions outlined above, you can create visually appealing and engaging user experiences. Start by checking the container record setting, and then use CSS overrides for fine-tuning as needed. Embrace the full potential of your screen real estate and deliver a modern, immersive portal experience for your users.