Add option to shrink content

[keving119]

Hi,

Nice work on the widget, it is really useful! In our case, we use it as extra sidebar, as the scrollcontainer only allows one zone that shrinks content. To achieve this, we have a custom javascript action, which increases the margin of the scrollbar-region and removes the popup-underlay and mx-underlay (to be able to still use the main content in the scrollcontainer) It would be great if this was directly supported through your widget, instead of having to delete some elements.

Let me know if my request is clear this way!

[iamrob-nl]

Hi keving119,

Thank you for the feedback.

When using the ConvertPopupToOverlay widget inside a (non modal) popup, the mx-underlay should already be out of the picture.

The popup-underlay is generated by the widget and I can include a future option to not have this one present. This layer does however provide the click outside the overlay to close it. If you want to keep that functionality but just visually want to hide the underlay, there is a color option. You can set this to "transparent". [image: image.png] Would this work for you?

Kind regards,

Op wo 7 aug 2024 om 18:32 schreef keving119 @.***>:

Hi,

Nice work on the widget, it is really useful! In our case, we use it as extra sidebar, as the scrollcontainer only allows one zone that shrinks content. To achieve this, we have a custom javascript action, which increases the margin of the scrollbar-region and removes the popup-underlay and mx-underlay (to be able to still use the main content in the scrollcontainer) It would be great if this was directly supported through your widget, instead of having to delete some elements.

Let me know if my request is clear this way!

— Reply to this email directly, view it on GitHub https://github.com/IncentroBA/ConvertPopupToOverlay/issues/1, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB5BGO3FFVONBFR7OGRI37LZQJD3NAVCNFSM6AAAAABMEYTK2KVHI2DSMVQWIX3LMV43ASLTON2WKOZSGQ2TGOBYHA3DMMQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>

--

Rob Duits managing consultant Business acceleration

t: +31307670180 m: +31611396511 w: www.incentro.com

Van Deventerlaan 20, ground floor | 3528 AE | Utrecht

This email (including attachments) is confidential and solely intended for the addressee. If you have received this email by mistake, please notify the sender and delete the email. It is prohibited to publish, reproduce or distribute this email without prior consent of the sender.

[keving119]

Hi,

Thanks for your reply. I now use a non-modal pop-up and indeed do not have to remove the mx-underlay anymore.

To be complete, my request actually consists of two parts:

• Make it possible to shrink the main content, which I do by increasing the margin of the scrollbar-region with the same amount as the overlay width
• Make it configurable if you want to close the overlay when clicking outside the overlay (also read this request in a review on the marketplace). I do already set the underlay to transparent, but want to achieve that the overlay is not closed whenever I click somewhere else.

[iamrob-nl]

Hi keving119,

Can you clarify the 1st part a bit more? I am not sure what you mean. Why shrink the content?

For the second part, not closing the overlay when clicking on the underlay if the action is set to none, I can make this available in a next update.

Kind regards,

Op ma 12 aug 2024 om 17:25 schreef keving119 @.***>:

Hi,

Thanks for your reply. I now use a non-modal pop-up and indeed do not have to remove the mx-underlay anymore.

To be complete, my request actually consists of two parts:

• Make it possible to shrink the main content, which I do by increasing the margin of the scrollbar-region with the same amount as the overlay width
• Make it configurable if you want to close the overlay when clicking outside the overlay (also read this request in a review on the marketplace). I do already set the underlay to transparent, but want to achieve that the overlay is not closed whenever I click somewhere else.

— Reply to this email directly, view it on GitHub https://github.com/IncentroBA/ConvertPopupToOverlay/issues/1#issuecomment-2284277027, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB5BGO3HRS5YDMOT3AIF5VTZRDHUZAVCNFSM6AAAAABMEYTK2KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOBUGI3TOMBSG4 . You are receiving this because you commented.Message ID: @.***>

--

Rob Duits managing consultant Business acceleration

t: +31307670180 m: +31611396511 w: www.incentro.com

Van Deventerlaan 20, ground floor | 3528 AE | Utrecht

This email (including attachments) is confidential and solely intended for the addressee. If you have received this email by mistake, please notify the sender and delete the email. It is prohibited to publish, reproduce or distribute this email without prior consent of the sender.

[keving119]

Hi,

My goal is to move the content aside, similar to the action of the default Mx sidebar navigation. For reference, you can view an example at W3Schools: https://www.w3schools.com/howto/howto_js_sidenav.asp I would like to achieve the same result as button 3/4; the sidenav push. With the 2nd part, we can achieve the difference between button 3 and 4. Hope this clarifies it a bit.

Regards,

[iamrob-nl]

Hi,

