Dialog not responding in 480 Breakpoint

[VEDRAN]

I think there is a problem with Dialog.
When you preview it in Browser and go to Mobile view 480 breakpoint and below, then refresh the page, the Dialog will not fit the window of mobile screen, but it will be streched too much. Just the window of dialog will be streched too much. The elements inside stays on its places I think.
I had an extesion "Time Circles" in it, and I thought that might be the problem, so I removed it, and still the same.
There are two pages in DEMO project to show that the problem remains.
I tried changing the RWD in Dialogs settings to 480, but it didn't help.
It looks normal in Default and 780 Breakpoint, but in 480 it is to wide.
Most important for me is to work with Time Cycles extension, but I don't know what can you do anyway.
Thanks

DEMO:
https://anonfiles.com/j5i8wcGex2/Dialog_TEST_wbs

[crispy68]

I am unable to download your files. Can you please resave them as a normal zip file?

[Pablo]

I do not see anything wrong with the dialog.
However, I think the breakpoint settings are conflicting with your layout.
In 'Manage breakpoints' select 'Activate breakpojnts when browser window is larger than the device width'.

[VEDRAN]

I do not see anything wrong with the dialog.
However, I think the breakpoint settings are conflicting with your layout.
In 'Manage breakpoints' select 'Activate breakpojnts when browser window is larger than the device width'.

1. What have you been looking? Which breakpoint view? I The problem was in the 480 Breakpoint when in streches too much. In Default Breakpoint it is (the Dialog) OK, and in 768 it is OK too, but in mobile phone wiew which is 480 or less, the Dialog streches too much. It doesnt matter which breakpoint option I select.

2. I dont hink so. I could be wrong. Here is how I see it.
I think I have found another bug in these options of Breakpoints. At least it wasnt like this before.
Lets say I have three breakpoints. Default 970, 768 and 480
If I activate this option: "Activate breakpoints when browser window is larger than the device width", then whenever someone looks at the page with mobile phone which screen widh is smaller then 480, the 768 Breakpoint will be activated and it will NOT fit properly the mobile phone screen. Correct?

But if I activate the option: "Activate breakpoints when browser window is smaller than the device width", then when a user with mobile phone which screen is smaller then 480, will have the smaller version of the page and it should fit the phones screen. Correct?

I am lost here. Totaly.

In your WYSIWYG Web Builder Help file this is stated:
The options "Activate breakpoints when browser window is smaller/larger than the device width", change the way breakpoints behave in the browser.

By default, breakpoints will be triggered if width of the browser window is smaller than the defined device width.
(I want to exclamate this: By default) and I think that the option: "Activate breakpoints when browser window is smaller than the device width" was selected by default before. I not sure of this 100%.

When 'Activate breakpoints when browser window is larger than the device widths' is enabled then breakpoint will be triggered when the width of the browser window is larger than the current breakpoint and smaller than the next breakpoint.

This can be useful if you want to to center the layout if the screen width is wider then the current breakpoint.
END QUOTE.

How much I can remember, I was always selecting before this option: "Activate breakpoints when browser window is smaller than the device width" and if I select this option, then when a user with mobile phone which screen is smaller then 480, will have the smaller version of the page (480) and it should fit the phones screen. And this was ok. Now, I think you have changed it.
Now I have to change all pages brakpoints to: from "Activate breakpoints when browser window is smaller than the device width" to "Activate breakpoints when browser window is larger than the device width".
And also, your WYSIWYG Web Builder Help file states the same, if I understand it correctly.

Please help
Thanks

[VEDRAN]

I am unable to download your files. Can you please resave them as a normal zip file?

https://anonfiles.com/B7Q429G8xf/Dialog_TEST_rar

[Pablo]

The reason why the dialog is too wide, is because the 768 breakpoint is displayed (until the viewport is smaller than 480)
The dialog is 576 pixels so it will not fit inside a 480 viewport.

This is not a bug, it's logical behavior based on your settings.

The difference between the two modes is explained here
https://www.wysiwygwebbuilder.com/forum ... hp?t=63817
(When do I use 'Activate breakpoints when browser window is larger than the device width'?)

[VEDRAN]

The reason why the dialog is too wide, is because the 768 breakpoint is displayed (until the viewport is smaller than 480)
The dialog is 576 pixels so it will not fit inside a 480 viewport.

This is not a bug, it's logical behavior based on your settings.

The difference between the two modes is explained here
https://www.wysiwygwebbuilder.com/forum ... hp?t=63817
(When do I use 'Activate breakpoints when browser window is larger than the device width'?)

OK. Now in the 480 breakpoint, the Dialog is 253 pixels wide. Way below 480. Atleast, thats what it says in the Properties tab in WYSWYG if I am reading it where I am suppose to.
In the Default it is 607, and in 768 it is 383.
Please preview it, then switch to mobile view to something closer to 480, then refresh the page. Thats how I do it atleast to get the error or my bad settings again.
It shows for a second 253 width, and then automaticly changes to 597 width in the Elements Tab in Google chrome.

DEMO:
https://anonfiles.com/D0R578Gbxf/Dialog_TEST_rar

[Pablo]

The file you have shared is encrypted, so I cannot open it.

Did you change the option to 'Activate breakpoints when browser window is larger than the device width'?

[VEDRAN]

The file you have shared is encrypted, so I cannot open it.

Did you change the option to 'Activate breakpoints when browser window is larger than the device width'?

I did yes.
I will upload it as wbs file now.

https://anonfiles.com/beb280G3xa/Dialog_TEST_wbs

[Pablo]

It looks like this is an issue of jQuery Ui, if you switch to Bootstrap then it seems to work correct.

[VEDRAN]

It looks like this is an issue of jQuery Ui, if you switch to Bootstrap then it seems to work correct.

It does work with Bootstrap yes, but then I couldn't get the Time Circles extension to work in that mode inside Dialog.
Thats why I wanted it in this jQuery.

Is there any way to make this Time Circles extension to work with Bootstrap in Dialog?

Or what now about this issue with jQuary? We can't do anything about that. Wright?

[Pablo]

It turns out that it's a timing issue with the 'show' animation of the dialog. The breakpoint sets the correct width but it's later overruled by the animation, because it finishes later.
I have implemented a workaround for this in the latest build (2/8/2022)

Unfortunately, the TimeCircles script cannot be used with Bootstrap.