The CreatorCon Call for Content is officially open! Get started here.

How to stop a widget moving on the Service Portal Page

Richard Ounswor
Kilo Contributor

Morning All, I was wondering if someone might be able to answer what is hopefully a very simple question. Being new the Service Portal design I was wondering if there was a way to stop a widget from moving on the page. For example i have a 12 width container which is not populated with any widget, then below this I have a 9 by 3 directly below this with a widget in the right hand section which simply contains text. However when I preview the page the widget moves to the top of the page, I effectively want to FIX it in place so it displays exactly where I have put it on the page. Any ideas/assistance greatly appreciated.

1 ACCEPTED SOLUTION

Inactive_Us1976
Giga Expert

Hi Richard,

This occurs because the 12 width container is empty.  What I would recommend doing instead is adding padding to the top of the container with text that you want to remain stationary.  You can use the following CSS Classes in the class boxes in the container info (same area pictured above)

padder-t, padding-top-s, padding-top-m, padding-top-lg, padder-t-lg, padder-t-xl

More CSS utility classes

If this doesn't provide enough spacing, you can set this manually with CSS.

View solution in original post

4 REPLIES 4

Omkar Mone
Mega Sage

Hi 

Maybe the properties of container would be doing it. 

Change the property of container to Fixed .

Refer the below image :- 

find_real_file.png

 

Mark correct if it helps.

 

Regards,

Omkar Mone

www.dxsherpa.com

Richard Ounswor
Kilo Contributor

Hi Omkar, thanks for coming back to me so quickly, unfortunately this is already set, like you, I thought this would resolve the issue but it hasn't had any effect

Hi 

Then you need to make changes in the Widget itself.

 

Make configurations in your CSS to acheive this functionality.

 

Mark correct if it helps.

 

Regards,

Omkar Mone

www.dxsherpa.com

Inactive_Us1976
Giga Expert

Hi Richard,

This occurs because the 12 width container is empty.  What I would recommend doing instead is adding padding to the top of the container with text that you want to remain stationary.  You can use the following CSS Classes in the class boxes in the container info (same area pictured above)

padder-t, padding-top-s, padding-top-m, padding-top-lg, padder-t-lg, padder-t-xl

More CSS utility classes

If this doesn't provide enough spacing, you can set this manually with CSS.