We’ve noticed an emerging toggle button layout issue in Business Central starting with Chrome version 103.0.5060.x and Edge 103.0.1264.x. This specifically affects only the toggle buttons, and causes them to appear at the top of sections in the Dynamics 365 Business Central client.

Toggle buttons have a layout issue and are misplaced in Chrome 103.0.5060.53 and Edge 103.0.1264.37

Affected Chrome & Edge Versions

The following versions are affected for each browser respectively:

ChromeEdge
Chrome 103.0.5060.53Edge 103.0.1264.37
Chrome 103.0.5060.66Edge 103.0.1264.44
Chrome 103.0.5060.114Edge 104.0.1293.1

Affected Business Central versions

This affects both On-Premises versions of the Web Client, as well as the Microsoft Hosted edition. We’ve seen affected Business Central versions from 17.0, 17.1 through 20.2.

We haven’t seen any published cumulative updates that appear to try correct this so far. Both Google Chrome and Edge are supported browsers for Business Central, so we expect it will be corrected by Microsoft & Google in the coming days.

Workarounds & fixes for the toggle button layout issue

1. Temporarily use another browser

Microsoft’s current recommended workaround is to use Firefox temporarily.

While it might be possible to downgrade Chrome & Edge, or disable updates, we don’t recommend this. This would need to be undone later to prevent security issues and we’re hoping for a quicker fix via updates.

2. Have your partner modify your Business Central instance (on-premises only)

It is possible to have your partner modify the CSS file (discussed here) to resolve the issue without waiting for an update. This will work for each web client instance, however Microsoft Hosted instances will have to wait for an update via official channels.

  1. Browse to C:\inetpub\wwwroot\<instance>\wwwroot\Resources\desktopPreview.css
  2. Locate the property
    .booleancontrol-toggle-switch-container .edit-container .input-wrapper
  3. Set the display property to be block instead of inline-flex.

Make a reminder to revert this once the stable fix is released.

3. Apply the Business Central or NAV 2018 July Cumulative Updates

Microsoft-hosted instances have been patched for this issue of Business Central from 18.5 through to 20.2 Those on 19.1 and 19.4 are set for next Monday.

On-premises editions can be fixed using the July cumulative updates with an eta of 7th July for all supported versions except 20.3. This should include NAV 2018, BC 13-21.

4. Wait until Chrome or Edge v105.x is released

Microsoft have confirmed that Chrome and Edge 105.x will contain the fix to the rendering engine. Once this is released, undo any modifications to the CSS if you opted into workaround 2.

Technical details about the toggle button layout issue

Microsoft’s product team have identified the issue as a regression in the Blink layout engine and are working to revert or mitigate the issue. They haven’t listed on Known Issues at this time. There’s some activity on the Chromium Bug tracker issues #1339097 and #1339594.

Edge shares the same layout engine as Chrome, and so has affected Edge also since 103.0.1264.37. Although Microsoft were aware of the issue, it was disappointing they weren’t able to block the downstream update before it made it into Edge as well.

The issue is fixed in Chromium Canary which is the bleeding-edge version of Chrome, however this isn’t for daily use. It will take a few days/weeks for this to filter to Stable.

We’ll continue to update this post with any further details once we receive them.