EasyUI Forum

General Category => EasyUI for React => Topic started by: chrwei on June 03, 2020, 01:07:54 PM

Title: Messager position
Post by: chrwei on June 03, 2020, 01:07:54 PM

When using Messager.alert, and probably the other methods too, the position is set the first time it is displayed. Scroll the page and display it again and it may be out of view

Title: Re: Messager position
Post by: jarry on June 04, 2020, 06:53:45 PM

You can set the 'position' style with 'fixed' when open the alert dialog.

Code:

this.messager.alert({
  title: "Alert",
  msg: "Here is a message!",
  style: {
    position: 'fixed'
  }
});

Title: Re: Messager position
Post by: chrwei on June 09, 2020, 10:58:39 AM

that had no effect, at best this would let me specify where it should be placed, right?

it does already calculate placing the dialog in the center of view, even when scrolled down, just that it only does this calculation the first time it's displayed, instead of every time

Title: Re: Messager position
Post by: chrwei on July 07, 2020, 12:09:29 PM

workaround with this, but it does some odd scrolling things if the parent panel's length changes between dialogs. at least the dialog is always visible.

Code:

export class MyMessager extends Messager {
    onOpen() {
        let iv = setInterval(() => {
            if(this.dialog) {
                clearInterval(iv);
                this.dialog.vcenter();
            }
        }, 50);
    }

    render() {
        return (
            <MessagerDialog
                ref={ref => this.dialog = ref}
                onOpen={this.onOpen.bind(this)}
                {...this.props}
                {...this.state}
            />
        )
    }
}