jQuery UI Widgets › Forums › Dialogs and Notifications › Tooltip, Notification, Popover › jqxPopover "Parent"
Tagged: angular popover, bootstrap popover, javascript popover, jquery popover, jqwidgets popover, jqxPopover, mix, parent
This topic contains 7 replies, has 2 voices, and was last updated by Hristo 8 years, 11 months ago.
-
AuthorjqxPopover "Parent" Posts
-
Hi,
I am trying to use a jqxPopover within a jqxWindow that I open in modal mode “above” the main application page. I have a jqxToolBar control at the top of jqxWindow with a tool that creates and opens a jqxPopover. The problem is that the jqxPopover thinks it is tied to the main page and not to the jqxWindow that is opened in modal mode. I tried using jQuery to change the parent of the jqxPopover to the modal jqxWindow and that doesn’t work. If I make the jqxPopover a modal popover, then the main application page dims and not the jqxWindow that should the the “parent”. Moving the jqxPopover to within the DIV structure of the jqxWindow has no affect.
How do I get the jqxPopover to think it’s opening “parent” is the jqxWindow and not the background application?
<div id=’jqxWindowPopup’style=’position: absolute;’>
<div id=’PopupHeader’ style=’height: 15px; width: 100%; border: 0; margin: 0; padding: 0; border: none;’></div>
<div id=’PopupBody’ style=’display: flex; flex-direction: column; height: 100%; width: 100%; margin: 0; padding: 0;’>
<div id=’jqxWindowPopupToolBar’ style=’flex-shrink: 0;’></div>
<div id=’jqxWindowPopupContent’ style=’overflow: auto; height: 100%; width: 100%;’></div>
</div>
</div><div id=’jqxPopoverResults’>
<div id=’jqxResultsListBox’ style=’border: none;’></div>
</div>
Thanks,
Rob
Hello roblajolla,
Could you like to provide us example in jseditor/fiddle for better analyze.
Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comHere is a simple example of what I mean. Notice that the popover does NOT open with the popup window as its parent. Rather, it opens with the main document as its parent. You can alter the isModal attributes to further illustrate.
thank you!
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”Generator” content=”EditPlusĀ®”>
<meta name=”Author” content=””>
<meta name=”Keywords” content=””>
<meta name=”Description” content=””>
<title>Document</title>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script><script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxtoolbar.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxpopover.js”></script><script type=”text/javascript”>
$(document).ready(function () {
$(‘#jqxButton’).jqxButton( { width: ‘150’} );
$(‘#jqxButton’).on(‘click’, function () {
$(‘#jqxWindowPopup’).jqxWindow( { isModal: true, autoOpen: false, width: ‘85%’, height: ‘85%’ });
$(‘#jqxToolBar’).jqxToolBar({
width: ‘100%’, height: 35, tools: ‘button’, initTools: function (type, index, tool, menuToolInitialization) {
tool.jqxButton( { width: 50 });
tool.attr(‘id’, ‘jqxMenuButton’);
tool.text(‘Popover’);
tool.on(‘click’, function () {
})
}
});
$(‘#jqxPopover’).jqxPopover( {selector: $(‘#jqxMenuButton’), showCloseButton: true, isModal: true });
$(‘#jqxWindowPopup’).jqxWindow(‘open’);
});
});
</script>
</head>
<body>
<div>
<input type=”button” value=”Open Window” id=’jqxButton’ />
</div>
<div id=’jqxWindowPopup’>
<div id=’jqxToolBar’></div>
</div>
<div id=’jqxPopover’></div>
</body>
</html>Hello roblajolla,
Please take a look this example: https://www.jseditor.io/?key=jqwidgets-window-combination
Important for jqxWindow is to have two divs (header and content). Another setting is in CSS (bigger z-index:)Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comHristo,
Thank you for the suggestion. I actually do have 2 divs in the jqxWindowPopup my actual program – I accidentally omitted it in the example – sorry.
The behavior you suggest isn’t quite what I was hoping for. In your example, I have to do a series of event programming to catch all of the possible events that can happen with the popup window. The actual Popover moves with the parent window and closes automatically when the parent window is clicked.
A better solution would be to have this behavior cascaded to the popover of the popup. In fact, if you make the popover modal, the main window is disabled, not the popup window.
If you are planning a fix for this in a future release I will code a temporary fix and wait for the real fix.
Otherwise, do you have any other suggestions?
Thanks,
Rob
Hello roblajolla,
Sorry for this misunderstanding. Now with little CSS settings you could achieve this.
.jqx-popover-modal-background { z-index: 99999; }
Here you could see renewed example.Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comHristo,
Sadly this solution does not work if the popup window is modal, which is what I need. There must be a way to change the “parent” of the popover window to the popup window so the popover opens relative to the popup and not the background window.
Thanks,
Rob
Hi Rob,
Thank you for using our product.
Could you look at this example:
https://www.jseditor.io/?key=jqwidgets-window-combination-second-editionBest Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.