Develop Reference

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...
but the problem ocures when I start displaying it on smaler screens... the elements start ovelaping each other like on the two images bellow:
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

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>

This bit me too but make sure you have
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> in your header.
Source: https://github.com/Semantic-Org/Semantic-UI/issues/3152

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().

Semantic-UI dropdowns inside a horizontal-scroll DIV

I am trying to include Semantic-UI dropdowns inside a table with many columns, which has a horizontal scroll bar.
When clicking a dropdown, the options are hidden inside the div.
fiddle:
http://jsfiddle.net/rotemx/n0azk0jc/
code:
<div id="wrapper">
<div id="content">
<div style="width: 500px">
<div class="inline-block">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
<div class="inline-block">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
<div class="inline-block">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
</div>
</div>
</div>
screenshot:
quesiton:
How can I make the dropdowns visible ?

With your current setup, you can't. Anything inside the element with overflow: none cannot be shown outside the element boundaries.

Overflowing text from one Bootstrap row hides behind text of another row

Pardon my jargon, I just recently got into web development and have poor communication skills.
I'm using bootstrap 4 alpha and JQuery 3.
I have a chatroom within one fluid container with two rows: a send-message bar and a recieve message column(plus the pm column and userlist column)
Here is my code:
<div class="container-fluid">
<div class="row">
<!-- Chat View Column -->
<div class="col-sm-2">
<ul id="privateChats" class="list-group fixed" style=" margin-top:20px;">
</ul>
</div>
<!-- Message View Column -->
<div class="col-sm-8" style="float: left;">
<ul class="" id="messages" style="margin: 20px;"></ul>
</div>
<!-- Connected Users Column -->
<div class="col-sm-2">
<ul id="connectedUsers" class="list-group fixed" style=" margin-top:20px">
<div class="btn-group-vertical" style="width:100%">
</div>
</ul>
</div>
</div>
<!-- Send message bar -->
<div class="row">
<form action="">
<div class="col-lg-9 col-md-9 text-right">
<input type="text" id="m" style="width:100%; height:55px;" class="form-control" placeholder="Message" autocomplete="off" />
</div>
<div class="col-lg-3 col-md-3 text-left">
<button style="width:50%"><span class="fa fa-paper-plane" style="font-size:38px; color:white;"></span></button>
</div>
</form>
</div>
</div>
When the "Message View Column" fills up, text disappears behind the second row and I can't see the most recent messages. How do I fix this?
Let me know if I should add more detail
I added the Javascript tag because I'm not opposed to using Javascript to solve the problem

Adding a margin-bottom: 98px; (height of the 2nd .row) to the css of the 1st .row, would solve your problem. Then you can use scrollBy(0, 100) to scroll the page to the bottom (used 100 as example)

input text outside UL tag, possible?

I am learning framework7 and I wonder if it is possible to create an input type="text" outside UL tag. On the code below, the css is not rendering on my textfield. Please see code comments.
And here is the fiddle.
<!-- THIS WILL WORK -->
<div class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-input">
<input type="text" name="name">
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- NOW, WHAT IF WE WON'T SHOW TEXTFIELD IN INSIDE UL? -->
<!-- THE CSS WON'T WORK ANYMORE, IDK WHAT IS THE CORRECT CSS CLASS EITHER TO WRAP THE ELEMENT -->
<div class="content-block">
<input type="text" />
</div>

If you put the input outside the list, you will lose the separating lines, but it is possible adding the required classes:
<!-- THIS WILL WORK -->
<div class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-input">
<input type="text" name="name">
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- NOW, WHAT IF WE WON'T SHOW TEXTFIELD IN INSIDE UL? -->
<div class="content-block list-block">
<div class="item-input">
<input type="text" value="text here" />
</div>
</div>
Here: https://jsfiddle.net/k5gd7Lww/10/

google maps iframe not working dynamically (auto show hide) in safari but working in google chrome

