How to fix Business Central sliders displaying in the wrong place

A recent update to Chrome and Edge has meant that sliders (tick boxes) in Business Central are no longer displaying correctly. Instead, they are now all grouping at the top of their column. This blog will give you two proposed solutions to fix this issue.

The issue has been caused by the latest update to the Chromium code base, this is used both in Chrome and Microsoft Edge meaning the error appears in both browsers. The issue is browser based and caused by the way the browsers are rendering the CSS (Cascading Style Sheets), it’s not to do with Business Central itself and other online ERP solutions are experiencing the same issue!

The Chromium team are aware of the issue and are working on resolving, however, due to their release cycles it could take up to a month for a fix to be released. Microsoft are also looking at whether they can do anything at their end to prevent the issue occurring but the timescales are likely to be similar and also won’t resolve the issue if you have an on-premise installation of Business Central.

Because the issue stacks multiple sliders on top of each other you can’t know with any confidence which slider you are turning on/off, this means that certain pages are unusable (such as the Location page in the image).

There are a number of different solutions to the issue but we’re going to detail our preferred 2 options.

The solution(s):

1. Download Firefox. Yes really.

Firefox uses a different codebase (not Chromium) so is unaffected by the issue. It’s not ideal, particularly if you have a lot of shortcuts and means learning the quirks of a different browser but it’s only an interim measure.

2. Install a browser add on in Chrome or Edge and copy/paste a couple of lines of code. Wait! Don’t run away, it’s not that hard I promise you. I’ll guide you through it in a few simple steps...

Installing & Setting up the add on in Chrome and Edge:

The steps below are mostly the same for Chrome and Edge, I’ve used Chrome but where the steps are different I will make a note to tell you what to do.

Open your browser of choice and either follow this link to the Stylus add in on the Chrome store or navigate to the store (https://chrome.google.com/webstore) and search for Stylus and click on it.

NOTE for Edge only: You should have a banner appear at the top with an option to “Allow extensions from other stores”, click on that box (see image below). You will then get a confirmation box, click Allow.

Click Add to Chrome and then Add Extension.

Once installed a message will pop up saying it has been added.

Navigate to Business Central and log in as you would do normally. If you are using a SaaS installation you should be able to go straight to https://businesscentral.dynamics.com and log in.

NOTE for Chrome only: Click on the jigsaw icon in the top right corner of Chrome and click on Stylus.

 

NOTE for Edge only: Click on the Stylus icon in the top right corner of Chrome.

A dialogue box will pop up. Tick the box next to “Write style for:” the Business Central address should also show below the box like in the image below (this is the site that the change will work against). Click on the Business Central part of the link in the dialogue box (highlighted below).

A page will appear with lots of options on, all you need to do is copy the text below:

 

.booleancontrol-toggle-switch-container .edit-container .input-wrapper {     display: block !important; }

And paste it over the line that says /* Insert code here... */

It should end up looking like this:

If it all looks ok then click the save button in the top left corner:

Close the tab, go back to Business Central and open a page that has sliders on (Customer/ Vendor/ Item/ Location etc) and it should now appear correctly.

Hopefully this helps and thanks to Pi on Twitter for the Stylus fix.