Semantic-ui: [Dropdown] Add functionality to configure positioning

[fpayer]

Dropdowns can sometimes be placed in corners, causing the items to go off the screen when the dropdown is active. Being able to specify the positioning can help to resolve this problem.

The same functionality with popups would be sufficient.
http://semantic-ui.com/modules/popup.html#positioning

See below for an example of a dropdown being used in the top-right corner of a menu.

[xDaizu]

You can configure if you want your dropdown menu to open right or left.

If that didn't solve your problem, could you provide a JsFiddle with a problematic case?

[fpayer]

That seems to only resolve the issue with sub-menus. Here is the JSFiddle:

http://jsfiddle.net/cs3j0zvj/1/

[xDaizu]

@fpayer If you are using a "pointing dropdown" you need to tell it where the "pointing" is, in this case "top right" :)

<div class='ui pointing dropdown top right' id='user'>
       <div class='text'>User</div>
       <i class='dropdown icon'></i>
       <div class='menu'>
          <div class='item'>User Settings</div>
          <div class='item'>Team Settings</div>
          <div class='item'>Redeem Game Code</div>
       </div>
 </div>

http://jsfiddle.net/ypvpajrL/

[fpayer]

Ah, ok. Wish this was more clear in the docs. I notice now that the property is used when displaying other features of dropdown, but there is no explicit example of that feature in the docs.

[xDaizu]

roger that!

@jlukic, add this to the overflowing list of _Things to do Examples About_! :joy_cat:

[jlukic]

3716

[denchen]

Sorry to bring up an old topic:

Is there a way to resolve this _without_ using pointing? With pointing top right, the menus appear just fine if my menu is in the top right corner. But without pointing, the menu goes off-screen.

[dearsina]

It's not an old topic if it still hasn't been resolved. Any update on this issue?

[s-devaney]

After several hours of head scratching, adding "pointing top right" solved my problem. Wish this was included in the docs.

[nicely]

add style="right: 0;left: auto;" into dropdown menu.

[anhldbk]

@nicely You've made my day! Thank you.

[akshitahluwalia]

@nicely You've helped me make my first PR. Thanks!.