Develop Reference

how to display form with div correctly?

I have this part of form field
When user click on the Add button will copy the above form field and user can add more in this field .
but when I add <div id="ownership"> above the code form it start to look like this
I need to put id=ownership because I want to use it in my jQuery function
<div id="ownership">
<div class="col-lg-12 mb-30 ">
<label for="add_owner"><b><span style="color:#e60000;">*</span> Name</b></label><br>
<input class="from-control" type="text" id="name" >
</div>
<div class="col-lg-6 mb-30" >
<label for="add_owner"><b><span style="color:#e60000;">*</span> Phone number</b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="text" id="phone" >
</div>
</div>
<div class="col-lg-6 mb-30" >
<label for="add_owner"><b><span style="color:#e60000;">*</span> Emailn</b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="email" id="email">
</div>
</div>
</div>
<div id="owner"></div>
<br>
<div class="col-md-12">
<button type="button" class="btn btn-success w-30 add_info f-r">Add</button>
</div>
<script>
$(document).ready(function(){
$(".add_info").click(function(){
var newForm = $("#ownership").clone();
$('input', newForm).val('');
$('owner').append(newForm);
});
});
</script>
How do I fix the code in order to achieve the image in number 1 ?

try this
<div class="row">
<div class="col-sm-6"> Text</div>
<div class="col-sm-6"> Text</div>
</div>
you need to apply this format then design will be properly according your desirable.

Try this way. Always use bootstrap col class inside row class then it will not cause unexpected result.
<div class="row">
<div class="col-md-12"></div>
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>

How can i locate my login at center of the page, if my HTML body does not take whole space. Angular 8

The red zone is the login Component and I want put my login at the center of whole page view, but i don´t know why my html and body tag don´t take all the whole blank space.
Anyway if you wanna take a look to my project, then i leave my github project https://github.com/SIGX-SENPAI/Angular-VRChat
LoginComponent.html
<form class="dropdown p-5 justify-content-center bg-danger">
<div class="form-group">
<label for="exampleDropdownFormEmail2">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email#example.com">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword2">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label class="form-check-label" for="dropdownCheck2">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
AppComponent.html
<app-navbar *ngIf="login" (showNav)="login = $event" (showOut)="local = $event"></app-navbar>
<div class="container" *ngIf="!local">
<router-outlet></router-outlet>
</div>
<div *ngIf="local">
<!-- <iframe width="100%" height="450px"
src="https://www.youtube.com/embed/PWLPw4RE9Ig?controls=0&loop=1&autoplay=1&mute=1" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe> -->
<div class="pt-2 pb-2">
<app-promo></app-promo>
</div>
<div class="container">
<app-home></app-home>
</div>
<app-features></app-features>
<app-footer></app-footer>
</div>
enter image description here
enter image description here
The html body is the blue shadow.
enter image description here

Have you tried making the body 100%, you also need to make the html 100%?
html, body {
height: 100%;
}

I see you are using bootstrapp.css
You dont need justify-content-center unless you are not making the element display flex d-flex
Try one of these:
Here you wrap the button in another form-group and center the button inside that wrapper
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form class="dropdown p-5 bg-danger">
<div class="form-group">
<label for="exampleDropdownFormEmail2">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email#example.com">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword2">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label class="form-check-label" for="dropdownCheck2">
Remember me
</label>
</div>
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-primary m-auto d-inline-block">Sign in</button>
</div>
</form>
Here you can tell form element to center all texts, but then for all form-groups to left aling the labels
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form class="dropdown text-center p-5 bg-danger">
<div class="form-group text-left">
<label for="exampleDropdownFormEmail2">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email#example.com">
</div>
<div class="form-group text-left">
<label for="exampleDropdownFormPassword2">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="form-group text-left">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label class="form-check-label" for="dropdownCheck2">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary m-auto d-inline-block">Sign in</button>
</form>

You can use the padding-top attribute then just find a procentage that makes it move to the middle of the screen.
Body /*Or whatever class or id you wanna move*/ {
padding-top: 20%;
}
That is the way i get around. It isn't the most professional way to do it i think but it workes

How to clear modal's data in Angular after submiting values

