Viewport Sub-pages

Hi guys, I am using the viewport sub-page functionality to display relevant data at the top of pages beneath the viewport. When pages displaying the viewport sub-page are scrolled, the sub-page data is scrolled off the top of the page. Is there anyway that this sub-page can be made persistent when the pages are scrolled?

1 Like

Hi Robert,

I’ve tried your scenario building a viewport nuggets subpage to display some general case info. I wanted to keep it fixed on top. But there isn’t a way to keep it all fixed when user scrolls down.

It might be possible with a customer CSS hack. Here is a screenshot of one of my apps where I tried to do the same thing:
.

Regards,
Asif

Hi Robert…

Yes, this is possible using CSS but it can require a bit of experimentation. It is a little difficult to comment fully as I cannot see your system.

First of all, I am making some assumptions:
~ you are planning on locking the viewport to the top navigation bar
~ you are planning on having the content of the page to flow/scroll behind the nav

But I think you will get the idea.

I would decouple the viewport from the page by making it fixed in CSS… this also requires changing the z-index value to put it in front of the page - you may or may not need some of the options here to work with your design:

.VIEWPORT {
    position: fixed;  /* detaches the viewport and fixes it in place */
    top: 90px;  /* locks the viewport 90px from the top of the page */
    left: 0;  /* locks the viewport to the left hand side of the screen */
    width: 100vw;  /* makes the viewport as wide as the width of the page */
    padding: 1.5rem 1rem 1rem 1rem;  /* adds some padding */
    z-index: 1018 !important;  /* places the viewport in front of the page */
}

Secondly, I would look at the sizing and treatment of the subpage contents. For example, I frequently find the nuggets a bit bulky if they are over-used, so I would look at making them a bit smaller and play with their appearance and spacing.

Thirdly, there is a bar which contains the back button would need placing above the viewport:

ol.breadcrumb.page_toolbar {
    z-index: 1020;
    position: fixed;
    top: 90px;
    width: 100vw;
}

Finally, because are locking so much to the top of the page, the contents of the page need spacing above or they will disappear behind the newly positioned viewport.

.VIEWPORT+.row {
    margin-top: 150px;  /* this will push the content down - experiment based on the heights in your design */
}

There are probably other things to consider, but without seeing your design, it is hard to be really specific.

Hope this helps :slight_smile:

Paul

H guys, thanks for the replies, much appreciated. I put this here as more of a suggestion for a future release, that will cater for those sub-pages like it now does for the list headings. Thanks again

1 Like

Sounds good.

If you do try to implement the code, let me know how it goes. If you are experiencing some issues, feel free to speak to your account manager to see if I, or a member of my team, can look at your system with you.

All the best :slight_smile:

Hi guys, although I put this in as a suggestion, I would like to make this a formal change request.
Thanks,
Bob

Hi Paul, we have played about slightly with your code, and the result is very good. Screenshots & code below, although it still needs slight tweaking as the ‘breadcrumb’ is too long, I think, we have lost edit/pdf buttons.

image

image

image

Thanks again, Bob

Cool, glad I could help.

The structure of the UI is being rebuilt at some point and when that happens the way things work will change in a number of ways which would lead towards a lot more control in various areas.

All the best :slight_smile: