how do we update sp-bootstrap.scss (CSS) file to remove reference field workaround?

[Randall Arnold]

After we moved to a service portal, we noticed that the data picker for reference fields was getting truncated.  After a bit of search, I found the cause here: https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB0832673.  Apparently someone implemented a CSS formatting workaround for the issue described, and now it needs to be removed.

Debugging a catalog page led me to find the offending code in a file called sp-bootstrap.scss:

.field-has-reference .reference {
	display: table-cell;
	width: 100%;
	max-width: 0;
}

The KB says I need to remove the max-width setting.  Problem is, I can display the sp-bootstrap.scss file via url (https://<instance>.service-now.com/styles/scss/sp-bootstrap.scss), but for the life of me I can't find where in ServiceNow we're supposed to edit it...

EDIT: sp-bootstrap.scss doesn't look like the actual problem.  See follow-up posts.

[Randall Arnold]

Thanks, that got me farther. Here's what I had to implement in our catalog item widget:

.select2-container .select2-choice > .select2-chosen {
  	max-width: none;
}

.select2-container.select2-allowclear .select2-choice .select2-chosen {
    margin-right: 500px;
    max-width: none;
}

.field-has-reference .reference {
	display: table-cell;
	width: 100%;
	max-width: none;
}

I have to add all 3 of these elements or there's no effect.  It *works*, but so far I'm forced to use margin-right: 500px; because for unknown reasons I can't get percentages to work on it.  That's a problem: I do not want to hard-code the margin.  So I still have some digging to do... I'm sure I'm missing something but it's been ~15 years since I worked with CSS.

[Randall Arnold]

I've spent about 20 hours on this with no idea how to fix it.  It looks like someone may have set the element to max-width: 150px, overriding the min-width: 150px default. Probably a simple typo. Now the challenge is to find it... I've scoured our system and can't find any sign of this.  Nothing shows using browser debugger.

Weird thing is the problem only shows in our custom portal, and I can't find the difference between that and sp that could be causing this.  The irritating part is that a former contractor did this and walked away.

[Justin77]

Did you check the portal record, the theme record, widgets and any CSS includes?  CSS includes can be attached to widgets' dependencies related list as well as the theme record's CSS includes related list.

[Randall Arnold]

I've checked everything.  No sign of the offending CSS.  It doesn't even show in the page source using developer tools, so I'm utterly mystified.

[Randall Arnold]

Found the cause!  It was in portal CSS Variables.  I just flat missed it because we're hiding it on the form and like a noob I forgot to check list view columns.  The offending code is:

.add-on > button.lookup {
   display:none;
}

.field-has-reference .add-on {
	display: none;
}

Removing the field reference portion removes the bug.  BUT: I have no idea why it's there in the first place.  No mention in their design doc.  Hopefully the contractor will respond to an email.