4

We're working in a wizard implemented in angularjs + slds. There's an autocomplete widget based on [angucomplete-alt] component and the component is embeded in a <table>. But when the user types text and dropdown is displayed, it shows this:the dropdown is displayed below the components

So, after doing some tests with the developer console in chrome I realized the problem is related to the property position:relative in some of the slds css classes. For example in the next classes:

  1. .slds-scope .slds-button
  2. .slds-scope .slds-table td
  3. .slds-form-element

Then If I disable the position attribute in those classes, it looks fine:

The dropdown is fine

The only solution I think is reachable, is replicating those classes without the position:relative for that part of the layout, but I'm not sure if it's a correct solution. Can you recomend me another approach to solving this issue?

Improve this question
3
  • Hi Mathias. Maybe you should try to update the z-index of your autocomplete with a higher number. With that, you only modify one css class.
    – Martin Lezer
    Commented Aug 7, 2017 at 11:56
  • Hi Martin, We tried that too. But it doesn't fix it.
    – Matias Kruk
    Commented Aug 7, 2017 at 11:57
  • It seems like the position of the lookup dropdown is calculated with respect to html tag. If it calculates with respect to its parent container and it would solve the problem.
    – Praveen
    Commented Aug 7, 2017 at 15:14

1 Answer 1

Reset to default
0

Finally we found the issue. It was a mixture between position:initial in table and also the z-index was lower then div.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .