Auto re-size of list control in UX

[Garry Flanigan]

I would like my list control ('list1') to resize based on the current height of the viewport.

I have tried the following in the afterRenderComplete event of 'list1' with no success:

setTimeout(function() {
    var cs = AUI.u.getVPSize();
    cs.height = cs.height - 100;
    var lObj = {dialog.object}.getControl('LIST1');
    lObj.setListSize(cs.height+'px');
},2000);

Has anyone got a list control re-sizing on a UX working?

[Lance Gurd]

Have not used a list for a while, apart from the calendar layout, but if you put your list in a panel card it should auto resize

[Garry Flanigan]

This is a browser application, not mobile. I tried your suggestion but no luck.

[glenschild]

If you place the list control inside a panel card without any objects in that panel card, set the list to "fill" then it will consume all the space inside that panel card. The key being to make sure that your panel card layout and settings match your desired layout.

[Garry Flanigan]

Glen, I tried your suggestion but no luck. Maybe I need to provide more information.
I have a tab control with 3 tabs and there is a list control on each tab. I want the tab to fill the viewport then the list to resize height to suit.

[Pizzadude]

This is in the afterRefreshData event of a list named "Stops". It sets the height based on the number of records in the list. The list has a default size based on 2 records.
If there are more than 2 records, it calculates the size.

You might find that it behaves differently based on what build you are on. I am on 5579.

var lObj = {dialog.Object}.getControl('Stops');

if(lObj._data.length <= 2) {
lObj.setListSize("210px");
}
else if(lObj._data.length > 2) {
var rHeight = $('{dialog.ComponentName}.V.R1.STOPS.CONTROL.0').clientHeight;
var rCnt = lObj._data.length;
var dataHeight = rHeight * rCnt;
var xtraHeight = dataHeight + 25;
var newListHeight = xtraHeight + 'px';
lObj.setListSize(newListHeight);
}


lObj.refresh();

[Garry Flanigan]

Thanks to all for their suggestions and very quick responses.
What worked for what I wanted was in afterRenderComplete:

var lObj = {dialog.Object}.getControl('list3');
var cs = AUI.u.getVPSize(); // this is the viewport size
cs.height = cs.height - 345;
lObj.setListSize(cs.height+'px'); //set height only
lObj.refresh();

I tried it in another slightly different UX and it was not the right solution, so it is not a "one fits all". But the problem I started with is now working as required.

[peteconway]

Good, you should really look at using the panel methods in what you do in the browser, it's much easier, lighter and more efficient. The idea the panel controls are for mobile devices is a misnomer, none of us should presume what device the user is using the browser now or in the future, in let alone design on the basis it's a desktop, you don't need to know with panels, they work on everything.

Just saying - Pete

[Russell Craycraft]

I second the use of Panelcards. Create a panel navigator, add a header to it, put 3 buttons with {dialog.object}.panelSetActive('panel card name',true); pointed to each panelcard, add 3 panelcards with lists set to fill container. I can help with skype or a zoom link if you want. [email protected]

[glenschild]

I know you have a solution but an alternate could be a panel layout (programmatic) with tab band or tab buttons that each call a separate panel card. It is a technique I use a lot!

[Garry Flanigan]

I have followed Russell's advice and instructions and WOW, it looks great. Also, thanks Russell for your kind offer of assistance.


So I 'bit the bullet' and used the same approach on some other UX's and am very pleased with the results. It's much more commercial-looking which is always a big plus. I don't know what the performance gain will be from what Pete says, but I hope the design does turn out to be lighter and more efficient.

[peteconway]

It's lighter in the DOM - as it's in the client side and not years old based with xbasic getting the server involved.. Here is an example of performance..