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