Inline DetailView plugin - UI issue

This sub-forum is for discussing all topics related to AppGini Helper JavaScript Library, provided by bizzworxx as a third-party AppGini plugin.
Post Reply
ppfoong
Veteran Member
Posts: 53
Joined: 2021-07-13 16:46

Inline DetailView plugin - UI issue

Post by ppfoong » 2024-08-04 10:35

When clicking on the field at the left of the table, the Admin Information will show at the left, which has no problem.
left.png
left.png (81.02 KiB) Viewed 406 times
However, when clicking on the field at the right of the table, this Admin Information will show at the right instead. This causes a large portion of the Admin Information being "cut-off", as shown in the screenshot below.
right.png
right.png (91.85 KiB) Viewed 406 times
And I found out that when use together with AdminLTE Pro plug-in, this Admin Information will always showing at the right, and always "cut-off".

Suggestion: to make it always showing at the left, or to adjust its position when showing at the right, in order to avoid this UI issue.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1891
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Inline DetailView plugin - UI issue

Post by jsetzer » 2024-08-04 11:07

If I got it right, this only happens in combination with AdminLTE extension?
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.14 Revision 1665 + all AppGini Helper tools

ppfoong
Veteran Member
Posts: 53
Joined: 2021-07-13 16:46

Re: Inline DetailView plugin - UI issue

Post by ppfoong » 2024-08-04 15:47

Hi jsetzer,

The above screenshots were taken from ORPM downloaded from this link without any modification, other than include the plugin in its plugins folder:
https://bigprof.com/appgini/application ... ty-manager

It is without AdminLTE.

In the 1st screenshot, it appeared on the left, when clicked on Last name or First name, or other fields towards the left-hand-side of the table. This has no issue, since there are ample of screen space to display the popup.

In the 2nd screenshot, it appeared on the right, when clicked on Additional income, or Assets, or other fields towards the right-hand-side of the table. This has the issue, as the popup is displayed near the edge of the right edge of the browser's screen.

However, in my other app installed with AdminLTE, it will always appear on the right, so the UI issue will always happen.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1891
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Inline DetailView plugin - UI issue

Post by jsetzer » 2024-08-07 08:24

OK, can you please send your appginihelper javascript library order number to [email protected] by email and perhaps add version info about AG itself. Thanks.
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.14 Revision 1665 + all AppGini Helper tools

ppfoong
Veteran Member
Posts: 53
Joined: 2021-07-13 16:46

Re: Inline DetailView plugin - UI issue

Post by ppfoong » 2024-08-07 16:50

Ok, done.

Thanks.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1891
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Inline DetailView plugin - UI issue

Post by jsetzer » 2024-08-08 06:24

I've downloaded that example and I was able to reproduce the issue.

In my machine it happens from time to time after saving a record, but randomly. I can not confirm that this is related to the mouse-X-position onClick. After some research I have seen this is a timing-issue due to lazy-loading of that red admin-tools-button.

Here is a quickfix:
  1. Edit plugins/inline-dv/InlineDV.php
  2. In lines 81 to 83 replace this code:

    Code: Select all

    jQuery(document).one("ajaxStop", function(){ 
        jQuery("#admin-tools-menu-button").prependTo("#appginihelper-plugin-inlinedv-buttons").removeClass("pull-right").addClass("pull-left");
    });
    
    ... by that code:

    Code: Select all

    AppGini.once({ condition: function() { return jQuery("#admin-tools-menu-button").length==1; },
        action: function() { jQuery("#admin-tools-menu-button").prependTo("#appginihelper-plugin-inlinedv-buttons").removeClass("pull-right").addClass("pull-left"); } 
    });
    
  3. Save the file and reload your TV, clear cache, if necessary.
That's it. After that, the red Admin-Tools button constantly appears on the left-hand side; at least in my browser.

chrome_fpKd8PApB4.png
chrome_fpKd8PApB4.png (6.3 KiB) Viewed 327 times


I hope this works for you, please report back. I'm sorry for any inconvenience!
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.14 Revision 1665 + all AppGini Helper tools

ppfoong
Veteran Member
Posts: 53
Joined: 2021-07-13 16:46

Re: Inline DetailView plugin - UI issue

Post by ppfoong » 2024-08-08 12:51

Hi jsetzer,

The codes seem able to fix the problem. It even fixes the same TV-DV problem when used with AdminLTE too.

Thanks a lot.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1891
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

SOLVED: Inline DetailView plugin - UI issue

Post by jsetzer » 2024-08-08 13:01

Thanks for your feedback!
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.14 Revision 1665 + all AppGini Helper tools

Post Reply