AppGini Community Forums

Posted: **2020-03-20 10:30**

Hello,
I am trying to use dv.compact function like the step-by-step ewample.
My trouble is : we have no label when we clicked on the "show" button. The buttons are greater, but without label.
And I have changed nothing like the step-by-step example.

Code: Select all

// create an instance of AppGiniDetailView class
var dv = new AppGiniDetailView();
ï»¿
// create a variable "container" for easier handling of new action buttons
var container = dv.ActionButtons();
ï»¿
// create a group named "Options"
var group = container.addGroup("Options");
ï»¿
// add two buttons for toggling the compact-mode with no text but icons "minus"/"plus"
group.addButton("Hide", function () { dv.compact(); }, null, "minus");
group.addButton("Show", function () { dv.compact(false); }, null, "plus");
ï»¿
// execute the compact function to get smaller buttons and wider children-tabs.
dv.compact();

What I have missed ?

Posted: **2020-03-20 10:52**

Hi,

the example you have mentioned is for demonstration purposes, only. On first call of compact() method, the buttons' texts will be removed and set as tool tip text (on mouse hover). The texts will only be visible on small devices afterwards.

Just asking:
Do you need to toggle the widths of the buttons in a real world scenario? Or is it just for testing?

If you really need this, you can add the following line of code after dv.compact(false):

Code: Select all

    $j(".appginihelper-compact-button > .visible-xs").removeClass("visible-xs");

Your code for the additional Show-button should look like this now:

Code: Select all

group.addButton("Show", function () {
    dv.compact(false);
    $j(".appginihelper-compact-button > .visible-xs").removeClass("visible-xs");
}, null, "plus");

Result

: NGsFbMJH2e.gif (50.47 KiB) Viewed 5121 times

Hope it works for you. Please give me some feedback.

I am going to find a built-in solution for next version (probably after upcoming April 2020 version).

Best,
Jan

Posted: **2020-03-22 10:39**

Thank you, it works fine now.
It is for a demo.
The best use is for responsive display.

Posted: **2020-04-29 07:00**

Hi Jan,

I just came looking for exactly this use-case and was happy to find the solution here.

Real-world use is:
1) where I'm going to have some interns working on database entry work and it will be useful (at least for first few days) and
2) for responsive display as mentioned by Chris for end-user display - I'm planning on using one of the buttons to feed a concatenated result from the detail record being viewed to the Global Search facility and seeing the full name will be useful to the public viewers on first use of the interface.

Work is for a Canadian Charity and the result I'm getting with AppGini and Your plugin simply would not have been in the world of possibilities given our limited resources without your plugin product - Thank You.

Posted: **2020-12-18 14:26**

You are welcome! I hope you are making good progress with your charity project! Take care!

AppGini Community Forums

no label when expand with dv.compact(); with the step-by-step example

no label when expand with dv.compact(); with the step-by-step example

Re: no label when expand with dv.compact(); with the step-by-step example

[SOLVED] no label when expand with dv.compact(); with the step-by-step example

Re: no label when expand with dv.compact(); with the step-by-step example

Re: no label when expand with dv.compact(); with the step-by-step example