Possible to make a Service Portal header vertical (sidebar) instead of horizontal?

Chris Sanford1 · ‎04-25-2018

I am trying to create a vertical header menu on the left side of the screen in Service Portal, similar to the left menu on the HI Portal. But I haven't had much luck. If I set the height to 100% and give a fixed width with CSS, the menu will be vertical, but all of the content will fall underneath it, and you'd have to scroll way down to see anything other than the menu. Is there a way to configure a menu such that the rest of the page content will be side by side with the menu, rather than underneath it?

benjamin_alldri · ‎05-02-2018

Thanks. When you say 'Not entirely compliant with the SP way of doing things," do you mean that because the portal only lets you modify HTML at the widget level? That seems to be the limitation I'm faced with and the fixed positioning doesn't work since I can only apply that CSS at either the page level on the container class or the widget level.

So for the solution you show in that diagram, you're saying I would have to put the entire page content in one container and one row, put the sidebar on the left column, and put everything else within rows and columns of a second column of the same parent row. And repeat this on every page in my portal?

Yup, that's the way it'd work in normal HTML. As you mention, SP doesn't seem to give you that level of granularity so it's a bit of a rock and a hard place.

And that makes sense about not using margin for fixed positioning. I replaced "margin-bottom" with "bottom" and got the following:

It surprises me that bottom would still leave you with that result. You could try setting top, bottom, and left explicitly and let the browser determine height dynamically instead of setting it to 100%. Off the top of my head I can't remember which rule takes precedent when both of those are used together (I believe height likely does).

View solution in original post

Chris Sanford1 · ‎05-02-2018

Sorry, that was bottom: 0 not bottom: 100px. I could set top and bottom to hard-coded values, but that just doesn't seem very cross-platform or cross-browser friendly.

Here's an idea I haven't tried yet, but curious what you/other people think: give percentage based heights to the header and footer widgets, 100% height to the sidebar, and then put top and bottom floated, blank widget boxes at the top and bottom of the sidebar with the same percentage heights as the header and footer, and z-index them behind the rest of the page. And move the scrolling into the sidebar content list widget. Think it would work?

Chris Sanford1 · ‎05-02-2018

So what a CSS guru I turned out to be! </sarcasm> One simple concept seems to be getting me really close, absolute positioning, instead of fixed!

Here is my CSS:

.leftnav {
   position: absolute;
   border: solid 10px black;
   box-sizing: border-box;
   top: 0;
   height: 100%;
   width: 270px;
}

Now here is my portal:

Now there's one issue I have left, if my Portal is taller than my screen height so I have to scroll, the sidebar height doesn't extend to the bottom of the page (I'm using a fixed footer). I'd prefer to either have the sidebar fixed when I scroll, or having the bottom border at the actual bottom of the page. This has gotta be simple. Any help?

Chris Sanford1 · ‎05-02-2018

Setting top and bottom to viewport height fixed percentages, along with header and footer seems to be working fine. Thanks!

benjamin_alldri · ‎05-03-2018

Great work 🙂 absolute and fixed are fundamentally based on the same concept of position, so I'm not surprised you found it that way. I'm glad you got it sorted!

thoma5 · ‎05-07-2018

Hi Guys,

This is neat! So question... when you render the page in portal do you still have the horizontal header menu at the top?? In the he HI Service Portal site, it seems to have the actual header stuck on the left vs a column, because when the user scrolls the left header stays still while everything to the right of it moves as one page.

I am currently experimenting is changing the CSS of the header widget that the theme is calling. Because essentially a portal uses a theme that calls a header widget to display their header right? For now, I'm trying to figure out how to stop the header from taking up all the row space as a wrapper and pushing everything under or below it.

I'm trying to follow the bootstrap examples from Nate but they're only half helpful. I'll post more if I figure it out, but if you guys beat me to it, please feel free to share thoughts!

@nathanfirth I know you can't post any code, but maybe if you could lead us the way to the right direction that would definitely be helpful 🙂

Thanks,

TT