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

nathanfirth · ‎04-25-2018

Yes, we have done this with quite a few of our portals. Unfortunately, I'm not able to share the code we've developed... however if you Google search "bootstrap sidebar" you will get tons of tutorials on ways of achieving this. The HTML markup of Service Portal won't match that of the tutorials, so you will need to update the CSS to reflect the markup of your theme header.

It's not very difficult, and the side nav does look pretty amazing in Service Portal.

If you get stuck, another thing you can do is use Chrome Developer Tools to inspect how ServiceNow is doing it in HI. All of their CSS is available to inspect.

-----------------
Nathan Firth
Founder and ServiceNow Architect
NewRocket, Inc.
nathan.firth@newrocket.com
http://serviceportal.io
http://newrocket.com

Chris Sanford1 · ‎05-01-2018

Thanks Nathan,

So after looking at the HI Service Portal CSS it looks like they're putting the sidebar in a container. I was able to get a sidebar on my homepage with the following steps:

-Create a container with order 1 on my homepage

-Give the container a CSS parent class name of "leftnav"

-Add the following page-specific CSS:

.leftnav {
   position: fixed;
   border: solid 10px black;
   width: 270px;
   overflow: scroll;
}

-Add a widget with an html list to the container

I've still got a couple issues though. One is if I give it height 100%, it seems to actually go past the bottom of the page. How can I prevent this? I tried adding a bottom margin and that didn't work. Also, this method would require me to add this container and CSS to every page on my portal. Is there an easier way to get it on my entire portal, like the top header bar? I understand you can't share code but any help would be much appreciated!

benjamin_alldri · ‎05-01-2018

Have you got any margins applied to your sidebar or body?

Also, try adding box-sizing: border-box; to your rule. That will force the sizing of the box model to behave more in line with what you are expecting.

Chris Sanford1 · ‎05-01-2018

I tried a bottom margin on the sidebar before with no luck. I'm not sure how I could apply a body margin to fix this issue. I just tried the following page CSS with no luck.

section.page {
	background-color: $sp-homepage-bg;
}
section.page, main.body {
    padding-top: 0px !important;
}

.leftnav {
   position: fixed;
   border: solid 10px black;
   box-sizing: border-box;
   margin-bottom: 100px;
   width: 270px;
   height: 100%;
   overflow: scroll;
}

The bottom border is not visible at all, and the scroll bar is blank with no option to scroll.