Responsive Semantic UI form

user_7068325 0
Viewed 2180

Hello fellow internet strangers :) If any of you has some time to spare and knows Semantic UI I'd apreciate some help...

I'm building a form and on large screens it looks perfect... This is perfect

but the problem ocures when I start displaying it on smaler screens... the elements start ovelaping each other like on the two images bellow: Example 1 Example 2

My HTML code is:

<h1>Računi (2017)</h1>

<div class="ui form" style="padding: 20px">
    <div class="ui stackable equal width grid">
        <div class="row">
            <div class="column">
                <div class="field">
                    <label>Št. računa</label>
                    <div class="ui left icon input">
                        <input type="text" name="racun_id" placeholder="št. računa">
                        <i class="hashtag icon"></i>
                    </div>z
                </div>
            </div>

            <div class="column">
                <div class="field">
                    <label>Ime in priimek</label>
                    <div class="ui left icon input">
                        <input type="text" placeholder="Vnesi...">
                        <i class="user icon"></i>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="field">
                    <label>Naslov</label>
                    <div class="ui left icon input">
                        <input type="text" name="kupec_naslov" placeholder="Vnesi...">
                        <i class="marker icon"></i>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="field">
                    <label>Začetni datum</label>
                    <div class="ui left icon right labeled input">
                        <i class="calendar icon"></i>
                        <input type="text" name="zac" value="14.9">
                        <div class="ui basic label">
                            2017
                        </div>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="field">
                    <label>Končni datum</label>
                    <div class="ui left icon right labeled input">
                        <i class="calendar icon"></i>
                        <input type="text" name="kon" value="14.9">
                        <div class="ui basic label">
                            2017
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="column">
                <div class="field">
                    <label>Referent</label>
                    <div class="ui selection dropdown">
                        <input type="hidden" name="referent_id">
                        <i class="dropdown icon"></i>
                        <div class="default text">Izberi...</div>
                        <div class="menu">
                            <div class="item" data-value="1">Male</div>
                            <div class="item" data-value="0">Female</div>
                            <div class="item" data-value="1">Spaceman</div>
                            <div class="item" data-value="0">Spiderman</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="field">
                    <label>Odprt račun</label>
                    <select class="ui dropdown">
                        <option value="">--</option>
                        <option value="N">Odprt TRR</option>
                        <option value="C">Odprt Plačilna kartica</option>
                    </select>
                </div>
            </div>
            <div class="column">
                <div class="field">
                    <label>Filter plačilnih kartic</label>
                    <div class="ui selection dropdown">
                        <i class="payment icon"></i>
                        <input type="hidden" name="referent_id">
                        <i class="dropdown icon"></i>
                        <div class="default text">Izberi...</div>
                        <div class="menu">
                            <div class="item" data-value="">--</div>
                            <div class="item" data-value="isicvisa">ISIC Visa</div>
                            <div class="item" data-value="maestro">Maestro / BA</div>
                            <div class="item" data-value="visa">Visa</div>
                            <div class="item" data-value="mc">MasterCard</div>
                            <div class="item" data-value="karanta">Karanta</div>
                            <div class="item" data-value="diners">Diners</div>
                            <div class="item" data-value="amex">American Express</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="field">
                    <label>Zaključeni odprti računi</label>
                    <div class="ui slider checkbox">
                        <input type="checkbox" name="newsletter">
                        <label> </label>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="field">
                    <label>Izpiši račune:</label>
                    <button class="fluid ui primary button"><i class="terminal icon"></i>Izpis</button>
                </div>
            </div>
        </div>
    </div>
</div>

BTW I havent written any of my own CSS... using purely the Semantic one

So if anyone has a solution to this or if anyone sees a problem in my code id apreciate some help :)

P.S. Sorry for bad english... it's not my native language

responsive-design semantic-ui css html javascript
3 Answers

I had this problem, and with all the changes suggested here, the problem still persisted exclusively for the dropdown fields.

The solution for me was to change <select name="name" class="ui dropdown"> to <select name="name" class="ui dropdown fluid"> (adding the fluid class). This prevented the dropdown from jumping over the other fields, as in OP's example.

The structure of the HTML was the same as in the @VtoCorleone's answer, and the dropdown was previously initialized with $(".ui.dropdown").dropdown().

user_33883810
Related