Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

BlockUI not centered #9796

Closed
crocimi opened this issue Feb 14, 2023 · 10 comments · Fixed by #9810
Closed

BlockUI not centered #9796

crocimi opened this issue Feb 14, 2023 · 10 comments · Fixed by #9810
Assignees
@melloware
Labels
🐞 defect Bug...Something isn't working workaround A workaround has been provided
Milestone
13.0.0

Comments

@crocimi
Copy link
Contributor

crocimi commented Feb 14, 2023 •
edited

a blockui associated to a commandbutton is not centered if the command button has an action listener. If we remove the action listener it works as expected. Issue noticed after upgrading from PF8 to PF12.0.0.

test.xhtml

    <!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

<h:head>
    <title>TEST</title>

</h:head>

<h:body styleClass="login-body logout">

    <h:form>
        <p:commandButton value="test" actionListener="#{myTestBean.waitOneSecond}" onstart="PF('panelBlocker').show();" oncomplete="PF('panelBlocker').hide();"/>
    </h:form>

    <h:panelGroup style="background-color: red; height: 400px; width: 400px;" id="panel" layout="block">

    </h:panelGroup>

    <p:blockUI block="panel" widgetVar="panelBlocker">
        <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
    </p:blockUI>
</h:body>

</html>

MyTestBean.java



import javax.faces.view.ViewScoped;
import javax.inject.Named;

@Named
@ViewScoped
public class MyTestBean  implements java.io.Serializable{

    public String waitOneSecond(){
        try {
            Thread.sleep(2000);
        } catch (InterruptedException e) {
            throw new RuntimeException(e);
        }
        return "success";
    }
}
@tandraschko
Copy link
Member

Please provide a reproducer, otherwise its invalid

@crocimi
Copy link
Contributor Author

crocimi commented Feb 14, 2023

ok, done. Here the screenshot

image

@melloware
Copy link
Member

It has already been fixed: #9496

Please see that ticket for the fix.

@melloware melloware self-assigned this Feb 14, 2023
@melloware melloware added the 🚫 duplicate Duplicate of a similar issue label Feb 14, 2023
@melloware melloware added this to the 13.0.0 milestone Feb 14, 2023
@crocimi
Copy link
Contributor Author

crocimi commented Feb 14, 2023

Ok, sorry I havent found that bug report. Thank you very much

@crocimi crocimi closed this as completed Feb 14, 2023
@crocimi
Copy link
Contributor Author

crocimi commented Feb 17, 2023

I'm not sure if I'm doing something wrong but the proposed workaround doesn't fix my problem. The icon is still placed in the wrong position at the start of the action and "jumps" to the correct position at the end of the action (see screenshots below).

I have included the javascript file with the proposed fix in the xhtml.

<h:outputScript library="thirdparty" name="primefaces/js/primefaces-custom.js"/>

primefaces-custom.js

if (PrimeFaces.widget.BlockUI) {
    PrimeFaces.widget.BlockUI.prototype.alignOverlay = function() {
        this.target = PrimeFaces.expressions.SearchExpressionFacade.resolveComponentsAsSelector(this.cfg.block);
        if (this.blocker) {
            this.blocker.css('z-index', PrimeFaces.nextZindex());
        }

        //center position of content
        for (var i = 0; i < this.target.length; i++) {
            var currentTarget = $(this.target[i]),
                blocker = $(this.blocker[i]),
                content = $(this.content[i]);

            // configure the target positioning
            var position = currentTarget.css("position");
            if (position !== "fixed" && position !== "absolute") {
                currentTarget.css('position', 'relative');
            }

            // set the size and position to match the target
            var height = currentTarget.height(),
                width = currentTarget.width(),
                offset = currentTarget.offset();
            var sizeAndPosition = {
                'height': height + 'px',
                'width': width + 'px',
                'left': offset.left + 'px',
                'top': offset.top + 'px'
            };
            blocker.css(sizeAndPosition);

            var contentHeight = content.outerHeight();
            var contentWidth = content.outerWidth();
            // #9496 if display:none then we need to clone to get its dimensions
            if (contentHeight === 0) {
                var currentWidth = this.content[i].getBoundingClientRect().width;
                var clone = this.content[i].cloneNode(true);
                clone.style.cssText = 'position: fixed; top: 0; left: 0; overflow: auto; visibility: hidden; pointer-events: none; height: unset; max-height: unset; width: ' + currentWidth + 'px';
                document.body.append(clone);
                var jqClone = $(clone);
                contentHeight = jqClone.outerHeight();
                contentWidth = jqClone.outerWidth();
                jqClone.remove();
            }

            content.css({
                'left': ((blocker.width() - contentWidth) / 2) + 'px',
                'top': ((blocker.height() - contentHeight) / 2) + 'px',
                'z-index': PrimeFaces.nextZindex()
            });
        }
    }
}

image
image

@melloware
Copy link
Member

You might be missing other fixes. I would grab the whole blockui.js from master and try and use that. Or test with 13.0.0-SNAPSHOT either one.

@melloware
Copy link
Member

If you put together a an executable example using the PrimeFaces Test project I can take a look. There might be some other scenario different than the other one causing this.

@melloware melloware reopened this Feb 17, 2023
@melloware melloware added Status: Needs Reproducer Needs a reproducer showing the issue and removed 🚫 duplicate Duplicate of a similar issue labels Feb 17, 2023
@melloware melloware changed the title blockUI not centered BlockUI not centered Feb 17, 2023
@melloware
Copy link
Member

OK reproducer: pf-9796.zip

With 12.0.0 its way off center. with 13.0 its slightly off center and then snaps to center as its finishing. I will look into it.

@melloware melloware added 🐞 defect Bug...Something isn't working and removed Status: Needs Reproducer Needs a reproducer showing the issue labels Feb 17, 2023
@melloware
Copy link
Member

@crocimi can you also add this MonkeyPatch:

if (PrimeFaces.widget.BlockUI) {
    PrimeFaces.widget.BlockUI.prototype.bindResizer = function() {
        var $this = this;
        this.resizeHandler = PrimeFaces.utils.registerResizeHandler(this, 'resize.' + this.id + '_resize', this.target, function() {
            $this.alignOverlay();
        });

        // subscribe to all DOM update events so we can resize even if another DOM element changed
        $(document).on('pfAjaxSend pfAjaxUpdated', function(e, xhr, settings) {
            if (!$this.cfg.blocked) {
                setTimeout(function() {
                    $this.alignOverlay()
                }, 0);
            }
        });
    }
}

melloware added a commit to melloware/primefaces that referenced this issue Feb 17, 2023
@melloware
Fix primefaces#9796: BlockUI center content
caa47ed
@melloware melloware mentioned this issue Feb 17, 2023
Merged
@melloware melloware added the workaround A workaround has been provided label Feb 17, 2023
@crocimi
Copy link
Contributor Author

crocimi commented Feb 17, 2023

adding the second fix seems to solve the issue.

thx

melloware added a commit that referenced this issue Feb 17, 2023
@melloware
Fix #9796: BlockUI center content (#9810)
896bc93
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@melloware melloware

Labels
🐞 defect Bug...Something isn't working workaround A workaround has been provided
Projects
None yet
Milestone
13.0.0
Development

Successfully merging a pull request may close this issue.

Fix #9796: BlockUI center content melloware/primefaces
3 participants
@tandraschko @melloware @crocimi