I need to put a date in my apllication so I do this:
<!--data -->
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 form-group">
<mat-form-field>
<mat-label>Data di nascita</mat-label>
<!-- #docregion toggle -->
<input matInput [matDatepicker]="picker" placeholder="gg/MM/yyyy">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<!-- #enddocregion toggle -->
</mat-form-field>
</div>
The problem is I don't know how remove this focus in the image:
In my style.css I do this:
#import '~#angular/material/theming';
#import '~bootstrap-italia/dist/css/bootstrap-italia.min.css';
The problem could be some rules that I import. Anyone can help to remove the focus yellow in the components that I have seen in my image?
It's because of the default input style use this
input:focus { outline: none; }
::ng-deep *,*:focus,*:hover{
outline:none !important;
}
Add this CSS to your Page CSS file
Related
I have a normal form with mat-form-field inputs inside. Form contains a field for date and a field for hour. The fields are looking good in chrome:
However, in Firefox and Microsoft Edge the one field has a bigger height than the other:
I'm not really sure what might cause such thing, especially that my components don't implement any special styles to the inputs. I'm just using Flex Layout
<!-- Date and Time Start -->
<div fxFlex
fxLayout.lt-sm="column"
fxLayoutGap="2%"
fxLayoutAlign.gt-sm="space-around stretch"
fxLayout="row">
<!-- Date Start -->
<mat-form-field appearance="fill"
fxFlex
color="accent">
<input id="inputDateStart"
matInput
[formControl]="startDate"
(dateChange)="startDateChanged($event.value)"
[matDatepicker]="pickerStart"
[max]="startDatePickerMax"
placeholder="ab">
<mat-error>{{ getErrorMsgForDate() }}</mat-error>
<mat-datepicker-toggle matSuffix
[for]="pickerStart"></mat-datepicker-toggle>
<mat-datepicker #pickerStart></mat-datepicker>
<mat-hint>Ab Aufnahmedatum</mat-hint>
</mat-form-field>
<!-- Time Start -->
<app-w-mat-timepicker color="accent"
id="timePickerStart"
placeholder="von"
[timeFormat]="24"
[(userTime)]="startTimeToFilterFor"
(userTimeChange)="startTimeChanged($event)"></app-w-mat-timepicker>
</div>
And my clock component
<div fxFlex
fxLayout="row">
<mat-form-field fxFlex
appearance="fill"
color="accent">
<input matInput
[placeholder]="placeholder"
[value]="time">
<mat-hint>Uhrzeit</mat-hint>
<mat-icon matSuffix
(click)="showPicker($event)"
svgIcon="clock"></mat-icon>
</mat-form-field>
</div>
Stackblitz example
The problem was with the icon of the datepicker, it is too big!
To solve this, I had to add the icon manually to my project and then use it inside the mat-datepicker-toggle component.
Reference this answer https://stackoverflow.com/a/48924487/4956266
The answer of Motassem Jalal is correct. The icon of the datepicker is too big.
But you don't have to add your own icon. You can simply change the the font-size in the mat-datepicker-toggle component.
For example:
mat-datepicker-toggle {
font-size: 10px;
}
and in html:
<mat-form-field appearance="fill">
<mat-label>Label</mat-label>
<input matInput [matDatepicker]="dateToPicker" />
<mat-datepicker-toggle matSuffix [for]="dateToPicker"></mat-datepicker-toggle>
<mat-datepicker #dateToPicker></mat-datepicker>
</mat-form-field>
I am using:
Angular 7.2.4
Bootstrap 4.3.1
ng-bootstrap 4.1.0.
After I followed the getting-started guide on ng-bootstrap, my output looks like this:
How can I add the correct style to the Popup button?
My html:
<form class="form-inline">
<div class="form-group">
<div class="input-group">
From:
<input class="form-control" placeholder="{{format}}"
name="FromDp" [(ngModel)]="fromDateObj" ngbDatepicker #d="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
</div>
</div>
</div>
</form>
http://plnkr.co/edit/NCNmpm3tlxapH4jZS08F?p=preview
Check the working demo here
If you open the stackblitz code here - you will see bootstrap css added to index.html & also check styles.css in the stackblitz above to find:
/* Datepicker popup icon */
button.calendar, button.calendar:active {
width: 2.75rem;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAcCAYAAAAEN20fAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEUSURBVEiJ7ZQxToVAEIY/YCHGxN6XGOIpnpaEsBSeQC9ArZbm9TZ6ADyBNzAhQGGl8Riv4BLAWAgmkpBYkH1b8FWT2WK/zJ8ZJ4qiI6XUI3ANnGKWBnht2/ZBDRK3hgVGNsCd7/ui+JkEIrKtqurLpEWaphd933+IyI3LEIdpCYCiKD6HcuOa/nwOa0ScJEnk0BJg0UTUWJRl6RxCYEzEmomsIlPU3IPW+grIAbquy+q6fluy/28RIBeRMwDXdXMgXLj/B2uimRXpui4D9sBeRLKl+1N+L+t6RwbWrZliTTTr1oxYtzVWiTQAcRxvTX+eJMnlUDaO1vpZRO5NS0x48sIwfPc87xg4B04MCzQi8hIEwe4bl1DnFMCN2zsAAAAASUVORK5CYII=') !important;
background-repeat: no-repeat;
background-size: 23px;
background-position: center;
}
I'm trying to create a form with Angular2 Material and bootstrap grid,
my HTML looks like this:
<div class="row">
<div class="col-md-6 marign-top-10 margin-bottom-10">
<md-input-container class="full-width">
<input
mdInput
type="text"
formControlName="postal"
placeholder="Postal">
</md-input-container>
</div>
<div class="col-md-6 marign-top-10 margin-bottom-10">
<div class="full-width">
<md-select class="full-width" placeholder="Country" formControlName="country_id">
<md-option *ngFor="let country of countries" value="{{country.id}}">{{ country.name }}</md-option>
</md-select>
</div>
</div>
</div>
my full-width css class just set width:100%.
the problem is that the inputs are not in the same line as it should be
here is a few screenshots:(my application is right to left language so ignore the text direction )
it is a css problem you can add this to your component stylesheet:
.mat-select{
margin-top:10px;
}
Play with the value maybe is greater than 10 or lower
It a problem with md-select styles, I had trouble in project too, so my solution is:
CSS
md-select {
min-height: 30px; // or any value that equal md-input-container>input height
}
JSFiddle example
I've spent hours trying to get rid of the border radius on my select2 append checkbox. As of now the dropdown is displayed with a checkbox on the left. The problem is that there seems to be a border radius between the two input group elements, something similar to the image. The solution proposed was adding the input-group select2-bootstrap-prepend class to the wrapper element which doesn't work for me.
The html is as follows
<div class="col-lg-3">
<div class="panel-body">
<b>Region</b><br>
<div class="input-group select2-bootstrap-prepend">
<span class="input-group-addon">
<input type="checkbox" checked>
</span>
<select id="select2-single-append" class=" region">
</select>
</div>
</div>
</div>
View the running example from jsfiddle
you need
.select2-container--default .select2-selection--single {
border-radius:0 0.25rem 0.25rem 0;
}
see this fiddle
https://jsfiddle.net/grassog/kLchxehz/25/ (relevant css at the bottom of the css portion)
I have made a form with different inputs.
One of these allow to choose a date, made with this very nice package:
http://www.eyecon.ro/bootstrap-datepicker/
The only problem is that all the form fields have the default blue focus:
.uneditable-input:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
...
}
But the field made with Bootstrap-Datepicker has a yellow default focus, that I am not able to modify.
How can I remove that style and apply the default bootstrap style, so to obtain consistency?
Assuming that you're using the latest Bootstrap 3, you just need to add the form-control class to your inputs and it will override the datepicker's yellow outline. I also wrapped the inputs inside `col-md-3' since Bootstrap 3 no longer defines a specific width for inputs.
<div class="input-append date ">
<div class="col-md-3">
<label>Arrival Date</label>
<input name="arrival" class="form-control datepicker" data-date-format="dd/mm/yyyy" id="checkin" placeholder="click here">
</div>
</div>
<div class="input-append date">
<div class="col-md-3">
<label>Outgoing Date</label>
<input name="outgoing" class="form-control datepicker" data-date-format="dd/mm/yyyy" id="checkout" placeholder="click here">
</div>
</div>
http://bootply.com/86834
EDIT:
For Bootstrap 2.x just make sure you add type="text" to your inputs and it will show the blue outline. I've update the Bootply.