csssemantic-ui

Semantic UI dropdown - how to position it to the left of the opening link?

I would like to open the dropdown to the left of the link opening the dropdown, so it is visible on tiny screens like iPhone has. Is there some standard way to do it?

Here is my dropdown definition - it would be nice to get some setting(class) telling the dropdown to align right, not left side with the 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>

enter image description here

Solution

  • It is possible to do it by adding pointing class to the dropdown.

    You can find a JSFiddle example here: http://jsfiddle.net/ypvpajrL/

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