I'm using modal to save items to a database, and I'm wondering how to remove previously entered data without refreshing whole website, because right now when I click again "Add new item" which is opening modal there are stored / cached values inthere...
How to remove them ?
For example here is my modal:
<div [id]="id" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content dash-modal-content">
<div class="modal-header dash-modal-header">
<button type="button" class="close dash-close" data-dismiss="modal">×</button>
<h4 class="modal-title">ADD PRODUCT</h4>
</div>
<form (ngSubmit)="onSubmit()">
<div class="modal-body">
<div class="row">
<div class="col-xs-7">
<div class="form-horizontal" action="">
<div class="form-group">
<label class="control-label dash-control-label col-sm-3" for="">Product code:</label>
<div class="col-sm-5">
<input type="text" class="form-control dash-form-control" id="" placeholder="" name="articleCode" [(ngModel)]="article.code" (keyup.enter)="checkCode()">
</div>
<div class="checkbox col-sm-4" style="text-align: right; padding-right: 15px;">
<label style="font-size: 2em">
<input type="checkbox" value="" checked="" name="articleIsActive" [(ngModel)]="article.isActive">
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
<span class="checkbox-label-text">Is product active?</span>
</label>
</div>
</div>
<div class="form-group">
<label class="control-label dash-control-label col-sm-3" for="">Title:</label>
<div class="col-sm-9">
<input type="text" class="form-control dash-form-control" id="" placeholder="" name="articleTitle" [(ngModel)]="article.title">
</div>
</div>
</div><!--End of form horizontal-->
</div><!--End of col-->
</div><!--End of row-->
</div><!--End of modal body-->
<div class="modal-footer">
<button type="submit" class="btn main-content-button pull-right" style="margin: 0;"><i class="fas fa-save"></i></button>
</div>
</form>
</div><!--End of modal content-->
</div>
</div>
<div>
</div>
onSubmit I'm simply saving data to a database:
onSubmit() {
this.saveArticle((savedArticle: Article): void => {
this.onSave.emit(savedArticle);
});
}
// $('#' + this.id).removeData(''); < - maybe smth like this? But don't thinks so :(
}
I'm wondering how to immediately after submiting values to clear modal's content (text boxes etc)...
Thanks guys
Cheers

Try
onSubmit() {
this.saveArticle((savedArticle: Article): void => {
this.onSave.emit(savedArticle);
article = {}; // <---- Reset the variable
});
}
}

When refresh page make sure stay in same div area

When I click on my next button and it goes to step 2 and if I reload the page I would like to make sure it stays on the same div that I am on.
The 2 divs I use are join_form_1 and join_form_2
At the moment it when I reload page it goes back to first div
How can I make it stay on the div I am on?
Codepen Example Here
$(document).ready(function(){
$("#join_form_2").hide();
$("#step_1_link").addClass("active");
$("#next").click(function(){
$("#step_1_link").removeClass("active");
$("#step_2_link").addClass("active");
$("#join_form_1").hide();
$("#join_form_2").show();
});
});
HTML
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="heading-message">
<div class="text-center">
<i class="fa fa-user" aria-hidden="true"></i>
</div>
<div class="text-center">
<h1>Request A Admin Member Login</h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
<ol class="steps list-inline">
<li id="step_1_link">
Step 1: Set up a personal account
</li>
<li id="step_2_link">
Step 2: Choose profile picture
</li>
</ol>
<div id="join_form_1">
<div class="form-group">
<label>Username</label>
<input type="text" name="username" value="" class="form-control" placeholder="" />
</div>
<div class="form-group">
<label>Email</label>
<input type="text" name="email" value="" class="form-control" placeholder="" />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" value="" class="form-control" placeholder="" />
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="confirm_password" class="form-control" placeholder="" />
</div>
<div class="form-group">
<button type="button" class="btn btn-default" id="next">Next</button>
</div>
</div><!-- Setup_1 -->
<div id="join_form_2">
<div class="form-group">
<label>Upload A Image</label>
<input type="file" name="userfile" size="50" />
</div>
</div><!-- Setup_1 -->
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box">
<h2>You'll Love This Forum</h2>
</div>
</div>
</div>
</div>

You can use javascript cookie API here
So when user clicks 'Next'
Cookies.set('active', 'join_form_2');
Than if user clicked in the previous session, show form 2.
if (Cookies.get('active') == 'join_form_2') {
$("#join_form_1").hide();
$("#step_1_link").removeClass("active");
} else {
$("#join_form_2").hide();
$("#step_1_link").addClass("active");
}
Here is working codepen.