Thanks for the extra info. I get the point now. The widget has not been built with that usage in mind. I will need some time to look into this scenario and how to also support this.

Kind regards,

Op wo 14 aug 2024 om 11:25 schreef keving119 @.***>:

Hi,

My goal is to move the content aside, similar to the action of the default Mx sidebar navigation. For reference, you can view an example at W3Schools: https://www.w3schools.com/howto/howto_js_sidenav.asp I would like to achieve the same result as button 3/4; the sidenav push. With the 2nd part, we can achieve the difference between button 3 and 4. Hope this clarifies it a bit.

Regards,

— Reply to this email directly, view it on GitHub https://github.com/IncentroBA/ConvertPopupToOverlay/issues/1#issuecomment-2288275538, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB5BGO4FTHHRIPMDANYWZKDZRMO7RAVCNFSM6AAAAABMEYTK2KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOBYGI3TKNJTHA . You are receiving this because you commented.Message ID: @.***>

--

Rob Duits managing consultant Business acceleration

t: +31307670180 m: +31611396511 w: www.incentro.com

Van Deventerlaan 20, ground floor | 3528 AE | Utrecht

This email (including attachments) is confidential and solely intended for the addressee. If you have received this email by mistake, please notify the sender and delete the email. It is prohibited to publish, reproduce or distribute this email without prior consent of the sender.

[keving119]

Thanks for looking into it. Like I said, it is actually quite easy to achieve, as you only have to increase the margin of the content you want to push aside. Right now, we have a JS action that is executed before opening the overlay with: document.getElementsByClassName("mx-scrollcontainer-middle")[0].style.marginRight = "600px"; (perhaps not the most stable JS, but you get the point) I understand that the widget was not built for this initially, but I think it would be a nice feature

[iamrob-nl]

Hi,

I have modified the widget and have a temp file in Google Drive for you to test.

Under "Advanced" I have added a new option to have the overlay push the content aside instead.

[image: image.png]

Here it is: https://drive.google.com/file/d/1RGx9fan631Wo-sC4WAZtobYXx4zsdzbv/view?usp=drive_link

If this meets your needs I can upload this to the marketplace soon after.

This includes a fix for the combo box widget to edit the left via CSS variable --combobox-left. As default the left will be 16px.

Kind regards,

Op wo 14 aug 2024 om 14:50 schreef keving119 @.***>:

Thanks for looking into it. Like I said, it is actually quite easy to achieve, as you only have to increase the margin of the content you want to push aside. Right now, we have a JS action that is executed before opening the overlay with: document.getElementsByClassName("mx-scrollcontainer-middle")[0].style.marginRight = "600px"; (perhaps not the most stable JS, but you get the point) I understand that the widget was not built for this initially, but I think it would be a nice feature

— Reply to this email directly, view it on GitHub https://github.com/IncentroBA/ConvertPopupToOverlay/issues/1#issuecomment-2288655817, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB5BGO446OSX4BRTWHIV26DZRNHCZAVCNFSM6AAAAABMEYTK2KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOBYGY2TKOBRG4 . You are receiving this because you commented.Message ID: @.***>

--

Rob Duits managing consultant Business acceleration

t: +31307670180 m: +31611396511 w: www.incentro.com

Van Deventerlaan 20, ground floor | 3528 AE | Utrecht

This email (including attachments) is confidential and solely intended for the addressee. If you have received this email by mistake, please notify the sender and delete the email. It is prohibited to publish, reproduce or distribute this email without prior consent of the sender.

[keving119]

Hi,

Thanks for uploading the widget for testing! I did not have time yet to test it thoroughly, but did notice a few things already:

• When I choose the push content aside mode, it really pushes my left content of the screen. Although this could be one of the options, the sidenav push in the W3 example scales the remaining content on the page. It is very similar to the shrink content option of the scrollbar (see atlas_sidebar). I would love to have the option to shrink the content instead of pushing it (which is also what my code should do)
• When closing the overlay, all the content is still pushed aside. Not sure if i configured something wrong here Thanks in advance!

[iamrob-nl]

Hi,

Thanks for the feedback. I will look into it. Because of free days here and there I move and react a bit slower.

Kind regards,

Op vr 16 aug 2024 om 16:56 schreef keving119 @.***>:

Hi,

Thanks for uploading the widget for testing! I did not have time yet to test it thoroughly, but did notice a few things already:

• When I choose the push content aside mode, it really pushes my left content of the screen. Although this could be one of the options, the sidenav push in the W3 example scales the remaining content on the page. It is very similar to the shrink content option of the scrollbar (see atlas_sidebar). I would love to have the option to shrink the content instead of pushing it (which is also what my code should do)
• When closing the overlay, all the content is still pushed aside. Not sure if i configured something wrong here Thanks in advance!

