Can you change height of <fw-modal> dialog

App Platform
,
1

I’m trying to use a fw-modal to display a date picker. The problem the height of the model is not sufficient to include the date picker and I can’t seem to get it to increase its height.

Here is what I’m using:

<fw-button modal-trigger-id='large'> Open Large Modal </fw-button>
  <fw-modal id='large' title-text="Change Start Date" description="Pick start date in future." size="large">
      <fw-datepicker value="2020-05-22" date-format="YYYY-MM-DD"></fw-datepicker>
  </fw-modal>

The problem is the date picker ends up looking like this:

fw-modal_wiht_date_picker
fw-modal_wiht_date_picker1182×784 47 KB

As you can see, the date picker is cropped. You can scroll to see the rest but with this view height its very inconvenient to use.

I tried to increase the height of the model using either

 <p style="height:500px">&nbsp;</p>

or this:

  <p>&nbsp;</p> 
 --- repeat 20 times ---
  <p>&nbsp;</p>

This increased the modal view height a bit, but the size of the modal seems limited to the following

fw-model_with_hieght_500
fw-model_with_hieght_5001184×794 50.6 KB

I also tried to add the height attribute to the main window the modal is located within. In both cases this seems to increase the scrollable regions but I think I’m limited by the area allocated to integrations.

is there any way to resolve this issue so the model opens with sufficient room for the date picker?

2

I found another option which is an HTML widget that takes much less space and the popup it uses for date picker does not constrain within the modal.

A nice extra benefit is you can type in your date instead of just pick it (none of the freshworks date pickers let you type date which is a bit annoying - especially if you need to create a date well in the future).

3

@stevemc ,
Hope you are doing good!
We will look into this issue, and come up with a workaround at the earliest.

Thanks

4

The solution I came up with wast to move the control to a separate modal dialog showing up on right (the one that is full height). This leaves enough room for the full control.

2 Likes