Search code examples
javascripthtmlcssresponsive-designsemantic-ui

Responsive Semantic UI form

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

Solution

  • Don't use grids. Stick with the multiple field classes that semantic ui provides.

    Semantic-UI multiple fields in forms

    <div class="ui form">
  <div class="three fields">
    <div class="field">
      <label>First name</label>
      <input type="text" placeholder="First Name">
    </div>
    <div class="field">
      <label>Middle name</label>
      <input type="text" placeholder="Middle Name">
    </div>
    <div class="field">
      <label>Last name</label>
      <input type="text" placeholder="Last Name">
    </div>
  </div>
</div>