Rightpanel Menu disappear when click inside Selectonemenu

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

23 Aug 2018, 09:57

I have Selectonemenu's inside the ultima right panel. So when i open the rightpenelmenu and i choose an item inside the selectonemenu the right panel disappears.

i see inside the code that this is caused inside the layout.js file. Exactly in this part

Code: Select all

if(!$this.rightPanelClick && !$this.rightPanelButtonClick && $this.rightPanel.hasClass('layout-rightpanel-active')) {
     $this.rightPanel.removeClass('layout-rightpanel-active');
     $this.rightPanelButton.removeClass('rightpanel-btn-active');
}
Now how can i change this behevior without break future ultima releases? When i remove this part it will work like expacted, but in future releases when i overwrite the layout.js file i will end up at the beginning with the problem!
PrimeFaces 6.2.14,Mojarra 2.3.0,Payara 5.184

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

28 Aug 2018, 19:27

Is no one out there who can help me?
PrimeFaces 6.2.14,Mojarra 2.3.0,Payara 5.184

cagatay.civici
Prime
Posts: 18104
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

28 Aug 2018, 20:31

Excuses for the delay, do your p:SelectOneMenu has appendTo="body" or similar, if so please try removing appendTo.

The code you've referred makes sure, clicking outside the right panel, closes it so I believe it is still useful to keep so problem should better be solved from the selectOneMenu point of view.

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

28 Aug 2018, 21:21

Thx for your response! No i dont use appendto! If i click the selectonemenu input it dorsnt disappears but when i then choose an item from the popup list it disappears
PrimeFaces 6.2.14,Mojarra 2.3.0,Payara 5.184

cagatay.civici
Prime
Posts: 18104
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

29 Aug 2018, 21:44

Thank you, my colleague will review this and reply by 31st latest.

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

29 Aug 2018, 21:58

Thx u! Im awaiting your Response! If im not wrong in selectonemenu it not exist appendto attribute!? If it exist maybe i can use appendto=this?
PrimeFaces 6.2.14,Mojarra 2.3.0,Payara 5.184

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

30 Aug 2018, 14:26

Ok i've resolved it for most part! in all select* components i add appendTo="this" and it works like expacted! But the only problem component is now calendar because this component not has the appendTo attribute. And the calendar has realy strange behevior!!! When you open claendar popup and click on the input components directly rigtpanel doesn't disappear, but when you click on other parts inside the popup (not on input components) the reightpanel menu disappears!? :shock:
PrimeFaces 6.2.14,Mojarra 2.3.0,Payara 5.184

User avatar
aragorn
Posts: 3641
Joined: 29 Jun 2013, 12:38

31 Aug 2018, 10:05

Please try;

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.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;
    }
    
});
//]]>
   </script>
We'll add this fix into next version.

Best Regards,

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

31 Aug 2018, 10:27

I added this code to my template, inside layout.js of ultima and also to rightpanel.xhtml but it doesnt works! Where i exacty have to put this code?

FYI: I've removed the appendTo attribute
PrimeFaces 6.2.14,Mojarra 2.3.0,Payara 5.184

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

31 Aug 2018, 18:59

aragorn wrote:
31 Aug 2018, 10:05
Please try;

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.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;
    }
    
});
//]]>
   </script>
We'll add this fix into next version.

Best Regards,
You could add layout.js or rightpanel.xhtml. The script is working.

Example p:calendar code:

Code: Select all

<div class="layout-rightpanel-content">
	...
                    <p:calendar id="calendar"/>
</div>

Post Reply

Return to “Ultima - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest