4 Replies Latest reply: Sep 24, 2016 1:48 PM by Chenna Reddy RSS

    Using PopOver in Extensions

    Thomas Hänig



      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



          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.




            • Re: Using PopOver in Extensions
              Thomas Hänig



              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?




              • Re: Using PopOver in Extensions
                Mark Jones

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

                • Re: Using PopOver in Extensions
                  Chenna Reddy

                  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.