Dynamic Column width in Service Portal Designer

[GanzertM]

Hi community, 

i am currently prototyping and trying build a Portal page with a "dynamic" column width. 
What do I mean? I have two instances of simple list widgets with respectiv widths of 8 and 4. The smaller list does not always show. Is there a way to change the width of the other list to 12, so it will stretch across the whole page?
The screenshot show a bit more, what I mean. 
Kind regards
Max

[Dr Atul G- LNG]

Hi @GanzertM 

No, it is not feasible. You are going to create technical debt by doing this,.

[ChrisBurks · Accepted solution]

Hi @GanzertM ,

This is doable and there are many ways of doing this. It's true you would be adding to some more "code" but this code is CSS and ServiceNow considers styling a configuration. The columns are made by Bootstrap which is a CSS framework.

For a quick howto ServiceNow already has an example to do this. Pull up the Topic Page [emp_taxonomy_topic] in Page Designer. You can see that the last container row has two columns. One is 9 and the other 3. If you select the column and click on the pencil on the top right of the page (not the widget), you're presented with the column details. You'll see in the right column that there are fields that you can add your own class names to.

Add your class names and then add your styles to either the page or the theme styles.

Edit:

Actually for the Topic Page the styling that enables the columns to grow/shrink is on the Row which also has a field to add your own or leverage baseline class names. Below screenshot is using the Page Editor to pinpoint the Row.

Screenshot of the topic page when there are Quick links for the selected topic

Screenshot when no Quick Links are available for the selected Topic

That is the out-of-box experience on Topic Pages. It's done with CSS styles