My page content is overlapping onto my footer in Service Portal?

[patricklatella]

Hi all,

I'm developing our Service Portal, and I've created a new page that is displaying performance analytics widgets.  The issue I'm having is that the content from the page is overlapping the footer.  This is not happening on other pages in my portal.  Anyone know the fix?  thanks!

[patricklatella]

Hi again Erik, do you have happen to know how to get the icon in the footer to be larger without increasing the size of the text?  Also, do you know how to get the the icon to show above the text link, not next to it?

[Erik Stolberg]

The icons are Font Awesome icons, and FA changes sizing based on classes: fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x. See the "Larger Icons" section on this page: https://fontawesome.com/v4.7.0/examples/

The "Header Menu" widget uses an ng-template called "menuTemplate" (sp_ng_template.list) to build the menu item structure. You will need to modify the line:

<fa ng-if="::item.glyph" name="{{::item.glyph}}"></fa>

to account for the new size class. It looks like ServiceNow is including an Angular Font Awesome package (https://www.npmjs.com/package/angular-font-awesome), so you could modify that line to utilize the "size" option like this:

<fa ng-if="::item.glyph" name="{{::item.glyph}}" size="2x"></fa>

You would then also need to modify they layout (since the menu is built using list elements) and change header sizing/padding/etc... I honestly am not sure I would bother going through all the trouble but that's just me. Hopefully that helps get you going down the right path if you opt to make changes.

[patricklatella]

Hi Erik,

thanks...yeah just playing around with the aesthetics...I tried adding the "size='2x'" (see my screen shot), but it didn't change anything...anything else I need to do?  You say to modify the layout, was that part of making this work, or necessary to adjust what this change did?

[patricklatella]

Hello Erik,

I was able to get the icon to show up above the text by adding some script to the "menuTemplate" record...what I added is between the commented out sections.  I also added some padding to the icon styles in the CSS.

<!-- script between commented out sections added by PL-->

<a ng-if="item.items.length == 0 && !item.scriptedItems" ng-href="{{item.href}}" target="{{item.url_target}}" title="{{item.hint}}">
<!--start--><div class="cubicMenuItemGroup"><!--end--><fa ng-if="item.glyph" name="{{::item.glyph}}"></fa><!--start--><br/><!--end-->
<span ng-bind-html="item.label"></span><!--start--></div><!--end-->
</a>
<a role="button" ng-if="item.items.length > 0" href="javascript:void(0)" class="dropdown-toggle sp-menu-has-items" data-toggle="dropdown" aria-controls="menu-apply" aria-haspopup="true" title="{{item.hint}}">
<fa ng-if="item.glyph" name="{{::item.glyph}}"></fa>
<span ng-bind-html="item.label"></span> <span class="caret"></span>
</a>
<ul ng-if="item.items.length > 0" class="dropdown-menu" role="group" id="menu-apply">
<li ng-repeat="item in item.items" ng-include="'menuTemplate'" />
</ul>
<a role="button" ng-if="item.scriptedItems.count > 0" href="javascript:void(0)" data-toggle="dropdown" title="{{item.hint}}">
<fa ng-if="item.glyph" name="{{::item.glyph}}"></fa>
<span ng-bind-html="item.label"></span>
<span ng-if="!item.scriptedItems.omitBadge" class="label label-as-badge label-primary sp-navbar-badge-count">{{item.scriptedItems.count}}</span>
</a>
<sp-dropdown-tree role="menu" aria-label="{{::item.label}}" ng-if="item.scriptedItems.count > 0" items="item.scriptedItems.items" />

[Erik Stolberg]

Very nice work! That took less time than I thought it would, so I actually cloned and modified "menuTemplate" on my test instance earlier to try some similar updates. It looks like adding the size="2x" option doesn't work like I thought... you can just append fa-2x into the name tag, however.