I have used the separate close button to close the popover but not able to navigate to the close button using keyboard.
"#ng-bootstrap/ng-bootstrap": "^4.1.0",
code:
<div>
<ng-template #popContent>
<span id="glossary"> {{element.description| glossary:glossaryDescription}}</span>
<button class="close" (click)="p.close()" tabindex="0"><img src="assets/icons/close.svg"></button>
</ng-template>
<button class="popoverLink" [ngbPopover]="popContent" [autoClose]="false"
triggers="manual" #p="ngbPopover" (click)="p.open()" placement="top-right bottom-right"
container="body"
html="true" popoverClass="custom-popover">
{{split(element.description)[0]}}
</button>
/{{split(element.description)[1]}}
</div>
Related
I would like to display a calendar to the mat-menu, because I want to look like airbnb, where you click a button and the calendar is being opened, but the calendar is not being displayed.
This is the code:
<div fxFlex="0 1 auto">
<button mat-raised-button [matMenuTriggerFor]="dateRangeMenu">
{{startEndDate}}
</button>
<mat-menu #dateRangeMenu="matMenu" [overlapTrigger]="false">
<aa-animatepicker [options]="datepickerOptions" [(selectedDates)]="dates"
(click)="$event.stopPropagation()">
</aa-animatepicker>
</mat-menu>
</div>
Does anybody know how to accomplish this?
You should use
<ng-template matMenuContent>
if you want to incorporate datepicker in mat-menu.
I'm looking for a way to check if my mat-menu is open so I can add a class to the button that opened it using [ngClass] based on the state of the menu.
<button mat-stroked-button mdbWavesEffect [matMenuTriggerFor]="menu">Actions</button>
<mat-menu #menu="matMenu" [overlapTrigger]="false" panelClass="custom">
<a routerLink="/attendence/detail" mat-menu-item>View Attendance</a>
<a routerLink="/adherence/detail" mat-menu-item>View Adherece</a>
<button mat-menu-item>Edit Agent</button>
<button mat-menu-item>Upload photo</button>
<button mat-menu-item>Deactivate Agent</button>
</mat-menu>
You can use Material matMenuTrigger directive to check whether the menu is open or not
<button mat-button [matMenuTriggerFor]="menu" #t="matMenuTrigger">Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
{{t.menuOpen}}
Check the example here: https://stackblitz.com/edit/angular-9hbzdw
Now you use ngClass binding to change the style of your button!
You can bind your method on "menuOpened", that method will be invoked whenever Menu is opened
<mat-menu #menu="matMenu" [overlapTrigger]="false" (menuOpened)="isOpened($event)" panelClass="custom">
<a routerLink="/attendence/detail" mat-menu-item>View Attendance</a>
<a routerLink="/adherence/detail" mat-menu-item>View Adherece</a>
<button mat-menu-item>Edit Agent</button>
<button mat-menu-item>Upload photo</button>
<button mat-menu-item>Deactivate Agent</button>
</mat-menu>
And add this method in your component,
isOpened(evt:any){
// set you flag here that you can use in ng-class for the button.
}
Hope this helps.
I faced the same suituation. And I made a CSS work around.
While we click on the menu a custom aria tag is appended to the menu and get removed while we close the dropdoen. With this we can use CSS custom selector (It works with most mordern browsers)
.parentclass a[aria-expanded] { whatever you need }
Some case (if button)
.parentclass button[aria-expanded] { whatever you need }
Thanks,
<button mat-stroked-button mdbWavesEffect [matMenuTriggerFor]="menu">Actions</button>
<mat-menu #menu="matMenu" [overlapTrigger]="false" panelClass="custom">
<a routerLink="/attendence/detail" mat-menu-item>View Attendance</a>
<a routerLink="/adherence/detail" mat-menu-item>View Adherece</a>
<button [ngClass]="selectedMenuItem ===1 ? 'active' : ''" (click)="onSelectMenuItem(1)" mat-menu-item>Edit Agent</button>
<button [ngClass]="selectedMenuItem ===2 ? 'active' : ''" (click)="onSelectMenuItem(2)" mat-menu-item>Upload photo</button>
<button [ngClass]="selectedMenuItem ===3 ? 'active' : ''" (click)="onSelectMenuItem(3)" mat-menu-item>Deactivate Agent</button>
</mat-menu>
selectedMenuItem = 1 // Initial value set to 1
onSelectMenuItem(id): void {
this.selectedMenuItem = id;
}
Sometimes you might face an issue with the mat-menu when your angular application uses the onPush changeDetection. So in that case you need to let Angular know that menu is open or closed.
Angular Material provides the event to detect if the menu is open or not.
menuOpened: Event emitted when the associated menu is opened.
menuClosed: Event emitted when the associated menu is closed.
Here is the code:
<button mat-button #menuOption="matMenuTrigger" [matMenuTriggerFor]="menu"
(menuOpened)="menuOption.menuOpen" (menuClosed)="menuOption.menuOpen">
Menu
<span>{{menuOption.menuOpen ? 'open': 'closed'}}</span>
</button>
I am using WP Fullcalendar Plugin (https://wordpress.org/plugins/wp-fullcalendar/) on my website. It works fine as a shortcode placed on a normal page template. However I want it to work in a Bootstrap Modal Dialog box which is opened on clicking a link.
Here is my code of modal Dialog with Fullcalendar shortcode in it.
<!-- Modal -->
<div class="modal fade" id="myCalendarModal" tabindex="-1" role="dialog" aria-labelledby="myCalendarModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myCalendarModalLabel">Modal title</h4>
</div>
<div class="modal-body"><?php echo do_shortcode( ' [fullcalendar] ' ); ?></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
And here is the link to open this dialog box
<a class="open-cal" href="#" data-toggle="modal" data-target="#myCalendarModal">Open Calendar</a>
Now when I open the modal dialog box it does not load the calendar and only shows the loader spinning and spinning.
As suggested in answers like this one, Full calendar not showing inside bootstrap modal, the solution like
$('#myCalendarModal').on('shown.bs.modal', function () {
$(".wpfc-calendar").fullCalendar('render');
});
is not feasible here because the fullCalendar function needs to be passed the "fullcalendar_args" which is set in a footer hook and the related javascript file is located within the plugin files.
Any suggestion to make it work without hacking core plugin files?
Yes I have had to hack the core plugin inline.js file, as there is no other option right now.
1.You have to declare the "fullcalendar_args" variable as global
In line 4 of /includes/js/inline.js, Change
var fullcalendar_args = {
to
fullcalendar_args = {
2.Comment out 90 and 91 lines in the same file
/*
$(document).trigger('wpfc_fullcalendar_args', [fullcalendar_args]);
$('.wpfc-calendar').first().fullCalendar(fullcalendar_args);
*/
And then
3.Call these two lines in the page template where you have modal to be called, such as:
$('#myCalendarModal').on('shown.bs.modal', function () {
$(document).trigger('wpfc_fullcalendar_args', [fullcalendar_args]);
jQuery(".wpfc-calendar").fullCalendar(fullcalendar_args);
});
After this has been done, if wanted to show normal calendar on any other page, you may have to call the following two lines where ever you want calendar to appear, such as in footer or something, based on a condition etc.
$(document).trigger('wpfc_fullcalendar_args', [fullcalendar_args]);
jQuery(".wpfc-calendar").fullCalendar(fullcalendar_args);
It would be good if further updates to WP Fullcalendar Plugin incorporate these changes based on a shortcode argument or something similar approach.
<button type='submit'
value='".$complainListArray['CompID']."'
class='btn btn-default'
style='width:95px;float:right'
data-toggle='modal'
data-target='#myModal'
name='button_update_sentiment'
id='button_update_sentiment'
>Update</button>
I got this problem, when type='submit', then the Bootstrap Modal is not showing.
It works when I use type='button', but then I can't carry the value of the button.
Need help. Thanks
In this JSBin: http://jsbin.com/fitiha/10/edit?js,output
Why is the "Tweet button" to the right of the "Add Photo" button. Per the code below, I believe it should be to the left?
<button className="btn btn-primary pull-right"
disabled={this.state.text.length === 0 && !this.state.photoAdded}>Tweet
</button>
<button className="btn btn-default pull-right"
onClick={this.togglePhoto}>
{this.state.photoAdded ? "✓ Photo Added" : "Add Photo" }
</button>
You are using the pull-right class which is essentially float:right and that's how it works.
It stacks the elements in inverted order of their occurence.
Since, Tweet occured before Add Photo, it got floated to the right, and then add photo followed.
You could read up the CSS Spec here:
http://www.w3.org/TR/CSS2/visuren.html#floats
Or this SO answer for more info on how float works.