How to fix this strange padding in bootstrap form? - html

<form class="form-inline">
<div class="form-group">
<div class="input-daterange input-group" id="datepicker">
<label>From:</label>
<input type="text" class="input-sm form-inline" name="start" />
<span class="input-group-addon"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i></span>
</div>
</div>
<div class="form-group">
<div class="input-daterange input-group" id="datepicker">
<label>To:</label>
<input type="text" class="input-sm form-inline" name="end" />
<span class="input-group-addon"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i></span>
</div>
</div>
</form>
when I change class="form-control" for input, it will be ok, but it also change size of whole form :(


Solve:
<form class="form-inline">
<div class="form-group">
<div class="input-daterange" id="datepicker">
<span>From:</span>
<div class="input-group">
<input type="text" class="input-sm form-inline" name="start"/>
<span class="input-group-addon"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i></span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-daterange" id="datepicker">
<span>To:</span>
<div class="input-group">
<input type="text" class="input-sm form-inline" name="end"/>
<span class="input-group-addon"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i></span>
</div>
</div>
</div>
</form>

Related

There is no interaction when clicking the button

error
<form [formGroup]="signUpForm">
<div class="form-group pt-3">
<div class="input-field">
<span class="fa fa-user p-2"></span>
<input formControlName="firstName" type="text" placeholder="Ad">
</div>
</div>
<small
*ngIf="signUpForm.controls['fistName'].dirty && signUpForm.hasError('required', 'firstName')"
class="text-danger">*Ad gerekli!</small>
<div class="form-group pt-3">
<div class="input-field">
<span class="fa fa-user p-2"></span>
<input formControlName="lastName" type="text" placeholder="Soyad">
</div>
</div>
<small
*ngIf="signUpForm.controls['lastName'].dirty && signUpForm.hasError('required', 'lastName')"
class="text-danger">*Soyad gerekli!</small>
<div class="form-group pt-3">
<div class="input-field">
<span class="fa fa-envelope p-2"></span>
<input formControlName="email" type="text" placeholder="E-mail">
</div>
</div>
<small
*ngIf="signUpForm.controls['email'].dirty && signUpForm.hasError('required', 'email')"
class="text-danger">*E-mail gerekli!</small>
<div class="form-group pt-3">
<div class="input-field">
<span class="fa fa-user p-2"></span>
<input formControlName="userName" type="text" placeholder="Kullanıcı Adı">
</div>
</div>
<small
*ngIf="signUpForm.controls['userName'].dirty && signUpForm.hasError('required', 'userName')"
class="text-danger">*Kullanıcı Adı gerekli!</small>
<div class="form-group pt-3">
<div class="input-field">
<span class="fa fa-lock p-2"></span>
<input formControlName="password" [type]="type" placeholder="Şifre">
<span (click)="hideShowPass()" class="fa {{eyeIcon}}"></span>
</div>
</div>
<small
*ngIf="signUpForm.controls['password'].dirty && signUpForm.hasError('required', 'password')"
class="text-danger">*Şifre gerekli!</small>
<button type="submit" style="background-color: black; color:white;"
class="btn btn-black btn-block mt-4 w-100" (click)="onSignUp()">Kayıt Ol</button>
<div class=" text-center pt-4 text-muted">Zaten bir hesabın var mı? <a id="forget"
routerLink="/login">Oturum Aç</a>
</div>
</form>
`
This is my angular signup form but when I click the submit "(kayıt ol)" button, there is no interaction and a frame appears around the password section. How can I fix this? (When you click the Submit button, it should give a warning because there are spaces.)

how to make two elements to be in the same line - html css

I have this code:
<div class="{{($type != 'forecast')?'col-md-8':'col-md-8'}}">
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control" name="name" value="12" {{($viewOnly)?'disabled':''}} >
<i class="fa fa-info-circle" title="test"></i>
</div>
</div>
this is the UI
I just want the <i> icon be next to the input field and not in the bottom.
How I can achieve that?

Wrap the input field and the icon within a div with the class input-group.
<div class="input-group">
<input type="text" class="form-control" name="name" value="12" {{($viewOnly)?'disabled':''}}>
<i class="fa fa-info-circle" title="test"></i>
</div>

this is the solution
<div class="form-group">
<label>Name:</label>
<div class="input-group" style="display: flex">
<input type="text" class="form-control" name="name" value="12" {{($viewOnly)?'disabled':''}} >
<i class="fa fa-info-circle" title="test"></i>
</div>
</div>

How to make full width fields in the form?

I can't make to my fields were full width with bulma:
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet"/>
<nav id="login" class="panel">
<p class="panel-heading">Login</p>
<div class="panel-block">
<form name="LoginForm" action="/login/" method="post">
<div class="field is-fullwidth">
<div class="control is-expanded has-icons-left has-icons-right">
<input class="input is-fullwidth" type="email" placeholder="Email">
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-check"></i>
</span>
</div>
</div>
<div class="field">
<div class="control has-icons-left">
<input class="input" type="password" placeholder="Password">
<span class="icon is-small is-left">
<i class="fas fa-lock"></i>
</span>
</div>
</div>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox">Remember me</a>
</label>
</div>
</div>
<div class="field is-grouped is-grouped-right">
<p class="control">
<button class="button is-success">Login</button>
</p>
</div>
<div class="field">
<div class="control">
I haven't account yet
</div>
</div>
<div class="field">
<div class="control">
I forgot password
</div>
</div>
</form>
</div>
</nav>
What am I doing wrong? is-fullwidth and is-expanded haven't any effect.

The problem is form is not full width. You can add custom css to form
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet"/>
<style>
form {
width: 100%;
float: left;
}
</style>
<nav id="login" class="panel">
<p class="panel-heading">Login</p>
<div class="panel-block">
<form name="LoginForm" action="/login/" method="post">
<div class="field is-fullwidth">
<div class="control is-expanded has-icons-left has-icons-right">
<input class="input is-fullwidth" type="email" placeholder="Email">
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-check"></i>
</span>
</div>
</div>
<div class="field">
<div class="control has-icons-left">
<input class="input" type="password" placeholder="Password">
<span class="icon is-small is-left">
<i class="fas fa-lock"></i>
</span>
</div>
</div>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox">Remember me</a>
</label>
</div>
</div>
<div class="field is-grouped is-grouped-right">
<p class="control">
<button class="button is-success">Login</button>
</p>
</div>
<div class="field">
<div class="control">
I haven't account yet
</div>
</div>
<div class="field">
<div class="control">
I forgot password
</div>
</div>
</form>
</div>
</nav>

Add class="control" to elements directly inside your panel-block.
Example:
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet"/>
<nav id="login" class="panel">
<p class="panel-heading">Login</p>
<div class="panel-block">
<form class="control" name="LoginForm" action="/login/" method="post">
<div class="field is-fullwidth">
<div class="control is-expanded has-icons-left has-icons-right">
<input class="input is-fullwidth" type="email" placeholder="Email">
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-check"></i>
</span>
</div>
</div>
<div class="field">
<div class="control has-icons-left">
<input class="input" type="password" placeholder="Password">
<span class="icon is-small is-left">
<i class="fas fa-lock"></i>
</span>
</div>
</div>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox">Remember me</a>
</label>
</div>
</div>
<div class="field is-grouped is-grouped-right">
<p class="control">
<button class="button is-success">Login</button>
</p>
</div>
<div class="field">
<div class="control">
I haven't account yet
</div>
</div>
<div class="field">
<div class="control">
I forgot password
</div>
</div>
</form>
</div>
</nav>

Bootstrap font awesome in textbox not working properly with label

I have a bootstrap form in which i have used text boxes with the label and it is not working properly. If i removed the font awesome icon which is inside the span tag it is working properly this is my html
<form>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
I want to do something like this
https://jsbin.com/quxodidebi/edit?html,js,output

How about this code? Bootstrap 3:
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
</div>
Bootstrap 4
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user fa-fw"></i></span>
</div>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
</div>
Code snippet:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-user fa-fw"></i>
</span>
</div>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
</div>
Link to JS Fiddle: https://jsfiddle.net/sefnanLm/

Second bootstrap datepicker not working

I have two datepickers with different Id's and only one is working with
<div class="form-group">
<label class="col-sm-3 control-label">From</label>
<div class="col-sm-4">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control" name="peak_start_date_from" value="" id="start_datepicker" required>
</div>
</div>
Not working
<div class="form-group">
<label class="col-sm-3 control-label">From</label>
<div class="col-sm-4">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control" name="peak_start_date_from" value="" id="peak_start_date_from" required>
</div>
</div>
$(document).ready(function() {
$('#peak_start_date_from').datepicker();
});