For my field validity, I would like to create a calendar field:
my code is the following:
<div class="col-12 col-12 col-md-4 col-lg-2">
<div class="form-group">
<label for="validity">Validaty</label>
<input id="validity" name="validity" type="text" class="form-control"
[(ngModel)]="order.validity"
style="background-color: white; max-width: 300px;width: 100%;"
placeholder="Validity" autofocus>
</div>
</div>
I want to base myself on these two fields:
I have this code:
<div class="form-group row">
<label for="picker2" class="col-12 col-sm-4 col-form-label">{{'startDate | t }}</label>
<div class="col-12 col-sm-8">
<div class="input-group" style="background-color: white; max-width: 300px;">
<input id="picker2" class="form-control" placeholder="yyyy-mm-dd" name="dp2"
ngbDatepicker #dp2="ngbDatepicker" [(ngModel)]="search.enddate">
<div class="input-group-append" (click)="dp2.toggle()">
<div class="input-group-text">
<i class="icon-regular i-Calendar-4"></i>
</div>
</div>
</div>
</div>
</div>
I tried to adapt the code except that, the icon is incorrectly positioned on the field.
I don't understand where is the problem?
<div class="col-12 col-12 col-md-4 col-lg-2">
<div class="form-group">
<label for="validity">{{'3735' | t}}</label>
<input id="validity" name="validity" class="form-control" placeholder="yyyy-mm-dd" name="dp2"
ngbDatepicker #dp2="ngbDatepicker"
[(ngModel)]="order.validity "
style="background-color: white; max-width: 300px;width: 100%;"
placeholder="Validity" autofocus>
<div class="input-group-append" (click)="dp2.toggle()">
<div class="input-group-text">
<i class="icon-regular i-Calendar-4"></i>
</div>
</div>
</div>
Remove max-width: 300px;width: 100%; css from the input and move input and label inside <div class="input-group">
Check if this resolves your issue.
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" media="screen">
</head>
<body>
<div class="col-12 col-md-4 col-lg-2">
<div class="form-group">
<label for="validity">Stop</label>
<input id="validity" name="validity" type="text" class="form-control" style="background-color: white;" placeholder="STOP" autofocus>
</div>
</div>
</div>
<div class="col-12 col-12 col-md-4 col-lg-2">
<div class="form-group">
<label for="validity">{{'3735' | t}}</label>
<div class="input-group">
<input id="validity" name="validity" class="form-control" placeholder="yyyy-mm-dd" name="dp2"
ngbDatepicker #dp2="ngbDatepicker"
[(ngModel)]="order.validity "
style="background-color: white;"
placeholder="Validity" autofocus>
<div class="input-group-append" (click)="dp2.toggle()">
<div class="input-group-text">
<i class="icon-regular i-Calendar-4"></i>
</div>
</div>
</div>
</div>
</body>
Related
I want to make the span for input group text have the same size? I already put the w-100 in the span class but its not working. How do I fix this ?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-md-6">
<div class="form-group">
<label>Facebook</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text w-100" style="background-color:#ddd;">https://www.facebook.com/</span>
</div>
<input type="text" class="form-control" aria-describedby="basic-addon3">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Instagram</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text w-100" style="background-color:#ddd;">https://www.instagram.com/</span>
</div>
<input type="text" class="form-control" aria-describedby="basic-addon3">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Twitter</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text w-100" style="background-color:#ddd;">https://www.twitter.com/</span>
</div>
<input type="text" class="form-control" aria-describedby="basic-addon3">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Youtube</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text w-100" style="background-color:#ddd;">https://www.youtube.com/</span>
</div>
<input type="text" class="form-control" aria-describedby="basic-addon3">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>TikTok</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text w-100" style="background-color:#ddd;">https://www.tiktok.com/</span>
</div>
<input type="text" class="form-control" aria-describedby="basic-addon3">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Other</label>
<input type="text" class="form-control" />
</div>
</div>
Use min-width or width for .input-group-prepend
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-md-6">
<div class="form-group">
<label>Facebook</label>
<div class="input-group mb-3">
<div class="input-group-prepend w-50 d-inline-block">
<span class="input-group-text w-100" style="background-color:#ddd;">https://www.facebook.com/</span>
</div>
<input type="text" class="form-control" aria-describedby="basic-addon3">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Instagram</label>
<div class="input-group mb-3">
<div class="input-group-prepend w-50 d-inline-block">
<span class="input-group-text w-100" style="background-color:#ddd;">https://www.instagram.com/</span>
</div>
<input type="text" class="form-control" aria-describedby="basic-addon3">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Twitter</label>
<div class="input-group mb-3">
<div class="input-group-prepend w-50 d-inline-block">
<span class="input-group-text w-100" style="background-color:#ddd;">https://www.twitter.com/</span>
</div>
<input type="text" class="form-control" aria-describedby="basic-addon3">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Youtube</label>
<div class="input-group mb-3">
<div class="input-group-prepend w-50 d-inline-block">
<span class="input-group-text w-100" style="background-color:#ddd;">https://www.youtube.com/</span>
</div>
<input type="text" class="form-control" aria-describedby="basic-addon3">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>TikTok</label>
<div class="input-group mb-3">
<div class="input-group-prepend w-50 d-inline-block">
<span class="input-group-text w-100" style="background-color:#ddd;">https://www.tiktok.com/</span>
</div>
<input type="text" class="form-control" aria-describedby="basic-addon3">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Other</label>
<input type="text" class="form-control" />
</div>
</div>
added w-50 d-inline-block classes to input-group-prepend div
you can change the w-50 to any width you want.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-md-6">
<div class="form-group">
<label>Facebook</label>
<div class="input-group mb-3">
<div class="input-group-prepend w-50 d-inline-block">
<span class="input-group-text w-100" style="background-color:#ddd;">https://www.facebook.com/</span>
</div>
<input type="text" class="form-control" aria-describedby="basic-addon3">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Instagram</label>
<div class="input-group mb-3">
<div class="input-group-prepend w-50 d-inline-block">
<span class="input-group-text w-100" style="background-color:#ddd;">https://www.instagram.com/</span>
</div>
<input type="text" class="form-control" aria-describedby="basic-addon3">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Twitter</label>
<div class="input-group mb-3">
<div class="input-group-prepend w-50 d-inline-block">
<span class="input-group-text w-100" style="background-color:#ddd;">https://www.twitter.com/</span>
</div>
<input type="text" class="form-control" aria-describedby="basic-addon3">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Youtube</label>
<div class="input-group mb-3">
<div class="input-group-prepend w-50 d-inline-block">
<span class="input-group-text w-100" style="background-color:#ddd;">https://www.youtube.com/</span>
</div>
<input type="text" class="form-control" aria-describedby="basic-addon3">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>TikTok</label>
<div class="input-group mb-3">
<div class="input-group-prepend w-50 d-inline-block">
<span class="input-group-text w-100" style="background-color:#ddd;">https://www.tiktok.com/</span>
</div>
<input type="text" class="form-control" aria-describedby="basic-addon3">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Other</label>
<input type="text" class="form-control" />
</div>
</div>
Add a min-width: 225px; to all the input-groups. You can adjust the 225px as needed.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-md-6">
<div class="form-group">
<label>Facebook</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text w-100" style="background-color:#ddd; min-width: 225px;">https://www.facebook.com/</span>
</div>
<input type="text" class="form-control" aria-describedby="basic-addon3">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Instagram</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text w-100" style="background-color:#ddd; min-width: 225px;">https://www.instagram.com/</span>
</div>
<input type="text" class="form-control" aria-describedby="basic-addon3">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Twitter</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text w-100" style="background-color:#ddd; min-width: 225px;">https://www.twitter.com/</span>
</div>
<input type="text" class="form-control" aria-describedby="basic-addon3">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Youtube</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text w-100" style="background-color:#ddd; min-width: 225px;">https://www.youtube.com/</span>
</div>
<input type="text" class="form-control" aria-describedby="basic-addon3">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>TikTok</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text w-100" style="background-color:#ddd; min-width: 225px;">https://www.tiktok.com/</span>
</div>
<input type="text" class="form-control" aria-describedby="basic-addon3">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Other</label>
<input type="text" class="form-control" />
</div>
</div>
You could try adding padding-right to all the input-group-texts to make them all have equal width or try giving them all a min-width as desired.
I have been trying since the morning to correctly align the start date and the end date but without success.
The start and end date do not line up like other blocks.
I do not understand anything...
If you solve my problem, I will be infinitely grateful to you. I really don't understand why the date blocks are not aligned.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<h1 id="welcome">HTML CSS JS</h1>
<div class="row">
<div class="col-12" *ngIf="currentView == 0">
<div class="card mb-4">
<div class="card-body">
<div class="row">
<div class="col-12 col-lg-4">
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label">Libellé</label>
<div class="col-12 col-sm-9">
<input id="name" type="text" class="form-control" [(ngModel)]="search.name"
style="background-color: white; max-width: 300px;width: 100%;"
placeholder="Libellé" autofocus>
</div>
</div>
<div class="form-group row">
<label for="ticker" class="col-12 col-sm-3 col-form-label">Bourse</label>
<div class="col-12 col-sm-9">
<input id="ticker" type="text" class="form-control" [(ngModel)]="search.ticker"
style="background-color: white; max-width: 300px;width: 100%;"
placeholder="Bourse" autofocus>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="form-group row">
<label for="isin" class="col-12 col-sm-3 col-form-label">ISIN</label>
<div class="col-12 col-sm-9">
<input id="isin" type="text" class="form-control" [(ngModel)]="search.isin"
style="background-color: white; max-width: 300px;width: 100%;"
placeholder="ISIN" autofocus>
</div>
</div>
<div class="form-group row">
<label for="filterForMarkets" class="col-12 col-sm-3 col-form-label">Marché</label>
<div class="col-12 col-sm-9">
<select id="filterForMarkets" class="form-control"
style="width:100%; max-width: 300px;"
(change)="filterForMarkets($event.target.value)">
<option value="">--Tous les marchés--</option>
<option *ngFor="let m of markets" value={{m.marketID}}>
{{m.name}}
</option>
</select>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="form-group" >
<label for="date">Date de départ</label>
<div class="input-group">
<input name="beginDate" id="beginDate" type="text" class="form-control"
style="background-color: white; "
(ngModelChange)="changedBeginDateInput($event)" [(ngModel)]="beginDate">
<input id="picker1" class="form-control" placeholder="dd/mm/yyyy" name="dp1"
ngbDatepicker #dp1="ngbDatepicker" [(ngModel)]="begin.validityDate"
(ngModelChange)="changedBeginDate($event)"
style="position: absolute; left: 0; visibility: hidden">
<div class="input-group-append" (click)="dp1.toggle()">
<span class="input-group-text" id="basic-addon2">
<i class="icon-regular i-Calendar-4"></i>
</span>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="form-group" >
<label for="date">Date de fin</label>
<div class="input-group">
<input name="endDate" id="endDate" type="text" class="form-control"
style="background-color: white;"
(ngModelChange)="changedEndDateInput($event)" [(ngModel)]="endDate">
<input id="picker1" class="form-control" placeholder="dd/mm/yyyy" name="dp2"
ngbDatepicker #dp2="ngbDatepicker" [(ngModel)]="end.validityDate"
(ngModelChange)="changedEndDate($event)"
style="position: absolute; left: 0; visibility: hidden">
<div class="input-group-append" (click)="dp2.toggle()">
<span class="input-group-text" id="basic-addon2">
<i class="icon-regular i-Calendar-4"></i>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 ">
<div class="text-right">
<button type="button" class="btn btn-primary" (click)="launchSearch(modalConfirm)">
Rechercher
</button>
<button type="button" class=" ml-1 btn btn-primary" (click)="getTransactions(0)">
Affichez tous les mouvements
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Using flex property of CSS will solve your problem, it's very beneficial in aligning things as we want.
Try this:
.form-group {
display: flex;
}
And then you could obviously add margin and other properties for aligning all your items together.
I have this template from angular 10. The problem is the scrollbar doesn´t work even if I add the css style on the main container overflow: auto;
The HTML and scss codes are as following, as you can see I include the overflow property to the main container "cont", but is not working:
Anyone can help with this? Thank you!
.cont{
overflow: auto;
}
<div class="cont">
<div class="card-body">
<form name="formEmpresa">
<div class="container-background">
<div class="container-fluid">
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<div class="input-group flex-nowrap">
<div class="input-group-prepend">
<span class="input-group-text" id="addon-wrapping"><i class="fa fa-building"></i></span>
</div>
<input type="text" class="form-control" placeholder="J123456789" name="Rif" required>
</div>
</div>
<div class="col-sm-6"></div>
<div class="col-sm-12">
<hr style="border: none">
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping"><i class="fa fa-institution"></i></span>
<input type="text" class="form-control" placeholder="Razón Social" name="Razosoci" required ng-maxlength="150">
</div>
</div>
<div class="col-sm-12">
<hr style="border: none">
<label>Dirección fiscal</label>
<textarea class="form-control" rows="3" placeholder="Entre ..." name="Dir" ng-maxlength="200" required></textarea>
</div>
<div class="col-sm-12">
<hr style="border: none">
<div class="row justify-content-center">
<button class="btn btn-warning" style="width: 20%;">
<i class="fa fa-plus-circle" style="color: white;"></i> <h5 style="color: white;"><strong>Añadir sucursal</strong></h5>
</button>
</div>
</div>
<div class="col-sm-12">
<hr style="border: none">
<div class="card">
<div class="card-header" style="background-color: #ffc107; color: white;">
<strong>Nueva surcursal</strong>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-12">
<div class="input-group flex-nowrap">
<div class="input-group-prepend">
<span class="input-group-text" id="addon-wrapping"><i class="fa fa-building"></i></span>
</div>
<input type="text" class="form-control" placeholder="Nombre Sucursal" name="sucursal" required>
</div>
</div>
<div class="col-sm-6">
<hr style="border: none">
<div class="input-group flex-nowrap">
<div class="input-group-prepend">
<span class="input-group-text" id="addon-wrapping"><i class="fa fa-phone"></i></span>
</div>
<input type="text" class="form-control" placeholder="Teléfono" name="phone" required>
</div>
</div>
<div class="col-sm-6">
<hr style="border: none">
<div class="input-group flex-nowrap">
<div class="input-group-prepend">
<span class="input-group-text" id="addon-wrapping"><i class="fa fa-qrcode"></i></span>
</div>
<input type="text" class="form-control" placeholder="Código Postal" name="postal_code" required>
</div>
</div>
<div class="col-sm-12">
<hr style="border: none">
<textarea class="form-control" rows="3" placeholder="Dirección" name="Dir" ng-maxlength="200" required></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
You need to give some height to .cont class to add scroll to that div.
Can anybody tell how to arrange horizontal text box in same row eve though label will be in different line
<div class="row">
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="control-label">Roll number <br> Student Code:</label>
<input type="text" class="form-control">
</div>
<div class="text-required> This is required </div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label">School code:</label>
<input type="text" class="form-control ">
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label>Year Of Passing:</label>
<input type="text" class="form-control">
</div>
</div>
</div>
You can add w-50 d-inline-block class to input and w-25 to label as below
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row">
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="control-label w-25">Roll number <br> Student Code:</label>
<input type="text" class="form-control w-50 d-inline-block">
</div>
<div class="text-required> This is required </div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="w-25">School code:</label>
<input type="text" class="form-control w-50 d-inline-block">
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="w-25">Year Of Passing:</label>
<input type="text" class="form-control w-50 d-inline-block">
</div>
</div>
</div>
You can wrap input in a div with col-x attribute and add row class to form-group.
An example:
<div class="form-group row">
<label class="control-label col-4">Roll number <br> Student Code:</label>
<div class="col-6">
<input type="text" class="form-control">
</div>
</div>
The full example here:
https://stackblitz.com/edit/js-bootstrap-css?file=index.html
<div class="row">
<div class="col-12">
<div class="form-group row">
<label class="control-label col-4">Roll number <br> Student Code:</label>
<div class="col-6">
<input type="text" class="form-control ">
</div>
</div>
<div class="text-required> This is required </div>
</div>
<div class="col-sm-3 col-lg-4">
<div class="form-group row">
<label class="control-label col-4">School code:</label>
<div class="col-6">
<input type="text" class="form-control ">
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group row">
<label class="control-label col-4">Year Of Passing:</label>
<div class="col-6">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
I am designing an HTML template using bootstrap 4.3 and having issues with my column alignments. I am new to boostrap hence finding it difficult to align. If you notice some of the text in the columns wrap and the columns following the controls are not currently aligned since the width of the first column varies. I need to keep the width of the first column consistent so that the controls following that are aligned correctly from top to bottom. I have applied col-md-1 for the labels. Increasing it to col-md2 makes it even longer. Could some body help me with that
See the screenshot below
Html
<style>
.desc-header {
background-color: #FAE7D6;
color: black
}
.header {
width: 8%;
}
.panel-heading {
color: white;
background-color: #F59850;
border-color: #ddd;
}
.scrollClass {
height: 800px;
overflow-y: scroll;
overflow-x: hidden;
}
</style>
<div class="card">
<div class="card-header panel-heading">
<span style="font-size: 18px; font-weight: bold; ">Firm Details</span>
<div class="pull-right" style="padding-right:10px;">
<label class="btn btn-primary" [ngClass]="{'btn-primary': EditMode, 'btn-default': !EditMode }"><input
type="checkbox" [(ngModel)]="EditMode" class="hidden">Edit Mode</label>
</div>
</div>
<div class="card-body">
<form [formGroup]="frmFirm" (ngSubmit)="onSubmit()">
<div *ngIf="FirmDetails && FirmDetails.Firm" class="card-body scrollClass" style="width:100%">
<div class="form-group row">
<label for="inputName" class="col-md-1 col-form-label modal-label header">Name</label>
<div class="col-md-3">
<div *ngIf="!EditMode">{{FirmDetails.Firm.NAME}}</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"
formControlName="firmName" />
</div>
</div>
<div class="form-group row">
<label for="inputTitle" class="col-md-1 col-form-label header">Short Name</label>
<div class="col-md-3">
<div *ngIf="!EditMode">{{FirmDetails.Firm.SHORT_NAME}}</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"
formControlName="shortName" />
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-1 col-form-label header">Alternate Name</label>
<div class="col-md-3">
<div *ngIf="!EditMode">{{FirmDetails.Firm.ALTERNATE_NAME}}</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"
formControlName="alternateName" />
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-1 col-form-label header">Date Founded</label>
<div class="col-md-3">
<div *ngIf="!EditMode">{{dateFoundedDate}}</div>
<kendo-datepicker *ngIf="EditMode" [format]="'MMMM yyyy'" formControlName="dateFounded">
</kendo-datepicker>
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-1 col-form-label header">Intralinks Connections</label>
<div class="col-md-9">
<div class="form-group row">
<div class="col-md-3">
<label for="inputEmail">User Name</label>
</div>
<div class="col-md-3">
<label for="inputEmail">Password</label>
</div>
</div>
<div formArrayName="intraLinks"
*ngFor="let item of frmFirm.get('intraLinks').controls; let i = index; let last = last">
<div [formGroupName]="i">
<div class="form-group row">
<div class="col-md-3">
<input style="width:100%" formControlName="intraUsername"
placeholder="User Name">
</div>
<div class="col-md-3">
<input style="width:100%" formControlName="intraPassword"
placeholder="Password">
</div>
<div *ngIf="EditMode" class="col-md-3">
<button class="fa fa-trash" (click)="removeCredentials()"></button>
</div>
</div>
</div>
</div>
<div *ngIf="EditMode">
<button (click)="addCredentials()">Add Credentials</button>
</div>
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-1 col-form-label header">Key Contact</label>
<div class="col-md-3">
<div *ngIf="!EditMode && FirmDetails.People">{{FirmDetails.KeyContact.Name}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [data]="FirmDetails.People"
formControlName="People" [defaultItem]="FirmDetails.KeyContact.Name" [valuePrimitive]="true"
[filterable]="false" textField="Name" valueField="ID"></kendo-dropdownlist>
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-1 col-form-label header">Websites</label>
<div class="col-md-9">
<div class="form-group row">
<div class="col-md-3">
<label for="inputEmail">Website URL</label>
</div>
<div class="col-md-3">
<label for="inputEmail">User Name</label>
</div>
<div class="col-md-3">
<label for="inputEmail">Password</label>
</div>
</div>
<div formArrayName="websites"
*ngFor="let item of frmFirm.get('websites').controls; let i = index; let last = last">
<div [formGroupName]="i">
<div class="form-group row">
<div class="col-md-3">
<input style="width:100%" formControlName="websiteUrl"
placeholder="Website Url">
</div>
<div class="col-md-3">
<input style="width:100%" formControlName="username" placeholder="User Name">
</div>
<div class="col-md-3">
<input style="width:100%" formControlName="password" placeholder="Password">
</div>
<div *ngIf="EditMode" class="col-md-3">
<button (click)="removeWebsite()">Remove Website</button>
</div>
</div>
</div>
</div>
<div *ngIf="EditMode">
<button (click)="addWebsite()">Add Website</button>
</div>
</div>
</div>
<div class="form-group row">
<!-- <label for="inputEmail" class="col-md-1 col-form-label header">Addresses</label> -->
<div class="col-md-9">
<!-- <div *ngIf="!EditMode">{{FirmDetails.Firm.Addresses}}</div> -->
<!-- <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" /> -->
<div formArrayName="addressess"
*ngFor="let item of frmFirm.get('addressess').controls; let i = index;">
<div [formGroupName]="i">
<div class="form-group row">
<label class="col-md-1 col-form-label header" attr.for="{{'streetId' + i}}">Street
1</label>
<div class="col-md-9">
<input class="form-control" id="{{'streetId' + i}}" type="text"
placeholder="Street address (required)" formControlName="street">
</div>
</div>
<div class="form-group row">
<label class="col-md-1 col-form-label header" attr.for="{{'line2Id' + i}}">Line
2</label>
<div class="col-md-9">
<input class="form-control" id="{{'line2Id' + i}}" type="text"
placeholder="Street address (second line)" formControlName="line2">
</div>
</div>
<div class="form-group row">
<label class="col-md-1 col-form-label header" attr.for="{{'line3Id' + i}}">Line
3</label>
<div class="col-md-9">
<input class="form-control" id="{{'line3Id' + i}}" type="text"
placeholder="Street address (third line)" formControlName="line3">
</div>
</div>
<div class="form-group row ">
<label class="col-md-1 col-form-label header" attr.for="{{'cityId' + i}}">City, Zip
Code</label>
<!-- <div *ngIf="!EditMode && FirmDetails.People">{{FirmDetails.Addresses}}</div> -->
<div class="col-md-3">
<kendo-dropdownlist style="width:100%" [data]="cities" [defaultItem]=""
[valuePrimitive]="true" formControlName="city" [defaultItem]=""
[filterable]="true" textField="Name" valueField="Id"></kendo-dropdownlist>
</div>
<div class="col-md-2">
<input class="form-control" id="{{'zipCodeId' + i}}" type="number"
placeholder="Zip Code" formControlName="zipCode">
</div>
</div>
<div class="form-group row">
<label class="col-md-1 col-form-label header" attr.for="{{'phoneId' + i}}">Line
3</label>
<div class="col-md-9">
<input class="form-control" id="{{'phoneId' + i}}" type="text"
placeholder="Phone" formControlName="phone">
</div>
</div>
</div>
</div>
<div *ngIf="EditMode">
<button (click)="addAddress()">Add Address</button>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-12" style="padding-top:10px;padding-left: 0px;padding-right: 30px;">
<div class="desc-header">Firm History</div>
<div class="divEditor">
<ckeditor [editor]="Editor" [id]="'ckFirmHistory'" *ngIf="EditMode"
formControlName="firmHistory" style="font-size: 11px;" debounce="500"
[config]="EditorConfig">
</ckeditor>
<div style="padding: 10px" *ngIf="!EditMode" [innerHTML]="FirmDetails.Firm.HISTORY_HTML">
</div>
</div>
</div>
</div>
</div>
<div class="btn-toolbar" style="padding-top:40px;">
<span> <button class="btn btn-default btn mr-3">
<i class="fa fa-file-pdf-o"></i>
Download Template
</button>
</span>
<span> <button class="btn btn-default btn mr-3">
<i class="fa fa-th-large"></i>
Upload Template Data
</button>
</span>
<span *ngIf="EditMode"><button type="button" class="btn btn-primary btn-view-all btn mr-3"
(click)="saveManager()">Save</button>
</span>
<span><button type="button" class="btn btn-primary btn-view-all btn mr-3"
(click)="cancelManager">Cancel</button>
</span>
<span><button type="button" style="float: right;" class="btn btn-primary btn-view-all"
(click)="deleteManager()">Delete</button>
</span>
</div>
</form>
</div>
</div>