Aligning the Dropdown Popup position of a SplitButton to the right

[Hung Luong]

Hi Syncfusion Team,

Currently, the Dropdown Popup of the SplitButton is by default aligned to the left of it.

However, I want the Dropdown Popup to be aligned to the right of it. Is there a way for me to achieve this?

Thanks.

[YuvanShankar Arunagiri]

Hi Hung,

Using the open event of split button component, we can customize the popup position show as below.

<SplitButtonComponent id='splitbutton' items={items} content='Save View view' open={onOpen.bind(this)}></SplitButtonComponent>

….

function onOpen(args) {

        var element = document.getElementById('splitbutton').parentElement;

        const rect = element.getBoundingClientRect();

        var left = (rect.left + rect.width) - (rect.left + args.element.clientWidth);

        args.element.parentElement.style.left = `${rect.left + left}px`;

    }

Sample link: https://stackblitz.com/edit/react-hd8kva?file=index.js

Get back to us if you need any further assistance on this.

Regards,

YuvanShankar A

[Hung Luong]

Hi YuvanShankar A, 

Thanks for your support.