I am trying to move the .mat-tab-header-pagination-after to next to the .mat-tab-header-pagination-before in a .mat-tab-group, the angular tab component. I am wondering how I am able to move the after pagination either in the html or css. Since it is automatic when the pagination shows, I am not sure how I am able to instantiate it differently so that it moves to the placement I want it to be. Any help from html or css familiar with angular components?
<mat-tab-group [selectedIndex]="selected.value"
(selectedIndexChange)="selected.setValue($event)">
<mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab" (contextmenu)="onContextMenu($event, tab)">
<ng-template mat-tab-label>
<div class="col" style="margin-left: 20px;">{{tab}}</div>
<button *ngIf="tab.name !== 'Main'" style="color:black; bottom:10px; right:10px" mat-icon-button (click)="closeTab(index)">
<mat-icon>close</mat-icon>
</button>
<button mat-icon-button [matMenuTriggerFor]="contextMenu">
<mat-icon>more_vert</mat-icon>
</button>
</ng-template>
Contents for {{tab}} tab
</mat-tab>
<mat-tab disabled>
<ng-template mat-tab-label>
<button mat-icon-button (click)="addTab(selectAfterAdding.checked)">
<mat-icon>add_circle</mat-icon>
</button>
</ng-template>
</mat-tab>
</mat-tab-group>
Before Picture:
Image of how it is now
After Picture with wanted placement:
Image with moved placement
Since .mat-tab-header is a flex container, you can user the order property on child elements to change it's order:
.mat-tab-header-pagination-controls-enabled {
.mat-tab-header-pagination-before {
order: 0;
}
.mat-tab-header-pagination-after {
order:1;
}
.mat-tab-label-container {
order: 2;
}
}
Note that due to style encapsulation you need to apply those in global styles.
Stackblitz with updated styles (forked from official examples) here.
Related
I have a row of cards and when I mouse over one of the cards, I want a "Shop Now" button to appear on the card. Is there a way to do it with just CSS?
This is the part of the card with the button:
<div class="card-text">
<button type="button" id="btnShopNow" class="btn btn-primary">Shop Now</button>
</div>
Here is what I have for the css so far:
.btnShopNow .card {
display:none;
}
.card:hover {
transform:scale(1.1);
background-color:#f8f9fa;
/* need to figure out how to do something like #btnShopNow display:block; */
}
I would like to change the size of some bootstrap offcanvas elements. (not all!)
(To change all, I know I can change the SASS-Varianble ($offcanvas-horizontal-width: 400px))
I would like to make this work in a way that I have different CSS classes that I can add to the offcanvas (like the modal with .modal-xl).
I.e. here e.g. .offcanvas-size-l and .offcanvas-size-xl
Of course, the offcanvas should also remain responsive (i.e. not go beyond 100vw for narrower screens. (i.e. with max-width / media-query).
Unfortunately, this is not feasible only simply with a width specification, because bootstrap work in addition to width with corrosponding negative margin which push the offcanvas "out of screen" I.e. that are several values that must be adjusted.
Since I "compile" bootstrap itself via Sass, I have a more Options and can insert before and after the (s)css any parts/SASS functions. (or edit bootstrap source)
Has anyone been able to make this work?
I don't need the "responsive-offcanvas" function (offcanvas-xl) which is new in 5.2 /an does something complete different.
Example code (Directly from the bootstrap page, only "offcanvas-size-xl" added)
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
Toggle static offcanvas
</button>
<div class="offcanvas offcanvas-start offcanvas-size-xl" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
I will not close if you click outside of me.
</div>
</div>
</div>
In the end it was easier than I thought, there is also a CSS variable that you can influence (mit SASS):
.offcanvas-size-xl {
--#{$prefix}offcanvas-width: min(95vw, 600px) !important;
}
.offcanvas-size-xxl {
--#{$prefix}offcanvas-width: min(95vw, 90vw) !important;
}
.offcanvas-size-md { /* add Responsivenes to default offcanvas */
--#{$prefix}offcanvas-width: min(95vw, 400px) !important;
}
.offcanvas-size-sm {
--#{$prefix}offcanvas-width: min(95vw, 250px) !important;
}
For those who do not compile bootstrap, they should be able to do so:
.offcanvas-size-xl {
--bs-offcanvas-width: min(95vw, 600px) !important;
}
.offcanvas-size-xxl {
--bs-offcanvas-width: min(95vw, 90vw) !important;
}
.offcanvas-size-md { /* add Responsivenes to default offcanvas */
--bs-offcanvas-width: min(95vw, 400px) !important;
}
.offcanvas-size-sm {
--bs-offcanvas-width: min(95vw, 250px) !important;
}
I have mat-toolbar and a button at the end of it.
When i try to get the position of the button it gives me wrong value of left/right.
In the following example both buttons return same positioning although one is at the beginning of the screen and the other is at the end.
Html:
<mat-toolbar color="primary">
<mat-toolbar-row>
<span> toolbar</span>
<span class="example-spacer"></span>
<button #rowBtn mat-button (click)="clickButtonOut()">
click me
</button>
</mat-toolbar-row>
</mat-toolbar>
<button #outOfRowBtn mat-stroked-button (click)="clickButtonOut()">button outside of toolbar</button>
Ts:
#ViewChild('rowBtn',{static: false}) row: any;
#ViewChild('outOfRowBtn',{static: false}) out: any;
clickButtonRow(){
alert(this.row._elementRef.nativeElement.getBoundingClientRect().left)
}
clickButtonOut(){
alert(this.out._elementRef.nativeElement.getBoundingClientRect().left)
}
https://stackblitz.com/edit/angular-bk38qb
You always call the same function. You can never get the right value. You have to change the one function call from clickButtonOut() to clickButtonRow()!
Your Code:
<mat-toolbar color="primary">
<mat-toolbar-row>
<span> toolbar</span>
<span class="example-spacer"></span>
<button #rowBtn mat-button (click)="clickButtonOut()"> <-- wrong function
click me
</button>
</mat-toolbar-row>
</mat-toolbar>
<button #outOfRowBtn mat-stroked-button (click)="clickButtonOut()"> <-- right function
button outside of toolbar
</button>
Here is a stackblitz of this behavior. What I expect to see is that when the Complete button is clicked, the first step is complete, so the icon would change to "10". However, there is no change, and even when moving to the second step, the icon is "create". Am I misunderstanding how the completed property is supposed to be working, or is there a bug in the Material code?
Couple of things wrong here:
the icon is "create":
The stepper has a dependency on material icons. Adding material-icons to your project and the 'cre' icon is gone.
Also, the create / edit icon is normal behavior for a completed step. If you like the step to be marked as done you have to set completed=true and editable = false
Another issue is the use of let-index="index". There is nothing in the V5 docs on this. (And your stackblitz is using V5).
If you have the possibility to upgrade to V6, then it's possible to what you're asking. I've created a stackblitz for this behaviour.
component.ts
import { Component, ViewChild } from '#angular/core';
import { MatHorizontalStepper } from '#angular/material';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
#ViewChild(MatHorizontalStepper) stepper: MatHorizontalStepper;
complete() {
this.stepper.selected.completed = true;
this.stepper.selected.editable = false;
this.stepper.next();
}
}
component.html
<mat-horizontal-stepper linear id="stepper">
<ng-template matStepperIcon="done" let-index="index">
{{(index+1) * 10}}
</ng-template>
<mat-step label="Step 1">
<p>Step 1</p>
<button mat-button (click)="complete()" mat-raised-button color="primary">Complete</button>
</mat-step>
<mat-step label="Step 2">
<h3>Step 2</h3>
<button mat-button (click)="complete()" mat-raised-button color="primary">Complete</button>
</mat-step>
<mat-step label="Step 3">
<h3>Step 3</h3>
<button mat-button (click)="complete()" mat-raised-button color="primary">Complete</button>
</mat-step>
</mat-horizontal-stepper>
How to disable the button in coding using jquery mobile?
<div data-role="button" id="val">Value</div>
[Note : I want to disable the button in the coding, not in the design time]
Live Example: http://jsfiddle.net/LHG4L/5/
HTML:
<div data-role="page">
<div data-role="content">
<input type="button" id="theButton" name="theButton" value="The Button">
</div>
</div>
JS:
$('#theButton').attr('disabled',true);
UPDATE:
Link button example:
http://jsfiddle.net/gRLYQ/6/
JS
var clicked = false;
$('#myButton').click(function() {
if(clicked === false) {
$(this).addClass('ui-disabled');
clicked = true;
alert('Button is now disabled');
}
});
$('#enableButton').click(function() {
$('#myButton').removeClass('ui-disabled');
clicked = false;
});
HTML
<div data-role="page" id="home">
<div data-role="content">
Click button
Enable button
</div>
</div>
NOTE: - http://jquerymobile.com/demos/1.0rc2/docs/buttons/buttons-types.html
Links styled like buttons have all the same visual options as true
form-based buttons below, but there are a few important differences.
Link-based buttons aren't part of the button plugin and only just use
the underlying buttonMarkup plugin to generate the button styles so
the form button methods (enable, disable, refresh) aren't supported.
If you need to disable a link-based button (or any element), it's
possible to apply the disabled class ui-disabled yourself with
JavaScript to achieve the same effect.
You can and should disable it using both jquery and jquerymobile:
$('#theButton').attr('disabled', true);
if ($('#theButton').button) $('#theButton').button('disable')
You can disable button using the attribute class="ui-disabled" as follows:
Link button