We are having ngb dropdown such as below
<div ngbDropdown class="d-inline-block" >
<button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<button class="dropdown-item">Action - 1</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
Somehow we tried attaching the [disabled]="true" but is not disabling.
Any other way or how to do it ?
Put your code inside ng-container to disable it.
Related
Hello I am using bootstrap-5 collapses. I have multiple collapses an I need to trigger them all using jquery(not bootstrap button).Here are my collapses.Here is my code
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
I am using Bootstrap5 and wondering how to align two buttons to the right in the same column as the "Delete" button. Another problem is no matter which "breakpoint" (md, sm) I use it's not possible to right align these two buttons properly. I am wondering what is the bootstrap way of doing it.
Snippet
<form>
<div class="hx-form-group position-relative">
<label for="el62ba8cb87eb84be2bebc9c2970de0552" class="form-label">Goal #1</label><span class="input-group"><input id="el62ba8cb87eb84be2bebc9c2970de0552" type="text" class="form-control" placeholder="Enter goal #1 text here." _bl_6="">
<button type="button" class="hx-button btn btn-danger" _bl_7="">
Delete
</button>
</span>
<div class="form-text">Hint: enter short, precise description what you want to do today</div>
</div>
<div class="hx-form-group position-relative">
<label for="el28a7e89fc62249dd80048d65487a2354" class="form-label">Goal #2</label><span class="input-group"><input id="el28a7e89fc62249dd80048d65487a2354" type="text" class="form-control" placeholder="Enter goal #2 text here." _bl_8="">
<button type="button" class="hx-button btn btn-danger" _bl_9="">
Delete
</button>
</span>
<div class="form-text">Hint: enter short, precise description what you want to do today</div>
</div>
<div class="hx-form-group position-relative">
<label for="ele59dd34cf9ed4db2a92de894f47b5946" class="form-label">Goal #3</label><span class="input-group"><input id="ele59dd34cf9ed4db2a92de894f47b5946" type="text" class="form-control" placeholder="Enter goal #3 text here." _bl_10="">
<button type="button" class="hx-button btn btn-danger" _bl_11="">
Delete
</button>
</span>
<div class="form-text">Hint: enter short, precise description what you want to do today</div>
</div>
<div class="container text-center">
<div class="row justify-content-end">
<div class="col-4">
<button type="button" class="hx-button btn btn-secondary" _bl_4="" disabled="">
New Goal
</button>
</div>
<div class="col-4">
<button type="submit" class="hx-button btn btn-primary">
Save
</button>
</div>
</div>
</div>
</form>
First of all, you don't need to use row and col as a wrapper of buttons as row cols have different purposes so you can do it like this
[https://codepen.io/kukrati/pen/YzaYEXy]
and make sure you have removed its parent .container class
if you don't want to change your existing layout due to some limitations then you just need to replace .col-lg-4 with .col-auto and then remove the parent .container class
there is a button in the page with the sintax below
<div _ngcontent-cnw-c181="" class="col text-center ng-star-inserted">
<p _ngcontent-cnw-c181="" class="text-primary font-weight-bold">
Click the button below
</p>
<button _ngcontent-cnw-c181="" type="button" routerlink="/web/click" class="btn btn-primary" tabindex="0" ng-reflect-router-link="/web/click">
<i _ngcontent-cnw-c181="" aria-hidden="true" class="fa fa-check-circle"></i>
Click Here
</button>
</div>
but when I try to localize it using Locator, it returns the error: Microsoft.Playwright.PlaywrightException: 'Unknown engine "routerlink" while parsing selector routerlink=/web/click'
Page.Locator("routerlink=/web/click").ClickAsync();
The only solution I found is by searching for "text=Click here" but I would like to use the "routerlink" keyword instead because the text might change more often in the future.
This should work: Page.Locator("//button[#routerlink='/web/click']").ClickAsync();
I want to have a multiple nested offcanvas for Bootstrap 5.
When I click a button, the first offcanvas should be opened and then click another button which is on the first offcanvas, the second offcanvas should be opened over the first offcanvas and the first offcanvas should not be closed.
I will make second one smaller and so the first one still be shown.
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
<i class="fas fa-bars"></i>
</a>
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample2" role="button" aria-controls="offcanvasExample">
<i class="fas fa-bars"></i>
</a>
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample3" role="button" aria-controls="offcanvasExample">
<i class="fas fa-bars"></i>
</a>
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample4" role="button" aria-controls="offcanvasExample">
<i class="fas fa-bars"></i>
</a>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample6" role="button" aria-controls="offcanvasExample">
<i class="fas fa-bars"></i>
</a>
</div>
</div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample6" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
From the Bootstrap docs...
"Similar to modals, only one offcanvas can be shown at a time."
I used Material tab group in Bootstrap Modal. I always want the 2nd tab active. If I set [selectedIndex]='1', I get the 2nd tab active while opening the modal first time. But after opening first time, if I select 3rd tab and close the modal and reopen the modal, I get the 3rd tab active, not the 2nd tab.
How can I always get the 2nd tab active while opening the modal?
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal" tabindex="-1" role="dialog" id="exampleModal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<mat-tab-group [selectedIndex]='1'>
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I think it's a bug but you can use 2 way data binding, it works
<md-tab-group [(selectedIndex)]="selectedIndex">
In your ts file:
selectedIndex: number = 1;
and you have to set selectedIndex value on click of your modal button like this:
<button type="button" mat-raised-button data-toggle="modal" data-target="#bootstrap" data-keyboard="false" (click)="selectedIndex = 1">
Open Modal
</button>