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?

  • 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. Aug 7 '17 at 11:56
  • Hi Martin, We tried that too. But it doesn't fix it. Aug 7 '17 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
    Aug 7 '17 at 15:14

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.