Atlaskit datePicker hidden by the container div

Jira Development Jira Cloud
, ,
1

I am using atlaskit date picker and DateTime picker. I am facing issue with position datePicker hidden by the container div. In issue pannel

Calender
Calender867×281 5.71 KB

  • atlaskit/datetime-picker - version 10.0.1
  • Reactjs - 16.13.0
<DatePicker
  label={label}
  isRequired={Data1.required}
  onChange={(e) => this.onChangeField(e, key, type, 'Date')}
  defaultValue={defValue}
  isDisabled={!this.props.isEditIssuePermission}
  dateFormat="DD/MM/YYYY"
  placeholder="Select Date"
/>
1 Like
2

Hi,

you could try adding a menuPortal to the DatePicker’s select props.
Should look something like this then:

<DatePicker
  label={label}
  isRequired={Data1.required}
  onChange={(e) => this.onChangeField(e, key, type, 'Date')}
  defaultValue={defValue}
  isDisabled={!this.props.isEditIssuePermission}
  dateFormat="DD/MM/YYYY"
  placeholder="Select Date"
  selectProps={{
	menuPortalTarget: document.body,
	styles: {
	   menuPortal: (base: any) => ({
	      ...base,
	      zIndex: 9999,
	   }),
    },
  }}
/>

For more info, view React-Select documentation.

3

Thanks for your response.
I added the style that you mentioned in the code. if I am having multiple date and date time picker this for some it is working for others it is not working. My form is dynamic for based on type I am assigning field.
for example
1 date field Select field
2 text field date-time field
3 date field date-time field

in the above example for the first row and second row, this style is effecting properly but for third row it is not affecting.
image (1)
image
Please help me to fix this issue

2 Likes
4

Hi.
Does anyone have more ideas on how to fix the menu positioning as described above?