The easiest and most reliable way to do this is to use Fragment_identifier along with :target pseudo selector.
This will work even if cookies are disabled. And since you're using bootstrap, it's easy to style <a> tags like buttons.
For example:
if (!window.location.hash) {
window.location.hash = 'step1';
.steps:not(:target) {
display: none;
}
step1
step2
<div id="step1" class="steps">Step1</div>
<div id="step2" class="steps">Step2</div>

Is it possible to fix the position of modal-popup window in center when bootstrap modal is open in ipad browsers? I am using Bootstrap v3.0.0

I am facing a issue with the bootstrap modal pop-up window.The issue is when it opens and when i scroll the background the modal pop-up also changing its position.Now I need to show like the the modal pop-up position in center of the screen fixed to it even if i scroll the background the pop-up should not change its position in web browsers and also in mobile and ipad browsers.
I tired with this the css below :
display: block;
position: fixed;
margin-top: 50px;
but still the pop-up is scrolling with the background.
please help me out with this.
Many thanks in advance...
Here is the code for the modal pop-up window html:
<div aria-hidden="false" style="display:block; position:fixed;margin-top:50px;" class="modal animated fadeInUp" id="modal">
<form name="adminCheckInOutform" id="admincheckInOutForm">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" id="closeIcon" class="close" data-dismiss="modal"><i class="icon-remove"></i></button>
<h4 class="modal-title" id="AdminCheckioTitle">{{__ "Admin_CheckInOut" "Admin CheckIn/Out"}} <b><label id="memName"></label></b>
<a href="#" id='helpGuideLink' data-code='101'><span data-code='101'
class="text-right pull-right"><i class="icon-question-sign" data-code='101'></i></span></a>
</h4>
</div>
<div class="padder block">
<div id="windowNotification"></div>
{{#if data}}
<div>
<label class="control-label">Reason Code:</label>
<select class="form-control input-text-50 parsley-validated required"
id="reasonCodes"
data-required-message="Reason code is required."
data-required="true">
<!-- <option value="" description="">Select</option> -->
{{#each data}} {{#if reasonId}}
<option value="0" reasonId="{{reasonId}}"
description="{{reasonCodeDesc}}">{{reasonCode}}</option>
{{/if}} {{/each}}
</select>
</div>
<div class="row block clearfix">
<div class="col-sm-7 m-t-small" id="AdminCheckInOutTimePopup">
<label class="control-label">{{__ "CheckIn_Or_Out_Time" "Check-In / Out Time"}}</label><br/>
<input id="checkInOutTime" class="combodate form-control input-text-50" data-format="hh:mm a" data-template="hh : mm a" name="checkInOutTime" type="text">
</div>
<div class="col-sm-5 m-t-x-md">
<label class="col-sm-10 control-label">
<input type="checkbox" name="reasonCodeData.sendEmail" checked="checked" id="sendEmail" value="true" class="input-chk">
{{__ "Send_Email" "Send Emails"}}</label>
</div>
</div>
<input type="hidden" name="reasonCodeData.reasonId" value="" id="reasonId">
<div>
<textarea id="reasonDesc" readonly
class="bg-focus form-control" rows="2" placeholder="Reason Short Description" ></textarea>
</div>
<div>
<label class="control-label">Notes</label>
<textarea name="reasonCodeData.notes"
class="form-control input-text-50 parsley-validated" rows="2"
placeholder="Notes"></textarea>
</div>
{{else}}
<h4>{{error}}</h4>
{{/if}}
</div>
<div class="modal-footer text-center">
{{#if data}}
<button id="checkInOutBtn" name="checkOutBtn" class="btn btn-md btn-primary m-r-small" type="button">Save</button>
{{/if}}
<button data-dismiss="modal" id="cancelBtn" class="btn btn-md-default btn-default" type="button">Cancel</button>
</div>
</div>
</div>
</form>
</div>

Could you give us some more html info? For centering objects:
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
width:100px;
height:100px;
This must be applied inside a relative parent. So what you could try is adding:
top:0;
left:0;
right:0;
botttom:0;
overflow:hidden;

try to set body {overflow:hidden} when you open the modal.