— Reply to this email directly, view it on GitHub https://github.com/IncentroBA/ConvertPopupToOverlay/issues/1#issuecomment-2293664050, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB5BGO2Z36O6B6YT5PUYS3TZRYHJBAVCNFSM6AAAAABMEYTK2KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOJTGY3DIMBVGA . You are receiving this because you commented.Message ID: @.***>

--

Rob Duits managing consultant Business acceleration

t: +31307670180 m: +31611396511 w: www.incentro.com

Van Deventerlaan 20, ground floor | 3528 AE | Utrecht

This email (including attachments) is confidential and solely intended for the addressee. If you have received this email by mistake, please notify the sender and delete the email. It is prohibited to publish, reproduce or distribute this email without prior consent of the sender.

[keving119]

Hi,

No worries, thanks for the quick responses so far!

[iamrob-nl]

Hi,

I have an update for the widget in Google Drive again. Still a work in progress.

I noticed that sliding the content with document.querySelector(“.mx-scrollcontainer-middle") will be more risky when the layout of the page is different.

For now it is set to the mx-page again. I'll need to think of something that will work with any layout.

(Or perhaps you could make do with a variant of the widget that differs from what will go to the marketplace).

Kind regards,

Op wo 14 aug 2024 om 14:50 schreef keving119 @.***>:

Thanks for looking into it. Like I said, it is actually quite easy to achieve, as you only have to increase the margin of the content you want to push aside. Right now, we have a JS action that is executed before opening the overlay with: document.getElementsByClassName("mx-scrollcontainer-middle")[0].style.marginRight = "600px"; (perhaps not the most stable JS, but you get the point) I understand that the widget was not built for this initially, but I think it would be a nice feature

— Reply to this email directly, view it on GitHub https://github.com/IncentroBA/ConvertPopupToOverlay/issues/1#issuecomment-2288655817, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB5BGO446OSX4BRTWHIV26DZRNHCZAVCNFSM6AAAAABMEYTK2KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOBYGY2TKOBRG4 . You are receiving this because you commented.Message ID: @.***>

--

Rob Duits managing consultant Business acceleration

t: +31307670180 m: +31611396511 w: www.incentro.com

Van Deventerlaan 20, ground floor | 3528 AE | Utrecht

This email (including attachments) is confidential and solely intended for the addressee. If you have received this email by mistake, please notify the sender and delete the email. It is prohibited to publish, reproduce or distribute this email without prior consent of the sender.

[keving119]

Hi Rob,

Thanks for the effort so far. I just tested the latest release in the marketplace, but noticed that there are still a few issues:

• When closing the overlay, all the content is still pushed aside, so the styling change is not reverted. Not sure if i configured something wrong here
• The content is pushed aside, instead of shrinked. This could be done by setting the Margin instead of TransformX
• I think having the underlay could be a separate decision. In our case, we would indeed like to close the sidebar when we click outside the sidebar just like the normal overlay.

Let me know if anything is unclear!

[iamrob-nl]

Hi Keving,

Can I look into your situation with a (test)project maybe? When closing the overlay, all styling should be heading back to normal.

Transitions should not be made on the margin and instead on transform / opacity. All else are taxing for the browser. I can create a special version of the widget to customize it for your needs, but I wouldn't recommend this in the main widget.

I can schedule to update the widget to separate underlay options and the push aside.

Kind regards,

Op ma 9 sep 2024 om 10:15 schreef keving119 @.***>:

Hi Rob,

Thanks for the effort so far. I just tested the latest release in the marketplace, but noticed that there are still a few issues:

• When closing the overlay, all the content is still pushed aside, so the styling change is not reverted. Not sure if i configured something wrong here
• The content is pushed aside, instead of shrinked. This could be done by setting the Margin instead of TransformX
• I think having the underlay could be a separate decision. In our case, we would indeed like to close the sidebar when we click outside the sidebar just like the normal overlay.

Let me know if anything is unclear!

— Reply to this email directly, view it on GitHub https://github.com/IncentroBA/ConvertPopupToOverlay/issues/1#issuecomment-2337434108, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB5BGOYZDXSZCTXISXGWVR3ZVVKLTAVCNFSM6AAAAABMEYTK2KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMZXGQZTIMJQHA . You are receiving this because you commented.Message ID: @.***>

--

Rob Duits managing consultant Business acceleration

t: +31307670180 m: +31611396511 w: www.incentro.com

Van Deventerlaan 20, ground floor | 3528 AE | Utrecht

This email (including attachments) is confidential and solely intended for the addressee. If you have received this email by mistake, please notify the sender and delete the email. It is prohibited to publish, reproduce or distribute this email without prior consent of the sender.