Highlighting the semantic interface - how to place it to the left of the opening link?

Question

I would like to open the drop-down list to the left of the drop-down link, so this can be seen on tiny screens such as the iPhone. Is there a standard way to do this?

Here is my definition of a drop-down list - it would be nice to get some settings (class) by specifying a drop-down menu to align to the right and not the left side with a link.

<div class="four wide mobile three wide computer column"> <div class="ui compact dropdown doNotClose"> <i class="dropdown icon"></i> <span class="ui tiny header">Filters</span> <div class="menu"> <div class="item"> <div class="ui toggle checkbox"> <input type="checkbox" checked> <label>Acknowledge</label> </div> </div> <div class="item"> <div class="ui toggle checkbox"> <input type="checkbox" checked> <label>Active</label> </div> </div> </div> </div> </div> 

Answer 1

This can be done by adding the pointing class to the drop-down list.

Here you can find the JSFiddle example: http://jsfiddle.net/ypvpajrL/

Source: https://github.com/Semantic-Org/Semantic-UI/issues/3645

Answer 2

Add this style next to the menu class.

 style="right: 0;left: auto;" 

Example

  <div class="ui simple dropdown icon button" style="margin:0;"> <i class="calendar icon"></i> Date <div class="menu" style="right: 0;left: auto;"> <a class="ui item">Today</a> <a class="ui item">Yesterday</a> </div> </div>