mongoplayground

mongoplayground copied to clipboard

Recently the Template div disappeared.

Looking at the HTML:

<div>
   <label>Template:</label>
  <div class="js-Dropdown" id="custom-template">
    <button class="js-Dropdown-title" style="width: 0px;">bson single collection</button>
    <ul class="js-Dropdown-list" style="width: 0px;">
    <li data-index="0" class="is-selected">bson single collection</li>
    <li data-index="1">bson multiple collections</li>
    <li data-index="2">mgodatagen</li>
    <li data-index="3">update</li>
    <li data-index="4">indexe</li>
    <li data-index="5">explain</li></ul>
  </div>
  <input id="showDoc" type="button" value="docs">
</div>

... should the width be 0?

The invisibility symptom is the same for me in Chrome and Firefox,

Hi @rickhg12hs,

this div is hidden if the screen width is lower than 1450px. On what device did you noticed this ?

Hi @feliixx,

It's a HP Pavilion x2 Detachable running Fedora 35, Gnome v41.6, Wayland. The display is 1920x1280 and there seems to be plenty of room.

Maybe related: Using Chrome's Inspect Console:

>  window.devicePixelRatio
<  1.375

you're right, it's because of the pixel ratio. I can reproduce this on my laptop ( with the same screen size as yours) when zooming in to 130% Sadly I have no idea why you have this pixel ratio :/ Maybe zooming out to 70% and reloading could fix the issue ?

You're right too. Chrome Zoom was set at 110% and Firefox wasn't full screen. Setting Chrome Zoom to 100% and full-screening Firefox made Template appear. Now I know.

I don't know if or how any of the javascript should be changed to compensate for this situation. Or should some notification/indication be shown that Template is hidden?