In Bootstrap Modal Popup Tab order not moving to Datatable Header?
Without Datatable ,In modal popup shift+tab order is going out of the popup dialog. It needs to be inside of the Modal dialog.
Check this fiddle, try adding tabindex to the modal element
All of the answers and comments are wrong in here. This "bug" is also occurs in antd-Modal. Somehow, shift+tab combination goes outside of the modal and you can select and type(in input elements for example) everything behind the modal.
For now, seems like there is no fix for this.
Related
I have a mat-sidenav and a list of mat-item and mat-menu. Then when I hover over of one of the items I want the menu to display. This part is working. But then when I move off of that menu or item and over a new item I want its menu to display.
https://stackblitz.com/edit/angular-xsscrm
I have included a stackblitz with a demo of the behavior.
What is wrong here I have both on enter and exit, but then when I leave a menu on to a new one, it doesnt open unless I click on it.
Thanks for the help
The issue here is that when a menu opens, it creates an overlay with a backdrop that overlaps all elements. This backdrop is causing the mouse events to not be 'seen' by the listening element until the overlay is dismissed via a mouse click. Luckily, the menu control has a flag to remove the backdrop; setting this to false fixes the issue you're seeing.
Side note: you have an *ngFor on the <mat-list> element, but I think you want to move it to the <mat-list-item> element instead because you want many list items, not many lists. Since you're using the local variable of *ngFor outside of the <mat-list-item>, you can create an <ng-container> element to house your *ngFor. See below stackblitz:
https://stackblitz.com/edit/angular-xsscrm-kx6jyd
Another side note: this behavior is similar to a tooltip. Perhaps that would be a better control for your use-case? https://material.angular.io/components/tooltip/overview
I just want to show modal on another modal. (Close current one and needs to open new one) So I used
Register here
data-dismiss="modal" I try with this attribute end of link and it's woking fine. The problem is that the second modal height is bit higher. I can't scroll down to see it's upper content. and input fields looking weird. Please see this image.
Is there any other way to show modal when another modal by closing first modal?
try this
$('#myModal-1').on('hidden.bs.modal', function (e) {
$('#myModal-2').modal('show');
});
https://jsfiddle.net/princesodhi/ru2rz404/
I'm using three bootstrap modals with identical html forms in each, with the exception of the PayPal button ID.
For some reason, on the live site I cannot type in the forms in modal 1 or 2 unless I've clicked on modal 3 and clicked in one of the text boxes. But the buttons at the end of each form work fine with or without the textboxes working.
(& It's the same for Chrome, Mozilla and IE.)
Any suggestions?
Located at:
http://mytravelagentportal.com/deluxe/test/
Maybe it's because modal 2 doesn't have style="display: none;", it's just have opacity: 0, and you can't click on elements behind it (modal 1). And because of this you can't click on button 2, it's also behind hidden modal 2
Bootstrap does not support multiple modals, so I wrote some javascript to switch out the button value for paypal and used one modal. Code can be seen at the same link.
This alternative was cleaner than using the three different modals anyways.
I'm trying to work around a webview issue on Android devices using Select drop down menus, using instead radio buttons in a popup to make user selections
What I need though is for the button text to change according to the selection the user has made. I've put togetaher a Fiddle of what I thought would work, but it's not playing ball, and I was wondering if any wiser heads out there could offer some advice.
Fiddle here;
http://jsfiddle.net/vinomarky/gEXhD/
Note: I've currently added some alerts in there when the javascripts fire, but they are not firing, and am not sure why not.
Question 1:
How to change the button text to match the user selection
Question 2:
How to make the radio selection minimize as soon as a user has made a selection, without having to click off the radio
Thanks in advance
you can use jquery click event instead of using onclick attribute
because you use jquery mobile ui, to change button text you should change button text container value not pressure_cands itself
and to hide popup screen when an item selected call click event of popupBasic-screen div
$('#updown1').click(function(){
// to change button label
$('#pressure_cands .ui-btn-text').html('THP');
// call popupBasic-screen click event to hide popup menu
$('#popupBasic-screen').click();
});
$('#updown2').click(function(){
// to change button label
$('#pressure_cands .ui-btn-text').html('FBHP');
// call popupBasic-screen click event to hide popup menu
$('#popupBasic-screen').click();
});
I have created a custom TitleWindow whcih i use as a popup. The contents of the popup are created dynamically depending on a selection a user makes from a datagrid.
My problem is, my datagrid is in another custom component whcih is toward the bottom of my page so when a user clicks one of the items the popup is displayed however with half of it out of sight at the bottom of the page.
Is there a way to position a popup so that it displays at the top of the page?
I know at least two things you can use to position a popup, though there might be more.
When you place a popup you can choose in which parent component to place the popup:
PopUpManager.createPopUp(this.parent, TitleWindowComponent);
In the component itself:
PopUpManager.centerPopUp(this);
I wanted a help tooltip type popup (with help text) to appear next to the icon that opened it. In the end I used move(x,y) to move the window where I wanted it. To get the coordinates to place it, use globalToLocal:
var globalX:Number = localToGlobal(new Point(myIcon.x, myIcon.y)).x;
var globalY:Number = localToGlobal(new Point(myIcon.x, myIcon.y)).y;
toolTip.move(globalX + myIcon.width, globalY);
That puts the window just to the right of the icon, myIcon.