Rightpanel Menu disappear when click inside Selectonemenu

Forum rules
Please note that response time for technical support is within 3-5 business days.
markusg80
Posts: 69
Joined: 21 Nov 2013, 17:11

31 Aug 2018, 19:23

Ok this skript is only to solve the Calendar bug! It is still needed to add appendto=@this to select* components! I was thinking that this script will also solve the Problem with the select* components because my Solution to add appendto is just a workaround in my oppinion! I ican confirm that the strange behevior of calendar is solved
PrimeFaces 12.0.0,Mojarra 4.0.0,Payara 6

markusg80
Posts: 69
Joined: 21 Nov 2013, 17:11

10 Sep 2018, 21:17

@huseyinT: Please can u also solve the Problem with the select* components that it isnot neccessary to add appendto this? Because if the panel is larger than the rightpanel in width the right part of the panel is out of the screen! Without appendto to the position of the panel is perfect!
PrimeFaces 12.0.0,Mojarra 4.0.0,Payara 6

huseyinT
Posts: 123
Joined: 27 Mar 2016, 13:05

12 Sep 2018, 13:40

You should use 'appendTo' property components.

The calendar doesn't have "appendTo", we added the script for you.

Greetings,

markusg80
Posts: 69
Joined: 21 Nov 2013, 17:11

12 Sep 2018, 14:04

At the moment i have set appendTo for all select* components. Here example with selectCheckboxMenu:

Code: Select all

                                    <p:selectCheckboxMenu id="unitchooser" 
                                                          value="#{useReportBean.selectedMilunits}"
                                                          converter="omnifaces.SelectItemsConverter"
                                                          label="#{intl.unit}"
                                                          appendTo="@this"
                                                          disabled="#{useReportBean.dateSelection}"
                                                          filter="true" filterMatchMode="contains">
                                        <f:selectItems value="#{useReportBean.milunitsForSelectedSite}" 
                                                       var="milunit" itemLabel="#{milunit.name}" 
                                                       itemValue="#{milunit}" />
                                        <p:ajax listener="#{useReportBean.onMilunitSelect}"
                                                partialSubmit="true" process="@this"
                                                update="rangestart rangestop" />
                                    </p:selectCheckboxMenu>
But with this part the Overlay Panel is out of Screen:
Image

The fix for calendar is working perfect! Now it should be fixed the issue also for select* Components so that the appendTo=this no longer is needed

This is absolutly bad.
PrimeFaces 12.0.0,Mojarra 4.0.0,Payara 6

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

14 Sep 2018, 13:55

Please try the following JS code instead of appendTo="@this" in right panel;

Code: Select all

<script type="text/javascript">
//<![CDATA[
/** 
 * PrimeFaces Ultima Layout
 * @Override _bindEvents method
 */
PrimeFaces.widget.Ultima = PrimeFaces.widget.Ultima.extend({
    
    _bindEvents: function() {
        this._super();
        
        var $this = this;
        
        $(document.body).off('click').on('click', function(e) {
            if(($this.isHorizontal() || $this.isSlim()) && !$this.menuClick && $this.isDesktop()) {
                $this.menu.find('.active-menuitem').removeClass('active-menuitem');
                $this.menu.find('ul:visible').hide();
                $this.menuActive = false;
            }
            
            if(!$this.topbarMenuClick && !$this.topbarLinkClick) {
                $this.topbarItems.find('.active-top-menu').removeClass('active-top-menu');
            }
            
            if(!$this.menuClick && $this.isSlim()) {
                $this.deactivateItems($this.menu.children('.active-menuitem'), false);
            }
            
            if(!$this.rightPanelClick && !$this.rightPanelButtonClick && $this.rightPanel.hasClass('layout-rightpanel-active') && !$this.isDatePickerPanelClicked() && !$this.isOverlayInputPanelClicked(e)) {                
                $this.rightPanel.removeClass('layout-rightpanel-active');
                $this.rightPanelButton.removeClass('rightpanel-btn-active');
            }
            
            if(!$this.topbarMenuClick && !$this.topbarLinkClick) {
                $this.topbarItems.removeClass('topbar-items-visible');
            }
                        
            $this.menuClick = false;
            $this.menuButtonClick = false;
            $this.topbarLinkClick = false;
            $this.topbarMenuClick = false;
            $this.rightPanelClick = false;
            $this.rightPanelButtonClick = false;
        });
    },
    
    isDatePickerPanelClicked: function() {
        if($.datepicker) {
            var input = $($.datepicker._lastInput);
            if(input.closest('.layout-rightpanel').length && $('#ui-datepicker-div').is(':visible')) {
                return true;
            }
        }
        return false;
    },
    
    isOverlayInputPanelClicked: function(e) {
        var el = $(e.target),
        panel = el.closest('.ui-input-overlay');
        if(panel.length) {
            var inputId = panel.attr('id').replace(/_panel/g, '');
            input = $(PrimeFaces.escapeClientId(inputId));

            if(input.length && input.closest('.layout-rightpanel').length) {
                return true;
            }
        }
        return false;
    }
    
});
//]]>
   </script>

markusg80
Posts: 69
Joined: 21 Nov 2013, 17:11

15 Sep 2018, 21:39

@aragorn: You made it! Now it works like expected! Thx so much. Can u please merge this fix to ultima 1.1.4?
PrimeFaces 12.0.0,Mojarra 4.0.0,Payara 6

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

17 Sep 2018, 12:06

You're welcome! I'll add it to next version.

Best Regards,

markusg80
Posts: 69
Joined: 21 Nov 2013, 17:11

09 Oct 2018, 21:06

@aragorn: I'm again. This solution solves everything perfectly for mouse usage. Today im testing it with touch screen and there is same behavor like with mouse without the fix. Is it possible to extend your solution for touchsupport?
PrimeFaces 12.0.0,Mojarra 4.0.0,Payara 6

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

11 Oct 2018, 09:44

Today im testing it with touch screen and there is same behavor like with mouse without the fix. Is it possible to extend your solution for touchsupport?
- I tried this issue with my fix. It works fine for me. Could you please attach a video for us or Which steps do I need to follow to replicate?

markusg80
Posts: 69
Joined: 21 Nov 2013, 17:11

11 Oct 2018, 11:20

Here i have a short Video to see the effect: https://drive.google.com/open?id=1g9466 ... BTMRF9m1b3

I tested it with other components to, but it seeams that it only doesn't work with selectBooleanCheckboxMenu!
PrimeFaces 12.0.0,Mojarra 4.0.0,Payara 6

Post Reply

Return to “Ultima - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests