3

I'm working on an Angular 8 project, using Material. I've searched SO and google for solutions on how to what I want, but my search has been futile.

I also went through How to customize mat-select dropdown position? but my question is different. That question seems to be more about the position of the popover. The solutions there are about positioning the menu below or above but not over the trigger element

I guess, my question is more about the direction of the popover. I would like to only drop down and not drop up. I don't know if, I'm making enough sense here...lol

Current Behavior: When a user opens the mat-select it pops up the options 1. Over the element (like somehow in the middle). 2. It positions the rest of the options either above or below the element, depending on the scroll position (or rather element's position on screen).

The Problem right now: When it pops up above the element, the options are getting rendered out side the screen.

Wanted Behavior: When user clicks the mat-select, 1. it pops up options BELOW the element. 2. Despite the element position, options are ALWAYS show below. Like a dropdown, never a drop up. Sort of like how you can choose to use a dropdown or drop up with Bootstrap

Thank you in advance for you assistance and suggestions.

Chif
  • 830
  • 1
  • 7
  • 20
  • Só you want to provide your user a bad ux? If the dropdown is on bottom of screen he will not be able to choose options. Hmm... – Elias Soares Nov 26 '19 at 08:07
  • Lol, of course not. In the situation where I'm using it, it's the first element, on screen, and options are popping up, right out of the screen (at the top) – Chif Nov 26 '19 at 08:09
  • I dont think so its a good approach to change that position which are by default as they change the value on runt time. I also need that but didnt find any work around so adjust what it is by default – Awais Nov 26 '19 at 09:11
  • Thank you @Awais for the input. I guess I was so used to the Bootstrap UI, where one can choose to have a dropdown or drop-up. Will continue to think of better solutions – Chif Nov 26 '19 at 10:09
  • Yes but the thing is, its components are paid the one which i need so that's why i prefer angular material without bootstrap. but i thing this link will help you https://stackoverflow.com/questions/47983954/how-to-customize-mat-select-dropdown-position – Awais Nov 26 '19 at 10:28
  • Possible duplicate of [How to customize mat-select dropdown position?](https://stackoverflow.com/questions/47983954/how-to-customize-mat-select-dropdown-position) – Awais Nov 26 '19 at 10:34
  • @Awais thank you again for sharing that valuable information. I have gone through it, and unfortunately it still does not cover what I want, but it is the closest I've seen so far. – Chif Nov 26 '19 at 10:57
  • 1
    Ops anyway glad to hear that it is closest one because its also mention on git-hub with above link approach https://github.com/angular/components/issues/13426 – Awais Nov 26 '19 at 11:00

0 Answers0