Search code examples
animationselectdropdownsemantic-uianimate.css

Dropdown menu overlaps other inputs in the form

I'm developing an application using Angular, Semantic-UI and Animate.

I'm creating a form and I'm experiencing problems with dropdown that overlaps other inputs when it is open.

enter image description here

enter image description here

Here is a Plunker: https://plnkr.co/edit/BTCxfk

As you can see removing animated fadeIn animation from the class of Semantic-UI fields fixes the problem.

Then, what can I do to keep using both Semantic-UI and Animate and having that dropdown menu working with no bugs?

Solution

  • In this case it's recommended to use the built-in fade in animation (transition) in semantic-ui . this won't cause any bug on the dropdown .So first remove animated fadeIn class , then change your code to the following :

    export class App {

  constructor() {

    jQuery('.fields')
  .transition('fade in')
;
    setTimeout(() => {
      jQuery('.ui.dropdown').dropdown();
    }, 1000);)
  }
}

    Note that you can set parameters for your transition like: duration,callback... ,in transition settings:

    jQuery('.fields')
  .transition({
    animation  : 'fade in',
    duration   : '2s',
    onComplete : function() {
      alert('done');
    }
  })
;

    For more settings see Docs