Dialog height question

[ovaisa]

I am trying to add a control in my UI similar to animation control in frontend>scientific-visualization-sample (slider rather than animation control). This is a conditional slider that only shows up if a certain command is active. I tried to use Dialog for this purpose with just a slider control.

It seems that I am not able to make the dialog height smaller than a certain size irrespective of what I specify as 'height' parameter. I want the dialog to be only slightly bigger than the slider control.

Here is my code. 'height' parameter doesn't seem to make a difference if it is less than about 100

  <Dialog opened={true} modal={false} hideHeader={true}
          width={300} height={10} alignment={DialogAlignment.Bottom}>
  <Slider min={1} max={100} values={[1]} step={1}></Slider>
  </Dialog>);

Is there a way I can reduce height of this dialog to fit the slider control.

Dialog will do the job, ideally I would like the slider to show up next to the toolbar icon when the icon is selected. I created a mockup to show what I would like. I looked at the Popup control for this purpose and got it to work as shown in examples which show how to make it appear next to control with known HTMLElement. In my case I would like it to popup up next to toolbar icon (which I created using ActionButton). I don't know how I can get the HTMLElement for this toolbar icon (which is required for 'target' parameter in PopupProps).

If there is an example code to show how this can be achieved (using Popup or another mechanism) , it would be really appreciated.

Thanks

[ovaisa]

It seems 'minHeight' and 'minWidth' can achieve this. I am able to get dialog to desired size using these parameters.

I would still appreciate a response on how I can get the slider to appear next to toolbar icon...

Thanks,

[bsteinbk]

Settings for tools buttons are typically shown in one of two places: tool settings area or popup panel. Below is an example of both.

I believe you are wanting more of the popup panel approach. If so try adding the following to your list of vertical toolbar items.

    const customPopupButton: CustomToolbarItem = {
      isCustom: true,
      id: "test.custom-popup-with-slider",
      itemPriority: 220,
      icon: "icon-arrow-left",
      label: "Slider Test",
      panelContentNode: (<div style={{ width: "300px", height: "38px", padding: "6px", boxSizing: "border-box" }}>
        <Slider min={0} max={100} values={[50]} step={1} />
      </div>),
      groupPriority: 20,
    };