1 Reply Latest reply: Jul 12, 2018 4:14 PM by Casper van Pomeren RSS

    [Mashup] Controlling the direction a filter / magnifying glass opens up

    Casper van Pomeren

      Hi guys,


      I have just migrated from Qlik Sense Feb 2018 to Jun 2018 and I was hoping it would solve some of the problems I had with the april release. After some start-up problems that were solved with the help of Francis Kabinoff and Erik Wetterberg (see: Mashups don't open in Qlik Sense Desktop (June release) ; conclusion: always clear your browser cache before doing anything else ), I thought I could finally enjoy the new release. Unfortunately that isn't the case yet, because I still have a problem that basically ruins my current mashup (single page design).

      The problem is: my filter objects and my magnifying glasses inside the Qlik objects all open towards the top of the screen instead of towards the bottom. This is probably caused by the fact that my page is longer than 1 page and thus Qlik detects that there is enough room to expand upwards. The problem with this is that this ruins my layout of my mashup and it isn't aesthetically pleasing. So I would love to be able to somehow make them go down instead of up.


      My problem in pictures:
      Desired:
      1.png

      Current / Undesired:
      2.png

      Why this is a problem (grey area is page 1, white area is page 2, so the filter goes through 2 pages and changes the scroll position which is quite a problem for me):

      voorbeeldpng2.png

       

       

       

      As you can see, both upwards or downwards are possible inside Qlik Sense. Now I only need to know how to influence Qlik Sense so that it opens downwards when I want it to. After a bit of inspecting the code of the pop-out container I found this in the HTML:

      <div class="lui-popover__arrow ng-scope lui-popover__arrow--bottom" ng-if="showArrow" ng-style="arrow.style" ng-class="'lui-popover__arrow--'+arrow.direction" style="left: 118px;"></div>

      I was hoping this was the part I needed to adjust, but unfortunately this part only controls the small triangle/arrow at the bottom or top of the pop-out container. So even if I change it, the container itself is totally in the wrong spot. I have tried searching the code and googling, but I haven't found anything that could solve my problem. So I was hoping any of you brilliant minds have any ideas or even a solution.

       

      And just to be clear, this layout was perfectly possible inside the Feb 2018 version by using this code:

      .lui-popover-container {

        position: fixed !important;

        z-index: 2000 !important;

      }

      In the Apr and June version this isn't necessary anymore (an improvement in my opinion), but it also isn't an option any more. So I can't decide to just do it like I used to. I also don't want to go back to the Feb 2018 version, because I like the newly added map and would love to add it to my mashup.

       

      Love to hear what you guys think!

       

      Thanks in advance,


      Casper

       

      PS: This question was also in one of the comments of my previously answered questions, but I decided to create a new thread because:
      - Easier to find for people with the same problem (now or in the future);

      - Previous answer was already marked as answered, so it seems illogical to keep that comment thread going.
      - More information added.

        • Re: [Mashup] Controlling the direction a filter / magnifying glass opens up
          Casper van Pomeren

          Ok, so I have been thinking a bit and this was the result (inspired by Francis Kabinoff his comment in the previous thread):

          $(document).ready(function() {

              $('body').click(function(e) {

                  alert("Hallo ");

              if(e.target.class =="lui-popover-container") {

                  return;

                  }

            if($(e.target).closest('.lui-popover-container').length) {

                  return;

                  }

           

                      $(".lui-popover-container").css("cssText", "top: " +e.pageY + "px !important;" + "position: fixed !important;" + "z-index: 5000 !important");

                      $(".lui-popover__arrow--bottom").addClass("lui-popover__arrow--top").removeClass("lui-popover__arrow--bottom");

           

              });

          });


          Example of what I am trying to achieve:

           

          http://jsfiddle.net/AMsK9/1723/

          The line of thinking here is:
          - Make "position: fixed" again;

          - When someone clicks on a filter a div with the class: .lui-popover-container gets created.
          - Because of the "position: fixed" it will get placed wrong vertically, that's why we re-adjust the height to the position of your click;

          - At the same time we change the arrow from bottom to top.

          - The above doesn't happen if you click inside the class "lui-popover-container"

           

          This should result in a somewhat nice solution, but the problem is my javascript doesn't execute when the filter is opened. The moment I press a filter it seems like my javascript gets stopped (I tested this by placing alert("Hello") messages inside my code).

           

          Anyone have any idea on how to fix this?