Widgets and CSS - position based on one another

SNNoob · ‎02-14-2023

Hello!

I have a page in Service Portal that shows information about a request to a user (this is a widget). To the right of the same page are two additional widgets, one widget with available actions and beneath it, widget that has a timeline.

I want to make these two widgets on the right to be floating, i.e. when I scroll down the page, they would stay visible on the right. I know that adding "position: "fixed" in the CSS of the widget would allow it to stay but if I add it to both, they appear on top of each other. I would need these two to stay in same position relative to each other while also floating in the page. If this was just one widget, this would be a piece of cake but I'm struggling on how to make this with two widgets so that they remain in correct positions.

Not all that familiar with CSS so any ideas would be very much appreciated.

Pushkar-Snow · ‎02-15-2023

Hi @SNNoob ,

If the height of the first widget is not changing you can add that to the fixed position for second widget.

Suppose first widget height is 100px. You can write below CSS code for positioning:

.widget1 {
    position: fixed;
    background-color:red;
    color:#FFF;
    top: 0px;
    height:100px;
}

.widget2 {
  position: fixed;
    background-color: blue;
    top: 101px; // adding widget1 height to position this widget
}

If height for widget 1 is changing then you can only position second widget using javascript

Please ask if you face any problem.

If I am able to help you with your question, Please click the Thumb Icon and mark as Correct.

Regards,

Pushkar

View solution in original post

jaheerhattiwale · ‎02-14-2023

@SNNoob Add the css like below

position: sticky;

bottom: 0;

top: 0;

Please mark as correct answer if this solves your issue.

Please mark the answer as correct or helpful based on impact
ServiceNow Community Rising Star, Class of 2023

SNNoob · ‎02-14-2023

Hi, thanks for your reply.

Sticky command does appear to function for me in Service Portal. Adding this position command does not do anything, just keeps them at the top of the page.

jaheerhattiwale · ‎02-14-2023

@SNNoob Its should work as i have used it in Service Portal already. Please do trial and error with this by inspecting.

Please mark the answer as correct or helpful based on impact
ServiceNow Community Rising Star, Class of 2023

-O- · ‎02-14-2023

A possible solution is to create a 3rd widget that embeds the other 2 and float the 3rd one.