microsoft / microsoft/azure-devops-extension-sdk
How to size Custom Work Item Form Control (Dropdown) correctly?
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 159
- Forks
- 53
- PR merge metrics
- No merged PRs in 30d
Description
Hi,
I've implemented a custom work item form control which just consists of a simple drop-down. The drop down items are bound through code and all works as expected except for the size of the drop-down list. I can specify the size if the control in the extension manifest through the height property. The dropdown list with the available values is sized based on the height property. If the height value is large, the drop-down list is show shown also larger but this has the downside that a lot of empty space is reserved on the work item form for this control. If the value is low (for example 70, which should be sufficient for a simple drop-down) the drop-list is really small (just showing one item).
I can see other built in drop-down list on a work item form which are using minimal space and the drop-down list is expanded and shown as a nice list. I need to know how to achieve this behavior for my custom control as well. Do I need to place specific CSS classes on my HTML elements? I experimented with different styles but none of them seem have an effect. This is my current rendering code:
<div className="flex-item" style={{ margin: "8px", width: "99%"}}>
I tried "flex", "flex-box".
Any hints?
Thanks.
Georg
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The issue mentions the extension manifest height and the JSX rendering in the body; start by checking how that height is applied to the custom control and how Dropdown renders its list. Done means the dropdown expands to show its options without reserving excessive form space; no file or test is named in the report.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100