I referred to a few questions related to iframe not working in safari. those answers suggest to use an alternative of iframe(Ajax or jQuery as an alternative to iframe). But i have already developed the website without testing in safari. I don't want to change the implementation at the last development stage.
Issue:
I am trying to integrate google maps iframe into my webpage.
The website changes responsively based on window size. The divs were
initially coded in adobe reflow. Using Edge Animate i have inserted
the html files into these divs.
The problem lies in the fact that when I try to resize google maps
page, the div on the mobile site still shows on the desktop one and
vice versa. This occurs only on Safari browser.
Heres the code i used in edge Animate.
var container = sym.$('mapBox');
var map = '<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2595.2028231859395!2d7.7518645!3d49.4239794!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47966d5189fba81f%3A0x8ab04632090ea019!2sTU+Kaiserslautern!5e0!3m2!1sen!2sde!4v1432133191497"
width="'+container.width()+'" height="'+container.height()+'"
frameborder="0" style="border:0"></iframe>';
container.html(map);
and heres the html page.
</head>
<body>
<div id="primaryContainer" class="primaryContainer clearfix">
<div id="Video" class="clearfix">
<div id=“mapdiv_Stage" class=“EDGE-MAPDIV">
<div id="Logo" class="clearfix">
<div id="logo_Stage" class="EDGE-LOGO">
</div>
</div>
<div id="N" class="clearfix">
<div id="n_Stage" class="EDGE-N">
</div>
</div>
<div id="E" class="clearfix">
<div id="e_Stage" class="EDGE-E">
</div>
</div>
<div id="T" class="clearfix">
<div id="t_Stage" class="EDGE-T">
</div>
</div>
<div id="R" class="clearfix">
<div id="r_Stage" class=“EDGE-R">
</div>
</div>
<div id="M" class="clearfix">
<div id="m_Stage" class="EDGE-M">
</div>
</div>
<div id="S" class="clearfix">
<div id="s_Stage" class="EDGE-S">
</div>
</div>
<div id="M" class="clearfix">
<div id="m_Stage" class="EDGE-M">
</div>
</div>
<div id="I" class="clearfix">
<div id="i_Stage" class="EDGE-I">
</div>
</div>
</div>
<div id="bigsocial" class="clearfix">
<div id="youtube" class="clearfix">
<div id="youtube_Stage" class="EDGE-YOUTUBE">
</div>
</div>
<div id="instagram" class="clearfix">
<div id="instagram_Stage" class="EDGE-INSTAGRAM">
</div>
</div>
<div id="googleplus" class="clearfix">
<div id="googleplus_Stage" class="EDGE-GOOGLE">
</div>
</div>
<div id="wiki" class="clearfix">
<div id="wiki_Stage" class="EDGE-WIKI">
</div>
</div>
<div id="twitter" class="clearfix">
<div id="twitter_Stage" class="EDGE-TWITTER">
</div>
</div>
<div id="facebook" class="clearfix">
<div id="facebook_Stage" class="EDGE-FACEBOOK">
</div>
</div>
</div>
</div>
<div id="Tablet" class="clearfix">
<div id="tab_Stage" class="EDGE-Tab">
</div></div>
<div id="smallsocial" class="clearfix">
<div id="Facebook1" class="clearfix">
<div id="facebook3_Stage" class="EDGE-FACEBOOK3">
</div>
</div>
<div id="Twitter2" class="clearfix">
<div id="twitter3_Stage" class="EDGE-TWITTER3">
</div>
</div>
<div id="Wiki3" class="clearfix">
<div id="wiki3_Stage" class="EDGE-WIKI3">
</div>
</div>
<div id="Youtube4" class="clearfix">
<div id="youtube3_Stage" class="EDGE-YOUTUBE3">
</div>
</div>
<div id="Instagram5" class="clearfix">
<div id="instagram3_Stage" class="EDGE-INSTAGRAM3">
</div>
</div>
<div id="googlelus6" class="clearfix">
<div id="google3_Stage" class="EDGE-GOOGLE3">
</div>
</div></div>
</div>
</body>
</html>
“mapdiv_Stage” is the html with edge animate created map html.
How do I rectify this problem?
screen shot of chrome. This pic shows the code perfectly working in chrome (the map is not shown below a certain size)
screen shot of safari. The map should be hidden if the size reduces below a certain limit. This is not working in safari.
Both the screen shots are taken at the same browser screen size and the functionality is working in chrome and not working in safari.