Align the position of the popup to the left side of the input element.

[Ton That Hung]

Hi Syncfusion Team,

By default, the popup is aligned to the right of the input. I want it to be aligned relative to the left side of the input element.

Expect:

Is there any way to achieve my request? 

Thank you for your assistance.

[Kokila Poovendran]

Hi Ton That Hung,

Thank you for reaching out to us at Syncfusion!

We understand that you're looking to align the popup to the left side of the input element in the DateRangePicker component.

We've reviewed your query and have prepared a tailored sample to address your specific requirement. Please take a look at the code snippet below:

const onOpen = (args) => {

    args.popup.position.properties.X = 'left';

  };

  return (

    <div className="control-pane">

      <div className="control-section">

        <div className="daterangepicker-control-section">

          <DateRangePickerComponent open={onOpen}></DateRangePickerComponent>

        </div>

      </div>

    </div>

  );

 

To provide you with a visual representation, we've also created a sample for you on StackBlitz. You can explore and experiment with the code in action: 

Sample: https://stackblitz.com/edit/react-aqqx6c-acktv6?file=index.js

For more details about the API and the open event, please refer to our documentation:

API: https://ej2.syncfusion.com/react/documentation/api/datepicker/#open

Screen shot: 



Regards,

Kokila Poovendran.

[Ton That Hung]

Thanks for your support.