Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 604
Kokesh Avatar asked Mar 08 '16 08:03

Kokesh


1 Answers

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

like image 106
Almaju Avatar answered Sep 28 '22 12:09

Almaju