Custom CSS - Upgrade to Portal 8.12

Brendan_Smith

My company has been running on portal v7.2 for some time, with quite a few customisations. I have recently updated our dev environment to 8.12 and am experiencing a couple of strange issues with form controls.

In Active Work and Team Work grids there was 2 right-arrows slightly offset in the title cell when hovering over a work item. Strangely this wasn't an issue when looking at My Work. I uploaded my custom.css to the Cireson portal themer (http://portalthemer.cireson.com) and downloaded the custom.theme.min.css that was generated and it fixed that issue. 

The main issue that I still have is I get 2 arrows slightly offset on all of my dropdown lists on the work item form. They both populate the same list, however 1 will have the lists in a hierarchy where you can expand to see the child items. The other will populate it as you would see a file path with a \ on a single line. I have included screenshots which will offer a better explanation.



I have been trying for hours to find what in the CSS file could be causing this, but I am not having much luck. If anybody can offer a pointer to which elements I should be looking at it would be much appreciated.

I also have a similar double-up of the border on the action log, but that appears to be just cosmetic so is not as much of a problem.

Geoff_Ross

Hi @Brendan_Smith
When you use the Themer tool there is a version selector at the top. Re-upload your current file, and then select the newer version at the top and then download.

Geoff

Brendan_Smith

Hi Geoff,
Thanks for the tip. I did try that and there was some difference in the colouring when selecting the newer version however the issues that I outlined were still there. 

Strangely when I used the theme produced by the newer version selector I had a very different error as well. When clicking in a work item, the title bar at the top that stays locked was showing Add Device and appeared to have a widget from the SCCM portal. I had options to add user device etc. 

Definitely some strange behaviours. 

Brendan_Smith

Some information to this Geoff as I've been playing with this all morning.

I have now created a theme manually using the portal themer GUI. If I use the later version in the portal selector it fixes my issue with the double dropdown lists. However the title bar displays a widget to Add Device, rather that the work item title.



I've looked at the html code using developer tools in Chrome and the below widget is added in when I use the custom.css (I have disabled everything else in my Custom Space folder).

<h3 class="content-header__flyout__title">

<img src="../../../../Content/Images/Icons/RemoteManage/remote_management.svg" class="content-header__flyout__title__logo">

<span>Remote Management</span>

</h3>

<div class="content-header__flyout__section">

<div class="content-header__flyout__section__title">Users</div>

<div class="content-header__flyout__section__main">

<div class="dataUserContainer">

<div class="support-tools__widget support-tools__widget--item-selected support-tools__widget--user-selected" id="affectedUserdataTemplate" data-bind="click: widget.clickContainer, value: widget.affectedUser">

<div class="support-tools__widget__icon-container">.......etc

I'm not much of a developer in fairness, but I am struggling to see how using CSS could force extra code to be added into the page.

I'm trying to decide if it's more efficient to try and solve this issue, given that the dropdowns are working. Or if I should revert to the previous custom.css and try to fix the dropdowns.

Brendan_Smith

Thanks for your tip Geoff, but I have given up and have just started from scratch. Hopefully will be able to get close to what we had previously.

It is worth noting though that I downloaded the default css from the portal themer with version 8.4-8.10 selected and it did not work correctly on portal 8.12. It had the Add Device widget in the title bar as above.

Geoff_Ross

Hi @Brendan_Smith
I was finally able to find time to have a look at this. I found two troublesome 'lines' in the custom.theme.min.css files the themer produces. I'll pass this back internally but as this tool is still in beta, this could take a while to get fixed so you may want to fix manually.

The file is very hard to edit as its minified, eg all the code is placed into 1 very long line with no spaces or anything. But if you use a decent text editor here's two find and replaces to use, each will only find one thing to replace. I suggest you take a copy of the file before hand in case you break it.

Find	Replace
.content-header__container{position:fixed;w	.content-header__container{w
margin-top:10vh}	margin-top:12vh}

Good luck, let me know how you get on,

Geoff

Brendan_Smith

Thanks Geoff, will give it a go and let you know.

That css file is quite the monster to navigate through.

Geoff_Ross

Indeed, it is not designed to be edited, quite the opposite in fact. Good luck!

Brendan_Smith

Thanks so much Geoff. That worked perfectly and I'm now back to my original colour scheme.

Appreciate the hard work, that would have been like finding a needle in a haystack.