CSS for full width containers Service Portal

[jotasolano]

Hello! I was asked to intervene the UI of a Service Portal page. I modified the "Homepage Search" widget to include a button below the search bar. However, the background image that was set under the Branding Editor is no longer visible for this widget. I decided that I wanted to have a background-color property instead, and that I wanted the container to span the full width of the page (equivalent to the container-fluid bootstrap class). Is there a way to do this?

Things I have tried:

1. Creating a div before the actual search widget div and setting position:absolute and width: 100% (results shown in image above)

2. Passing a CSS class to the widget container (which is 12 column) and passing width:100% to it under the Page Properties CSS (it results in a wrong rendering of the container, with 15px padding on both sides, but only visible on the left side). I don't want to edit the padding of this element because that's very wrong in terms of bootstrap practices.

Is it possible to pass a container-fluid class to the container element or some other way to make full-width containers/widgets inside a Service Portal page?

Thanks for the help.

[joshuadesouza]

so there is no way to dynamically adjust the height based on the contents? Or at the very least adjust the container to show a bit more?

[Dana2]

Hi,

I'll leave this here for future visitors 🙂

You can dynamically adjust the height of a page by using the calc() css function. Just add it to the body and/or container class in the 'Page Specific CSS' area.

Example:

.body .container {
     min-height: calc(100vh - 222px); /* Measured based on fixed height of header and footer */
}

[srinag]

section.page {
background-color:#e7e9eb;
}
section.page, main.body {
padding-top: 0px !important;
padding-left: 30px !important;
padding-right: 30px !important
}

try this in your page you can play little with hieght on containers 

[patricklatella]

Hi Brad,

I'm doing something similar, I've created an HTML widget for an image with text...I've changed the Width for the container to "Fluid" as you suggest, but I'm still getting a little white space to the left of the widget.  Any suggestions on what I'm missing to get it to extend the full width of the screen?  thanks!

[patricklatella]

and here's my source code for that widget