Develop Reference

Is there Any way that the HREF can popup this?

When this code pops up as a form it works well, but when I press "Don't have an Account.." it redirects to the Parent Directory.
Can someone help?
document.querySelector("#linkCreateAccount").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.add("form--hidden");
createAccountForm.classList.remove("form--hidden");
});
<div class="header">
<ul class="headerList">
<li id="item"> Home</li>
<li id="item"> About us</li>
<li id="item"> Contact us</li>
<li id="popup-login">
<button onclick="togglePopup()">Login/Register</button>
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<form class="form" id="login">
<h1 class="form__title">Login/Register</h1>
<div class="form__message form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username or email">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text">
Forgotten your password?
</p>
<p class="form__text">
<a class="form__link" href="./" id="linkCreateAccount">Don't have an account? Create account?</a>
</p>
</form>

The problem is that by clicking on the button you are clicking on a link <a> with href="./".
The solution for this case should be: implementing javascript trigger instead of usual html-link:
<a class="form__link" href="void(0);" onclick="toggleCreateAccountPopup()" id="linkCreateAccount">Don't have an account? Create account?</a>
Here, href is voided, and JS-trigger toggleCreateAccountPopup() is called - instead of linking to parent dir.

Whenever a link is clicked content to the ngcontainer of that link should take over the modal but how to do it with mutiple ngcontainers?

I have a modal and inside it i have a stepper which is connected to some links, what i want to do is whenever a person clicks on the link the content of that link should be displayed which are defined inside ngcontainers each link have contents of their own and when their respective link is clicked the content of that ngcontainer should only display!
Here's what i am doing now but how do i alter the ngIf in the first parent ngcontainer when i would have multiple ngcontainers for the links?
<div>
<div class="modal-header lead">
Generate Reports
</div>
<div>
<ul class="timeline w-75">
<li class="bg-info">
<div class="timeline-item">
<span class="timeline-icon material-icons text-info">brightness_1</span>
<span class="text-dark">Select Report</span>
</div>
</li>
<li [ngClass]="isSecondStep?'bg-info':'bg-secondary'">
<div class="timeline-item">
<span class="timeline-icon material-icons"
[ngClass]="isSecondStep?'text-info':'text-secondary'">brightness_1</span>
<span class="text-dark">Generate Report</span>
</div>
</li>
</ul>
</div>
<ng-container *ngIf="!isSecondStep">
<div>
<h4><a (click)="isSecondStep=!isSecondStep" class="text-link text-main">Head/Approver Report</a></h4>
<a>A report containing list of all departments along with it's heads and approvers.</a>
</div><br>
<div>
<h4>Student Dues Application Status Report</h4>
<a>A report containing list of all departments along with it's head and approvers.</a>
</div><br>
<div>
<h4>Student Details Report</h4>
<a>A report containing all relevant details pertaining to students registers in this institute for the current</a>
</div><br>
<div>
<h4>Staff/Faculty Details Report</h4>
<a>A report containing all relevant details pertaining to staff/Faculty of your institute.</a>
</div><br>
<div>
<h4>Dues Details Report</h4>
<a>A report containing the details related to total accumulated dues.</a>
</div><br>
</ng-container>
<ng-container *ngIf="isSecondStep">
<div>
<h4><a class="text-main">Head/Approver Report</a></h4>
</div><br>
<div class="text-left">
<label class="mt-1">Scope</label>
<div class="row">
<div class="col-sm-6 radio">
<label class="text-secondary vertical-center">
<input type="radio" class="mr-1" name="scope">Institute</label>
</div>
<div class="col-sm-6 radio">
<label class="text-secondary vertical-center">
<input type="radio" class="mr-1" name="scope" checked>Department</label>
</div>
</div>
</div><br>
<div>
<label class="mt-1 text-left">Department</label><br>
<select>
<option [ngValue]="null">Select Department</option>
<option [ngValue]="dept.id" *ngFor="let dept of departments">{{dept.name}}</option>
</select>
</div><br>
<div class="d-flex justify-content-around">
<div class="p-4">
<span class="material-icons text-main">get_app</span>
<div class="text-link text-main text-left">Download</div>
</div>
<div class="p-4">
<span class="material-icons text-main">print</span>
<div class="text-link text-main text-left">Print</div>
</div>
<div class="p-4">
<span class="material-icons text-main">clear</span>
<div class="text-link text-main text-left">Close</div>
</div>
</div>
</ng-container>
</div>

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

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/

Tabs and subTabs

I have designed a page with ParentTabs and ChildTabs, now on ParentTabs are displayed childTabs with other content each. How can I do that action button (continue) to go to the next child tab in order to display the other content tab.
<div id="content">
<div class="tineUl">
<ul class="mainUl">
<li class="selected"><a><span>TabOne</span></a></li>
<li><a><span>TabTwo</span></a></li>
<li><a><span>ThirdTab</span></a></li>
<li><a><span>FourthTab </span></a></li>
</ul>
</div>
<div id="subContent">
<div class="tineUl">
<ul class="subMainUl">
<li class="selected"><a><span>TabOne</span></a></li>
<li><a><span>TabTwo</span></a></li>
<li><a><span>ThirdTab</span></a></li>
<li><a><span>FourthTab </span></a></li>
</ul>
</div>
<div id="subContentChild">
<p>
SubContent Menu Zone.
</p>
<input type="submit" class="button" value="Cancel"></input>
<input type="submit" class="button" value="Continue"></input>
</div>
</div>
</div>
fiddle: http://jsfiddle.net/Ksb2W/138/

http://os.alfajango.com/easytabs/#twitter-contact choose your tabs .