{"action":"opened","issue":{"url":"https://api.github.com/repos/Semantic-Org/Semantic-UI/issues/3497","labels_url":"https://api.github.com/repos/Semantic-Org/Semantic-UI/issues/3497/labels{/name}","comments_url":"https://api.github.com/repos/Semantic-Org/Semantic-UI/issues/3497/comments","events_url":"https://api.github.com/repos/Semantic-Org/Semantic-UI/issues/3497/events","html_url":"https://github.com/Semantic-Org/Semantic-UI/issues/3497","id":123379965,"number":3497,"title":"[Dropdown] -- content does not change direction base on space available above and below","user":{"login":"emage","id":1778966,"avatar_url":"https://avatars.githubusercontent.com/u/1778966?v=3","gravatar_id":"","url":"https://api.github.com/users/emage","html_url":"https://github.com/emage","followers_url":"https://api.github.com/users/emage/followers","following_url":"https://api.github.com/users/emage/following{/other_user}","gists_url":"https://api.github.com/users/emage/gists{/gist_id}","starred_url":"https://api.github.com/users/emage/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/emage/subscriptions","organizations_url":"https://api.github.com/users/emage/orgs","repos_url":"https://api.github.com/users/emage/repos","events_url":"https://api.github.com/users/emage/events{/privacy}","received_events_url":"https://api.github.com/users/emage/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-12-21T23:18:49Z","updated_at":"2015-12-21T23:18:49Z","closed_at":null,"body":"The dropdown content will open upward above the select option if there is not enough viewport space below and vice versa it will open downward if there is not enough viewport above the selection.\r\n\r\nThis does not work if you have a class with 'hidden' and the property of 'display: none !important'.  I think the key word is \"!important\" -- causing the issue.\r\n\r\nOur web application has utility classes - one of which is::\r\n\r\n.hidden {\r\ndisplay: none !important;\r\n}\r\n\r\nThat class seems to always force the dropdown content to open downward regardless of space above and below.\r\n\r\nTest Case:  https://jsfiddle.net/tnLfu3uj/\r\n\r\n\r\nFrom the demo site if there exist a 'hidden class' with the !important\r\n:\r\n![dropdown](https://cloud.githubusercontent.com/assets/1778966/11943827/b82e894c-a7f5-11e5-8af1-20d44c369433.png)\r\n\r\nThanks\r\n\r\n\r\n"}}