Add elastic position strategy to igxOverlay

[lalo-mx]

Description

Add elastic position strategy to igxOverlay.

• igniteui-angular version: 6.2.0-beta.3
• browser: Chrome 69.0.3497.100

Steps to reproduce

1. Open sample Example Dropdwon bottom page
2. Click on Options button

Result

Scroll does not appears when exists many options and the dropdown is not fully visible.

Expected result

If the dropdown is the last element of the page then it adjust automatically in order to be shown.
Also that if the content of the overlay is not visible on the screen the container will have a scroll.

Attachments

dropdown-scroll.zip

[wnvko]

igxDropDown has no default height. If you do not set height for your igxDropDown it will render without scrollbar. To fix this set height of the drop down, either in markup or in code behind like this:

<igx-drop-down #dropdown1 height='400px'>
    <igx-drop-down-item *ngFor="let item of items">
        {{ item.field }}
    </igx-drop-down-item>
</igx-drop-down>

this.igxDropDown.height = '400px';

If you set this in code behind nice place to place it is in OnInit event handler.

[lalo-mx]

Yes, that solution works but it would not work very well for mobile. I tried setting the height to 100% and it did not works. Should the dropdown be responsive?

[wnvko]

If you set the height to 100% this should not work too. IgxDropDown uses IgxOverlayService to show itself. What overlay does it next. It takes the drop down items container. Measures its size. Creates host element. Positions the host element and puts the drop down items container inside it. When you set 100% height the container of drop down items returns the total height of all items - this is the same as to leave the drop down without height. If you want to go with 100% you may put drop down items in a container with predefined height like this:

<igx-drop-down #dropdown1>
  <div style="height: 200px">
      <igx-drop-down-item *ngFor="let item of items">
          {{ item.field }}
    </igx-drop-down-item>
  </div>

However this is the same as to set the drop down height to 200 px.
Why you think drop down is not responsive?

[lalo-mx]

One responsiveness that i was expecting of the dropdown is that if the field is the last element of the page then it does not show as expected. For example Example Dropdwon bottom page

Also that if the content of the overlay is not visible on the screen the container will adjust automatically and/or have a scroll. I will use your suggested workaround.

[wnvko]

We have investigated this additionally. Right now igxOverlay service is able to position content in three ways:

• global - show the content related to the screen;
• connected - shows the content related to an element - this is what igxDropDown uses;
• auto - show the content related to an element, and flips it if it does not fit in the screen;

What you need is something like elastic position strategy - this should be like connected, but should resize element if it does not fit on the screen. This is something we do not have right now.

Can you please rename your issue to something like 'Add elastic position strategy to igxOverlay'?
I am reopening now this issue and will label it as feature request.

[lalo-mx]

We have investigated this additionally. Right now igxOverlay service is able to position content in three ways:

• global - show the content related to the screen;
• connected - shows the content related to an element - this is what igxDropDown uses;
• auto - show the content related to an element, and flips it if it does not fit in the screen;

What you need is something like elastic position strategy - this should be like connected, but should resize element if it does not fit on the screen. This is something we do not have right now.

Can you please rename your issue to something like 'Add elastic position strategy to igxOverlay'?
I am reopening now this issue and will label it as feature request.

Done.

[wnvko]

We are starting to work on this now. What we plan to implement is a new position strategy in IgxOverlayService. This new strategy, elastic positioning, should be able according to provided min height and min width to resize the shown component, so it can fit as much as possible on the screen. This new strategy should extend connected position strategy. The new positioning will be applied only to components which goes out of the view. As a result of applying this new strategy shown component may draw horizontal and/or vertical scroll bar(s).