[8.9.4.2012] Home Page - Service Category Nav CSS Modification

Ryan_Lane

Hello!
After updating to 8.9.4 I have noticed there's a bit of an alignment issue for the category navigation element on the Home page.  It's fixed to the screen so when scrolled all the way up will overlap with the search bar.  I have a temporary fix below, but if anyone has any better suggestions that would be much appreciated.

Current Behavior:

Looking at the related css for the element shows that the position and top values are set be fixed to the top of the screen:

As a temporary fix I have modified my custom.css to override position and top values to correct. '!important' is required for top in order to override the previously used '!important'.
custom.css (CiresonPortal\CustomSpace\custom.css):

<div>.service-catalog-content .service-request-nav.affix {</div><div>	top: 0px !important;</div><div>	position: absolute;</div><div>}</div>

Adam_Dzyacky

This has been acknowledged by Cireson as a known bug but way to go!

Ryan_Lane

I looked at the documentation for the Bootstrap Affix plugin as well as how the task panels in IRs/SRs work and think I've found a better solution to this issue.  I've taken a quick recording of the new behavior with my fix:

1. Small modification to the view.html template to change the affix binding top value from auto to 200.
\CiresonPortal\Scripts\viewPanels\serviceCatalog\view.html:

2.  Replace my previous custom.css modifications with the following:

</code>.service-catalog-content .service-request-nav.affix {
	top: 44px !important;
}
</pre><div><br>This fix is hardcoded to place the element at 44px from the top vs dynamically like the following javascript would (based off of task panels) but unfortunately I'm having issues coming up with a good place to put in the controller.js to match the task panel's template and still function correctly.&nbsp;<br><pre class="CodeBlock"><code><div>var serviceCatNav = $('#servicecat-nav').first();
serviceCatNav.affix({ offset: { top: serviceCatNav.get(0).getBoundingClientRect().top - 44 } });</div>

 Any ideas?