What are the values for the DropDownButton dir property

[Simon]

Hi

I am trying to set my dropdown menu from the dropdownbutton to appear to the left of the button.  Their is a property named dir of type string, which I am assuming does this but I cannot find the valid values for this property.  I have tried 'left'.

Any help would be appreciated.

Cheers

Simon

 

 

[Vessy]

Hello, Simon,

The DropDownList "dir" prop represents the standard html dir attribute used to set the direction of the elements. The accepted values are "rtl", "ltr" and "auto":

• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir 

Below you can see a sample where the direction of the DropDownList is set to rtl - is this the behavior you are after?

• https://stackblitz.com/edit/react-bjajmi-elbfxb?file=app%2Fapp.tsx 

Kind regards,
Vessy
Progress Telerik

[Simon]

Hi Vessy

That go me one step closer but not quite there.  It's a dropdowbutton (in a datagrid cell) that I am working with.

I started with this:

After changing the dir to 'rtl', I got this:

What I am trying to achieve is something like this which I created in MSPaint:

Any suggestions?

[Vessy]

Hi, Simon,

Thanks a lot for the screenshots. You can achieve a behavior similar to the one shown on the third image by configuring the popupAlign prop of the DropDownButton. It accepts a value of type Align which provides the following alignment options:

• https://www.telerik.com/kendo-react-ui/components/popup/api/Align/

For example, you can have a similar setup:

• https://stackblitz.com/edit/react-jqlyrq?file=app%2Fapp.tsx 

        popupSettings={{
          popupAlign: { horizontal: 'right', vertical: 'top' },
        }}