HTML layout renders differently on fiddle and on browser

Question

I have made a small web page, the source code of which is available on FIDDLE . It uses a jquery plugin which I made for autocomplete.

The plugin adds a new div (.mridautocomplete-list) after the initialized inputs, which contains the autocomplete list :

<input id="test1">
<div class="mridautocomplete-list" style="display: block; left: 8px; width: 169px; position: absolute; background-color: white; border: 1px solid rgb(221, 221, 221); max-height: 150px; overflow-x: hidden; overflow-y: scroll; font-family: Arial; font-size: 13.3333px; z-index: 8888;">
    <p class="mrid-autocomplete-item" style="margin: 0px; padding-left: 2px; text-align: left; font-size: 13.3333px; cursor: default; background-color: white;"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="mridautocomplete-item-image" style="height: 11px; width: 11px;"><span style="color: #4682B4; font-weight: bold;">a</span>aa</p>
    <p class="mrid-autocomplete-item" style="margin: 0px; padding-left: 2px; text-align: left; font-size: 13.3333px; cursor: default; background-color: white;"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="mridautocomplete-item-image" style="height: 11px; width: 11px;">b<span style="color: #4682B4; font-weight: bold;">a</span>b</p>
</div>

<input class="test2">
<div class="mridautocomplete-list"></div>

<input class="test3">
<div class="mridautocomplete-list"></div>

The problem is :

This web page renders perfectly as expected on fiddle

But when I run the same code on my browser ( without fiddle ), it doesn't get displayed properly, shifting all elements ( SHOWN IN SCREENSHOTS ATTACHED )

Can anyone explain what might be causing the problem ?

Answer 1

Your .test2 class is a width of 80% .

The other inputs have a default width of 173px.

If you resize the fiddle window to a larger width, you will see the same issue.

To fix this you could add a display: block to your .test2 class.

Answer 2

Have you already tried the display CSS property? Setting the second input to "display: block" forces the 3rd input to the next line.

Another option is to place the autocomplete Javascript just before the closing body tag. This also worked for me in Chrome, Firefox and Safari.