UXP plugin: custom font dropdown clipped or hidden behind UI elements

Photoshop
1

Hi folks!
I’m trying to create my first UXP plugin for Photoshop.
At first, I used a dropdown list to select fonts. It worked, but the plugin froze for 30–40 seconds at startup while loading the font list — after that, it ran fine.

To avoid this delay, I switched to using an input field with a custom <div> dropdown for font selection. It’s much faster and works well — except for one issue: I can’t get the dropdown to display correctly.

  1. It’s clipped by the form boundary (unlike native dropdowns, which aren’t).
  2. It appears under other elements.

I’ve tried tweaking z-index, position styles, and even changing the HTML structure — but nothing helps so far.

image
image381×239 2.29 KB

Here is part of index.html:

<body>
    <table>
      <tr>
        <td><label for="font">Font:</label></td>
        <td>
          <input type="text" id="fontInput" placeholder="Type font name…" autocomplete="off">
        </td>
      </tr>
      <tr>
        <td><label for="positionSelect">Position:</label></td>
        <td>
          <select id="positionSelect">
            <option value="bottom-left">Bottom Left</option>
            <option value="bottom-right">Bottom Right</option>
            <option value="top-left">Top Left</option>
            <option value="top-right">Top Right</option>
          </select>
        </td>
      </tr>
      <tr>
        <td><label for="sizeSelect">Size:</label></td>
        <td>
          <select id="sizeSelect">
            <option value="small">Small</option>
            <option value="medium" selected>Medium</option>
            <option value="large">Large</option>
          </select>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <button id="btnOk" type="submit">Ok</button>
        </td>
      </tr>
    </table>
  </form>

  <div id="fontList" class="dropdown-list">
    <!-- Options will be dynamically populated here -->
  </div>

</body>
</html>

And CSS

:root {
  --label-color: #333; /* Default label color for light theme */
}

@media (prefers-color-scheme: dark) {
  :root {
    --label-color: #fff; /* Label color for dark theme */
  }
}

html {
  overflow: visible !important;
}

body {
  font-family: Arial, sans-serif;
  padding: 10px;
  position: relative; /* Ensure body establishes a stacking context */
  z-index: auto; /* Set a baseline z-index */
  overflow: visible; /* Ensure dropdown is not clipped */
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative; /* Ensure the form establishes a stacking context */
  z-index: auto; /* Ensure the form is above the body baseline */
  overflow: visible; /* Ensure dropdown is not clipped */
}

table {
  width: 100%;
  position: relative; /* Ensure table doesn't interfere */
  z-index: auto; /* Ensure no interference with dropdown */
  overflow: visible; /* Ensure dropdown is not clipped */
}

td:first-child {
  text-align: right;   /* Align labels to the right */
  padding-right: 10px; /* Add some spacing between label and input */
}

td[colspan="2"] {
  text-align: center;  /* Center-align the button */
}

label {
  color: var(--label-color); /* Use the dynamic label color */
  font-weight: bold;
}

select {
  z-index: 1; /* Ensure <select> elements have a lower z-index */
  pointer-events: none; /* Prevent <select> from interfering with other elements */
}

.dropdown-list {
  position: fixed;
/*  top: 100%;
  left: 0;
  right: 0; */
  max-height: 200px;
  overflow-y: auto;
  background: white;
  border: 1px solid #ccc;
  z-index: 9999;
  display: none; /* Hidden by default */
  pointer-events: auto; /* Ensure the dropdown is interactive */
}

.dropdown-list div {
  padding: 8px;
  cursor: pointer;
}

.dropdown-list div:hover {
  background: #f0f0f0;
}

What I do wrong?

2

Infinite z-index is an issue for 3-4 years already? All native elements have it… even scrollbars and there is not much you can do about it. You can e.g. hide them when dropdown is visible. Or you could try to put it into popover which is another native element with infinite z-index but I think it could be shown above… but it is not documented(?) I think and you could waste a days to get it right.

1 Like
3

That’s what I did in my plugin

1 Like
4

Thank you!
Yes, maybe hide/unhide is a best solution in this case