I want to display this form within two columns. The elements with index from 0 to 4 wrapped in a 'col-md-6' class and from index 5 to 8 in a new 'col-md-6'. Can I achieve that?
<form [formGroup]="openingHoursForm">
<div *ngFor="let dia of selectedCenter.dias; let i = index">
<div class="dayOpeningHours" itemprop="openingHours" title="">
<div>{{ i }}</div>
<div class="opens">
<label for="">De:
<input class="form-control" id="mondayFrom" type="time" formControlName="openingTime{{ dia.diasemana }}" name="openingTime{{ dia.diasemana }}" value="{{ dia.horainicio }}">
</label>
</div>
<div class="closes">
<label for="">A:
<input class="form-control" id="mondayTo" type="time" formControlName="closingTime{{ dia.diasemana }}" name="closingTime{{ dia.diasemana }}" value="{{ dia.horafinal }}">
</label>
</div>
</div>
</div>
</form>
Use the slice pipe With the SlicePipe https://angular.io/api/common/SlicePipe
<div class="col-md-6">
<div *ngFor="let dia of selectedCenter.dias | slice:0:5>
...
</div>
</div>
<div class="col-md-6">
<div *ngFor="let dia of selectedCenter.dias | slice:5:9>
...
</div>
</div>
Related
Here's the radio buttons:
account_type = forms.ChoiceField(
choices=enumerate(('Choice 1', 'Choice 2')),
widget=forms.RadioSelect(
{'class': 'form-check form-check-inline', 'style': 'margin-left: 20px'}
),
label='',
)
I'm using bootstrap-nightshade for styling which possibly contains something that prevents inlining the buttons. So far I tried:
display: inline
and
display: inline-block;
and
class="radio-inline"
Nothing works. Here's the template of the form
{% extends 'index.html' %}
{% load bootstrap5 %}
{% block content %}
<section class="h-100">
<div class="container h-100">
<div class="row justify-content-sm-center h-100">
<div class="col-xxl-4 col-xl-5 col-lg-5 col-md-7 col-sm-9">
<div class="card shadow-lg">
<div class="card-body p-5">
<h4>{{ form_title }}</h4>
<form method="post">
{% csrf_token %}
{% bootstrap_form form %}
<button class="btn btn-success">{{ form_title }}</button>
{% if form_title == 'Sign in' %}
<a style="margin-left: 15px" href={% url 'reset-password' %}>Forgot password?</a>
{% endif %}
</form>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
and here's how they are rendered:
<div class="mb-3">
<div class="form-check form-check-inline" id="id_choices">
<div>
<label for="id_choices_0"><input class="form-check form-check-inline" id="id_choices_0"
name="choices" required="" style="margin-left: 20px" title=""
type="radio" value="0">
Choice 1</label>
</div>
<div>
<label for="id_choices_1"><input class="form-check form-check-inline" id="id_choices_1"
name="choices" required="" style="margin-left: 20px" title=""
type="radio" value="1">
Choice 2</label>
</div>
</div>
</div>
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
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 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>
I got a problem is overriding template. Here is my simple code
In commonHeader.html.twig
{% block topsearch %}
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6 col-search">
<form action="" method="post" class="navbar-form navbar-left form-inline nav-form-search">
<div class="form-group col-md-12 form-search">
<label class="sr-only" for="search">Search</label>
<div class="input-group search-input-group col-md-12">
<input type="text" class="form-control input-search" id="search" placeholder="find...">
<div class="input-group-addon btn-search-addon">
<button type="submit" name="search" class="btn btn-icon-search">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
<button type="submit" name="search" class="btn btn-text-search">SEARCH</button>
</div>
</div>
</div>
</form>
</div>
{% endblock %}
In file commonPage.html.twig I do like this:
{% block header %}
{{ include('::commonHeader.html.twig') }}
{% endblock %}
{% block content %}{% endblock %}
And I have many layouts that extended from commonPage.html.twig.
And on each layout, search have difference action url, so I need to override it.
Ex. in myLayout.html.twig I want to like this
{% extends "::commonPage.html.twig" %}
<!-- start overriding search here -->
{% block topsearch %}
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6 col-search">
<form action="mynewactionurl" method="post" class="navbar-form navbar-left form-inline nav-form-search">
<div class="form-group col-md-12 form-search">
<label class="sr-only" for="search">Search</label>
<div class="input-group search-input-group col-md-12">
<input type="text" class="form-control input-search" id="search" placeholder="find...">
<div class="input-group-addon btn-search-addon">
<button type="submit" name="search" class="btn btn-icon-search">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
<button type="submit" name="search" class="btn btn-text-search">SEARCH</button>
</div>
</div>
</div>
</form>
</div>
{% endblock %}
{% block navigationleft %}
{% endblock %}
The problem is that I can't override search block in myLayout.html.twig?
Thanks for your helping!
Then you just need to fix the layout accordingly, i think its because you need to define your blocks in the main twig , i am not sure how the twig engine renders the includes but define your block in the main twig then include what you need, do not include blocks and then trying to override them. thats how our base.html.twig is defined. all our blocks are inside then we override them.