Articles in this section

See more

Troubleshooting Misaligned Fields on HTML Forms

Avatar
Kim C.
  • Updated
Follow

About

Users on Windows 11, across multiple browsers, report that while working on HTML forms, fields become increasingly misaligned as they scroll down the form; the more pages that are in the form package, the lower fields appear on the form page.

This problem seems to have started occurring around January 16, 2023 and has possibly affected other companies including Wix that reports a similar issue ( ).

Quik! has determined that there were no updates performed in the Quik! environment on any system. Additionally, this problem appears only in Windows 11 (not Windows 10 or Apple OS / Mac). The problem occurs in Chrome, Edge and Firefox, which indicates the issue is not browser-specific and more global.

Thus, the only possible conclusion the Quik! team has come to is that a Windows update has somehow caused the issue.

NOTE: If a user reports misaligned fields and we’ve already confirmed that the fields are in the correct location on the form, below is how to troubleshoot and potentially fix or work around the issue.

How to Fix

This problem appears when a user has set one, or both, of the following settings to be incongruent with the other setting:

  • Browser Zoom Level

  • Windows Display Scale

The recommended settings for both of these values is 100%.

Quik! Forms are designed to work in browsers with 100% zoom and it is known that using the browser zoom level can cause the fields to become misaligned.

Fix #1: Set Browser Zoom to 100%

If a user’s browser zoom is not at 100%, change it to 100% and see if the problem is resolved. It is very easy to change the zoom level by pressing the CTRL key plus either scrolling a mouse wheel or hitting the + and - keys. In fact, it’s so easy that a user could cause the zoom to change by mistake without realizing it.

Fix #2: Change Windows Display Scale

Change the Windows Display Scale to 100%. This can be found in the Display Settings.

Fix #3: Change Both Settings For Optimization

Depending on the user's Windows Display Scale (part of the user’s screen resolution settings), they may require a different zoom level in their browser in order to view the forms properly. While 100% for both settings is best, it is possible to have good results by setting both to 125% - in other words both the Windows Scale and the Browser Zoom must match for acceptable results. It may also be possible to have different scales that are complimentary, like Windows Scale at 125% and Browser Zoom at 80%, because they are proportionally the same scale.

Example:

Here is a form zoomed in at 100% in the browser:

Zoomed_in_at_100_percent.png

 

Here is the same form zoomed to 75% in the browser:

Zoomed_to_75_percent.png

Zoom level alone can affect the placement of fields, especially as you go beyond page 10 and 20 in the form package.

 

Fix #4: Update Browser high DPI settings


Right click browser icon on Task Bar
Right click 'Google Chrome' and select 'Properties', this will pop up the Google Chrome Properties window


Choose Compatibility tab and click 'Change high DPI settings'
Check both checkboxes and set the drop down values to the selections shown below


 

 

 

Related articles