topic Re: Using PopOver in Extensions in Integration, Extension & APIs

Using PopOver in Extensions

thhaenig — Tue, 12 Jan 2016 09:01:16 GMT

Hello,

i do have some problems using pop overs in the extension. When a button or Link, etc. is outside of the extension area it is not possible for me to get it on top of the elements (z-index and position absolute in the css do not work the way I was imagine). When I append elements with buttons on a other position in the DOM (outside of the extension element) it is possible to click the elements, but then I have some problems to join the $scops.

Does anyone have a idea how to solve the problem?

Best thanks in advance

Greetings Thomas

Re: Using PopOver in Extensions

Stefan_Walther — Tue, 12 Jan 2016 15:12:47 GMT

Hi,

yes, was having that problem in one of my extensions. Actually you have to append the DOM object to body and not the current element to make this work. Just cannot find it, but you'll see that many other jQuery components use the same trick when it comes to show something outside the current container.

Hope this helps, if not, ping me, I'll try to find my example.

Regards

Stefan

Re: Using PopOver in Extensions

thhaenig — Wed, 13 Jan 2016 10:31:09 GMT

Hi,

thanks for the reply. It worked with the following jQuery Syntax

$(document).on("click", "#testContentVal", function() {

alert('it works!');

});

"#testContent ist a element on the PopOver"

But if i understand it correctly, the angular click event does not work on these PopOvers, you have to call a jQuery click event?

Regards

Thomas

Re: Using PopOver in Extensions

mjones87 — Mon, 15 Aug 2016 13:18:07 GMT

Does anyone have a working example of the appending to body fix as suggested by Stefan...?

Re: Using PopOver in Extensions

Anonymous — Sat, 24 Sep 2016 17:48:48 GMT

Hi Stefan,

I am also facing the same issue of displaying drop down.

I have developed a navigation widget in 3.0.2 which has auto drop down mechanism. but when I mouse on a list the drop down comes fine, but when there is another element below to that drop down and when i move on the list of drop down, then automatically the focus moves to the 2nd element, can you please suggest how to fix this using .CSS.

I am using only HTML & CSS no other one as I am not able to find to add .js / jquery in the Widgets.

Please help on me on this.

Thanks

Chenna