Verifying disclosure icon alignment


#1

In the UI does the quiet theme disclosure icon alignment look centered vertically? Here’s from the UI Rename Artboard example:

Is there anyway to center the icon vertically?


#2

Hi @Velara,

I use this code to align items vertically inside a container:

let container = document.createElement("div");
container.style.display = "flex";
container.style.flexDirection = "row";
container.style.alignItems = "center";

Hope it works for you too.


#3

Thanks. I should clarify the disclosure icon is part of a drop down list.

// normal select
myList = document.createElement("select");
myList.uxpQuiet = false;

// quiet theme select
myList = document.createElement("select");
myList.uxpQuiet = true;

#4

why don’t you use ‘select’?

myList = document.createElement("select");


#5

That’s a typo. I’ve updated it.


#6

Solved? Is the triangle still not aligned?


#7

It’s solved now. :slight_smile: When the height is set lower than the default value in the normal theme the disclosure icon is vertically aligned. But in the quiet theme it looks like it is not.

Since the only visible part of the select in the quiet theme is the label and the icon I don’t need to set the height.