order guides on the service portal - 'floating submit button'

garethprice
Kilo Expert

I have an order guide containing multiple request items on the service portal.

some customers have asked if the included items and submit button can follow the window as they scroll down the screen.

is this possible?

find_real_file.png

1 ACCEPTED SOLUTION

brianrichards
Tera Guru

Ideally you would create a custom CSS class for the widget, but the quickest path to making this change using stock pages, widget, etc is as follows:



Modify the page on which the order guide appears, such as 'sc_cat_item_guide':



In the Service Portal Configuration > Design interface open the page 'sc_cat_item_guide'


Click on Edit Page Properties


Update the page specific CSS as follows:



.col-sm-3


{


      position: fixed;


      top: 200px;


      right: 0px;


}



This is very specific to that page and the stock order guide widget. Customize as per your environment's needs.


View solution in original post

7 REPLIES 7

brianrichards
Tera Guru

Ideally you would create a custom CSS class for the widget, but the quickest path to making this change using stock pages, widget, etc is as follows:



Modify the page on which the order guide appears, such as 'sc_cat_item_guide':



In the Service Portal Configuration > Design interface open the page 'sc_cat_item_guide'


Click on Edit Page Properties


Update the page specific CSS as follows:



.col-sm-3


{


      position: fixed;


      top: 200px;


      right: 0px;


}



This is very specific to that page and the stock order guide widget. Customize as per your environment's needs.


Perfect!



Thank you


Hi



I'm also very interested in a working solution, and have not been able to get anything to work properly.



Your solution also does not really work - even if I try it in an OOTB Jakarta instance. The Items box is placed all the way to the right and is too big.


Do you have any suggestions on this?



find_real_file.png


Hi Lars



Change the CSS to the following



.col-sm-3


{


      position: fixed;


      top: 200px;


      right: 550px;


      width: 350px;


}



this should give you more desirable results