Alerts don't align to center on window resize

[wpmonks]

Hi,

The alerts don't align to center when window is resized. Is there any fix that I can apply to make this happen

[thecodeholic]

Thank you for submitting issue.

This will be solution for the moment, but in next update I will add this feature.

Lobibox.confirm({
    msg: "Are you sure you want to delete this user?",
    shown: function(lobibox){
        setTimeout(function(){
            lobibox.$el.css('left', '50%').css('margin-left', '-'+(lobibox.$el.width()/2)+'px');
        }, 30);
    }
});

[wpmonks]

This works fine.

Also, is there a way to give width in % so that the alert is responsive. When the screen is resized the alert aligns to center but if the screen is resized to the width smaller than alert, then the alert doesn't resize itself to fit in window.

It should automatically resize itself and increase it height to fit the content.

Is it possible to achieve this.

Thank you so much for awesome support.

[thecodeholic]

Hi,

Actually its responsive. It does not change on resize, but if you resize
screen to very small size and then open messagebox you will see the result.

If you still need that its width to be changed on resize, let me know.
On Feb 20, 2016 12:21 PM, "wpmonks" notifications@github.com wrote:

This works fine.

Also, is there a way to give width in % so that the alert is responsive.
When the screen is resized the alert aligns to center but if the screen is
resized to the width smaller than alert, then the alert doesn't resize
itself to fit in window.

It should automatically resize itself and increase it height to fit the
content.

Is it possible to achieve this.

Thank you so much for awesome support.

—
Reply to this email directly or view it on GitHub
https://github.com/arboshiki/lobibox/issues/12#issuecomment-186542022.

[wpmonks]

Hi,

Yes, I need the width to be changed on resize.
Let me know how this can be done.

[thecodeholic]

There are two approaches.

1. You can resize messagebox size proportional to window size. In this case on messagebox shown event you can calculate how many percent is messagebox width according to window width and you can change messagebox width from px to %. Like this lobibox.$el.css('left', '50%').css('margin-left', '-'+(lobibox.$el.width()/2)+'px');.
2. You need to listen two window resize and compare window width and messagebox width and whenever the messagebox width < window width you can call setWidth method on messagebox and change its size.

[thecodeholic]

to @wpmonks

I have pushed latest commit on github. When window is resized messagebox is always in center and also width is decreased if window width is less then messagebox width.

I am going to mark this issue as marked. Please check it if it works.

Thank you