I am a newbie in laravel and bootstrap. I spent already 2 hours trying to make normal formatting, but the result is
enter image description here
What i'm doing wrong?
<div class="row">
<form method="POST" class="form-inline" action="{{action('OrderController#setDiscont')}}">
<input type="hidden" name="_token" value="{{csrf_token()}}">
<div class="input-group {{ $errors->has('discont') ? ' has-error' : '' }}">
<span class="col-md-7">
<input type="text" placeholder="Скидка" name="discont" class="form-control" value="{{$discont or ""}}">
</span>
<span class="input-group-btn col-md-5">
<input type="submit" value="Установить" class="btn-block btn btn-default" >
</span>
<div class="help-block">
#if ($errors->has('discont'))
<strong>{{ $errors->first('discont') }}</strong> #endif
</div>
</div>
</form>
</div>
<div class="row">
<form method="POST" class="form-inline" action="{{action('OrderController#setClient')}}">
<input type="hidden" name="_token" value="{{csrf_token()}}">
<div class="input-group {{ $errors->has('phone') ? ' has-error' : '' }}">
<span class="col-md-7">
<input type="text" placeholder="телефон" id="phone" name="phone" class="form-control" value="{{ old('phone') }}">
</span>
<span class="input-group-btn col-md-5">
<input type="submit" value="Найти" class="btn btn-primary" >
</span>
<div class="help-block">
#if ($errors->has('phone'))
<strong>{{ $errors->first('phone') }}</strong> #endif
</div>
</div>
</form>
</div>
This should work for you. Read the documentation for input groups. I'm assuming this is what you wanted from your css classes, but you can also check out the documentation for inline forms if that's what you wanted.
<div class="row">
<form method="POST" class="form-inline" action="POST">
<input type="hidden" name="_token" value="{{csrf_token()}}">
<div class="form-group {{ $errors->has('discont') ? ' has-error' : '' }}">
<div class="input-group">
<input type="text" placeholder="Скидка" name="discont" class="form-control" value="{{$discont or ""}}">
<div class="input-group-addon" style="padding:0;">
<input type="submit" value="Установить" class="btn-block btn btn-default" style="border: 0px;border-radius: 0px; background-color: #ddd;">
</div>
</div>
<div class="help-block">
#if ($errors->has('discont'))
<strong>{{ $errors->first('discont') }}</strong>
#endif
</div>
</div>
</form>
</div>
<div class="row">
<form method="POST" class="form-inline" action="POST">
<input type="hidden" name="_token" value="{{csrf_token()}}">
<div class="form-group {{ $errors->has('phone') ? ' has-error' : '' }}">
<div class="input-group">
<input type="text" placeholder="телефон" id="phone" name="phone" class="form-control" value="{{ old('phone') }}">
<div class="input-group-addon" style="padding:0;">
<input type="submit" value="Установить" class="btn-block btn btn-default" style="border: 0px;border-radius: 0px; background-color: #ddd;">
</div>
</div>
<div class="help-block">
#if ($errors->has('phone'))
<strong>{{ $errors->first('phone') }}</strong>
#endif
</div>
</div>
</form>
</div>
Related
I am working on a project using Angular-7. I tried to render a modal form with the code shown below:
user.component.html
<div id="addModal" class="modal" style="background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add New {{ User }}</h5>
<button type="button" class="close" (click)='closeAddModal()'>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="alert alert-danger" [hidden]="!error.role">
{{ error.role }}
</div>
<div class="alert alert-danger" [hidden]="!error.email">
{{ error.email }}
</div>
<div class="alert alert-danger" [hidden]="!error.first_name">
{{ error.first_name }}
</div>
<div class="alert alert-danger" [hidden]="!error.last_name">
{{ error.last_name }}
</div>
<div class="alert alert-danger" [hidden]="!error.client_id">
{{ error.client_id }}
</div>
<div class="alert alert-danger" [hidden]="!error.password">
{{ error.password }}
</div>
<form #editUserForm=ngForm>
<div class="form-group">
<label for="name">First Name</label>
<input type="name" name="first_name" id="inputName" class="form-control" placeholder="First Name" [(ngModel)]="form.first_name" required>
</div>
<div class="form-group">
<label for="name">Last Name</label>
<input type="name" name="last_name" id="inputName" class="form-control" placeholder="Last Name" [(ngModel)]="form.last_name" required>
</div>
<div class="form-group">
<label for="name">Email</label>
<input type="email" name="email" id="inputEmail" class="form-control" placeholder="example#email.com" required [(ngModel)]="form.email">
</div>
<div class="form-group">
<label for="name">Client</label>
<select class="form-control pt-1" name="client_id" [(ngModel)]="form.client_id">
<option value="null">Select Client</option>
<option *ngFor="let c of clients" value="{{c?.client_id}}">{{c.client_name}}</option>
</select>
</div>
<div class="form-group">
<label for="name">Role</label>
<div *ngFor="let role of roles">
<input type="checkbox" name="{{ role.name }}" value="{{ role.name }}" (change)="checkboxAdd($event)"> {{ role.name }}
</div>
</div>
<div class="form-group">
<label for="name">Password</label>
<input type="password" name="password" id="inputPassword" [(ngModel)]="form.password" class="form-control" placeholder="Password" required>
</div>
<div class="form-group">
<label for="name">Password Confirmation</label>
<input type="password" name="password_confirmation" id="inputPasswordConfirm" [(ngModel)]="form.password_confirmation" class="form-control" placeholder="Re enter Password" required>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)='addModalSubmit()' [disabled]="!editUserForm.valid">Save changes</button>
<button type="button" class="btn btn-secondary" (click)='closeAddModal()'>Close</button>
</div>
</div>
</div>
</div>
In the form, I have checkboxes for user roles. I observed that the form got truncated and some of the checkboxes not being displayed. Also, the submit button is not showing. Even the vertical scrollbar on the page could not resolve the problem.
How do I resolve this and make everything visible?
How do I make the checkboxes to be divided into three (3) columns using:
<div class="col-xs-4">
How do I resolve this and make everything visible?
Using overflow, solve this problem easily. For example;
<div class="content">
this is content * 70
</div>
<style>
.content {
overflow-y: scroll; /* for vertical scroll */
}
</style>
How do I make the checkboxes to be divided into three (3) columns using:
Use flex. Everyting is easy :)
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
<div class="area">
<div *ngFor="let role of roles" class="item">
<input type="checkbox" name="{{ role.name }}" value="{{ role.name }}" (change)="checkboxAdd($event)"> {{ role.name }}
</div>
</div>
<style>
.area {
display: flex;
flex-direction: row;
width: 100%;
}
.area .item {
width: 33.3%;
}
</style>
You could use bootstrap class checkbox-inline to have all the options in one line.
Please Look at this
i want to use bootstrap 4 custom control for checkbox, after reading the documentation i wrote this, but the checkbox is not shown, what am i doing wrong?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-body"><label>Add Productc Varian for </label>
<div class="form-group"><label for="formGroupExampleInput">Code</label><input type="text" class="form-control" placeholder="Enter Name"></div>
<div class="form-group"><label for="formGroupExampleInput">Name</label><input type="text" class="form-control" placeholder="Enter Name"></div>
<div class="form-group"><label for="formGroupExampleInput2">Description</label><textarea class="form-control" placeholder="Description"></textarea></div>
<div class="form-group">
<div class="custom-control custom-checkbox"><label for="formGroupExampleInput2">Default</label><input type="checkbox" class="custom-control-input" id="customControlValidation1"></div>
</div>
<hr>
<div class="form-group">
<div class="col-12"><button type="button" class="btn btn-default float-right">Add</button><button type="button" class="btn btn-danger float-right">Cancel</button></div>
</div>
</div>
Just add the missed class custom-control-label for label. You just want to follow custom forms Bootstrap-v4 form for reference.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card-body">
<label>Add Productc Varian for </label>
<div class="form-group">
<label for="formGroupExampleInput">Code</label>
<input type="text" class="form-control" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="formGroupExampleInput">Name</label>
<input type="text" class="form-control" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Description</label>
<textarea class="form-control" placeholder="Description"></textarea>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Default</label>
</div>
</div>
<hr>
<div class="form-group">
<div class="col-12">
<button type="button" class="btn btn-default float-right">Add</button>
<button type="button" class="btn btn-danger float-right">Cancel</button>
</div>
</div>
</div>
<!-- begin snippet: js hide: false console: true babel: false -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-body"><label>Add Productc Varian for </label>
<div class="form-group"><label for="formGroupExampleInput">Code</label><input type="text" class="form-control" placeholder="Enter Name"></div>
<div class="form-group"><label for="formGroupExampleInput">Name</label><input type="text" class="form-control" placeholder="Enter Name"></div>
<div class="form-group"><label for="formGroupExampleInput2">Description</label><textarea class="form-control" placeholder="Description"></textarea></div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
</div>
</div>
<hr>
<div class="form-group">
<div class="col-12"><button type="button" class="btn btn-default float-right">Add</button><button type="button" class="btn btn-danger float-right">Cancel</button></div>
</div>
</div>
This will fix the problem for you. Just following the correct syntax for custom checkboxes does the work.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-body"><label>Add Productc Varian for </label>
<div class="form-group"><label for="formGroupExampleInput">Code</label><input type="text" class="form-control" placeholder="Enter Name"></div>
<div class="form-group"><label for="formGroupExampleInput">Name</label><input type="text" class="form-control" placeholder="Enter Name"></div>
<div class="form-group"><label for="formGroupExampleInput2">Description</label><textarea class="form-control" placeholder="Description"></textarea></div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customControlValidation1">
<label class="custom-control-label" for="customControlValidation1">Default</label>
</div>
<hr>
<div class="form-group">
<div class="col-12"><button type="button" class="btn btn-default float-right">Add</button><button type="button" class="btn btn-danger float-right">Cancel</button></div>
</div>
</div>
Source: JS Bin
I had the same problem, the problem was that my Bootstrap 4 files were not updated. Just download the latest version and it should be OK
Im trying to modified the builtin laravel Auth to take in more attribute, but have encountered the error "function name must be a string". I didnt know what i did wrong.
Here's my create method:
protected function create(array $data)
{
$imgPath = Storage::putFile('public/photos/users', $data('image'));
$imgPath = 'photos/users/' . basename($imgPath);
return User::create([
'imgPath' => $imgPath,
'firstName' => $data['firstName'],
'lastName' => $data['lastName'],
'about' => $data['about'],
'email' => $data['email'],
'username' => $data['username'],
'password' => Hash::make($data['password']),
'role' => $data['role'],
'province_id' => $data['province_id'],
]);
}
the error show the that the part where i try to store image to $imgPath is where exception occured but i dont know whats wrong there. I used the same code for many time, worked fine. Here's my register view:
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Register') }}</div>
<div class="card-body">
<form method="POST" action="{{ route('register') }}">
#csrf
<div class="input-group mb-3">
<div class="custom-file">
<label class="custom-file-label" for="image">Upload a picture of yourself</label>
<input type="file" class="custom-file-input" id="image" name="image" required>
</div>
</div>
<div class="form-group row">
<label for="firstName" class="col-md-4 col-form-label text-md-right">{{ __('First Name') }}</label>
<div class="col-md-6">
<input id="firstName" type="text" class="form-control{{ $errors->has('firstName') ? ' is-invalid' : '' }}" name="firstName" value="{{ old('firstName') }}" required autofocus>
#if ($errors->has('firstName'))
<span class="invalid-feedback">
<strong>{{ $errors->first('firstName') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group row">
<label for="lastName" class="col-md-4 col-form-label text-md-right">{{ __('Last Name') }}</label>
<div class="col-md-6">
<input id="lastName" type="text" class="form-control{{ $errors->has('lastName') ? ' is-invalid' : '' }}" name="lastName" value="{{ old('lastName') }}" required autofocus>
#if ($errors->has('lastName'))
<span class="invalid-feedback">
<strong>{{ $errors->first('lastName') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group row">
<label for="about" class="col-md-4 col-form-label text-md-right">{{ __('About You') }}</label>
<div class="col-md-6">
<textarea placeholder="Tell us something about yourself"
id="about"
name="about"
required autofocus
rows="5" spellcheck="true"
class="form-control{{ $errors->has('about') ? ' is-invalid' : '' }} autosize-target text-left ">{{ old('about') }}</textarea>
#if ($errors->has('about'))
<span class="invalid-feedback">
<strong>{{ $errors->first('about') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" required>
#if ($errors->has('email'))
<span class="invalid-feedback">
<strong>{{ $errors->first('email') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group row">
<label for="username" class="col-md-4 col-form-label text-md-right">{{ __('Username') }}</label>
<div class="col-md-6">
<input id="username" class="form-control{{ $errors->has('username') ? ' is-invalid' : '' }}" name="username" value="{{ old('username') }}" required>
#if ($errors->has('username'))
<span class="invalid-feedback">
<strong>{{ $errors->first('username') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required>
#if ($errors->has('password'))
<span class="invalid-feedback">
<strong>{{ $errors->first('password') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group row">
<label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
<div class="col-md-6">
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" required>
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Register') }}
</button>
</div>
</div>
<input type="hidden" name="role" value="guide" />
<input type="hidden" name="province_id" value="1" />
</form>
</div>
</div>
</div>
</div>
</div>
#endsection
You can change
$data('image')
to
$data['image']
Because $data is an array, not a function.
I have deployed an application build in laravel 5.3. On my login forms I see this warning : This connection is not secure. Logins entered here could be compromised.
This is my form :
<form class="form-horizontal" role="form" method="POST" action="{{ url('/login') }}">
{{ csrf_field() }}
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label for="email" class="col-md-3 control-label"></label>
<div class="col-md-6">
<input id="email" type="email" class="form-control" placeholder="Email" name="email" value="{{ old('email') }}" required autofocus>
#if ($errors->has('email'))
<span class="help-block">
<strong>{{ $errors->first('email') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
<label for="password" class="col-md-3 control-label"></label>
<div class="col-md-6">
<input id="password" type="password" placeholder="Password" class="form-control" name="password" required>
#if ($errors->has('password'))
<span class="help-block">
<strong>{{ $errors->first('password') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember Me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-3">
<button type="submit" class="btn btn-primary">
Login
</button>
<a class="btn btn-link" href="{{ url('/password/reset') }}">
Forgot Your Password?
</a>
</div>
</div>
</form>
What I'm I missing or how can I fix this warning?
This is a Firefox feature to warn visitors of websites that information they submit is not transferred securely.
The browser shows this warning for pages containing an <input type="password" /> which are delivered through HTTP instead of HTTPS.
To mitigate this, obtain a certificate for your site and install it, so your users are protected against eavesdropping.
I am trying to layout a form using bootstrap 3 but for some reason the input is pushed to left.
My markup looks like this
<div class="jumbotron">
<form name="invoiceForm" class="form-horizontal" role="form" data-toggle="validator">
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_date" >Date work performed</label>
<p class="input-group col-sm-3">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_ref_no" required-asterix="" >Ref No</label>
<div class="col-sm-2">
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="">
</div>
<div role="alert">
<span class="error has-error alert-danger" ng-show="invoiceForm.txt_job_ref_no.$error.required">
Ref no is required!</span>
</div>
</div>
</form>
</div>
Here is the link to fiddle
Many thanks in advance!
This should help. Wrap the labels and elements in cols, and the form in a .container inside the .jumbotron. You were over-complicating the layout.
<div class="jumbotron">
<div class="container">
<form name="invoiceForm" class="form-horizontal" role="form" data-toggle="validator">
<div class="col-sm-12">
<div class="form-group">
<label class="control-label" for="txt_job_date">Date work performed</label>
<div class="input-group">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label" for="txt_job_ref_no" required-asterix="" >Ref No</label>
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="">
</div>
</div>
</form>
</div>
</div>
http://jsfiddle.net/j8x15dbs/1/
Edit: Missed part about form being horizontal. Added new code below to reflect that.
This has the layout you're looking for
<div class="jumbotron">
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_date">Date work performed</label>
<div class="col-sm-7">
<div class="input-group">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="txt_job_ref_no" required-asterix="">Ref No</label>
<div class="col-sm-7">
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="required">
</div>
</div>
</form>
</div>
</div>
http://jsfiddle.net/j8x15dbs/2/
A real easy thing to do - and a great way to learn - is to just copy the examples off of Bootstrap's site and replace their values with yours. :)
remove <col-sm-2> from before the input tag. As good practice, always use <div class="row"> before using <col-sm-12> and don't use rows or columns inside <div class="form-group">
Please read about bootstrap scaffolding to understand how to write good markup.