Programmatically resize a panel card

[gregincolumbus]

I have an editor set that drops down in a panel (TTB panel card layout). The panel card as a defined size. This works great for a text field editor

How can I programmatically resize the HEIGHT of that panel card if the editor is a text area field or an editor list?

In the SHOW EDITOR in the editor properties I have tried getting a pointer to the panel object and using the resize option, but I lose the horizontal settings and the panelcard resizes both vertically and horizontally.

I can use the onSize event in the panel card and I am guessing that is what I need to focus on? Just not sure how to pass values to it if a particular editor is used

In looking at the responsive layout rules, I can resize the panel based on screen size, etc, so I know there is a way to do it, but I cant see the javascript invoked with that responsive layout setting....or at least I haven't found a way to do so.

Trying to keep things as minimal as possible and don't want to add additional editor sets and panel cards if I can help it.

Thanks in advance for any assistance you might provide.

[Davidk]

Is it the PanelCard "Layout size" property you want to be variable... depending upon the Editor being displayed? E.g. an Editor showing a KeyPad will need more room than an Editor showing a TextBox.

I think you'll need to get Alpha to have a look at this one. The whole process of Editors is so convoluted... so many bits and pieces involved... that changing one area will destroy another.

Alpha probably has an answer for this.

[gregincolumbus]

Hi David...thank you for taking the time to reply. Here is a quick screencast of what I want it to do

Video

Basically I want the panel card that holds the editor to resize based upon the editor for the field being viewed. Hard to put in words but the video shows what I mean.

I would think this would a common need for those trying to avoid the back and forth panel swaps for a phone when doing CRUD operations. The drop down pc keeps the editor above the soft keyboard on a phone but it needs flexibility to allow the next/previous option to work with changing editors.

[Davidk]

I figured that's what you were after. That height is controlled by the PanelCard Layout size property. That size is picked up by the Editors and used in a "translate3d" transformation. Your size is probably set at 150px. I don't know if there's a proper way to get this done. It seems to me that the PanelCard should resize according to what's coming in... but it looks like Alpha didn't think that far ahead.

Here's a brute force way to do this. I'd still contact Alpha, if I were you, and ask about how to do this properly. If the solution is currently within Alpha... it's nicely buried.

The code below is specific to my UX... so you need to get your Panel names right for this to work.

In the EditorSet Show Javascript event for the TextBox Editor... I have...

{dialog.object}.panelSetActive('PANELCARD_2');
{dialog.object}.editorCancel('EDITORSET_2');

var transProp = $("{dialog.ComponentName}.R1.PANEL.1.BODYINNER").style.transform;
var transArr = transProp.split(",");
var transHeight = transArr[1];

if(transHeight == " 450px"){
	$("{dialog.ComponentName}.R1.PANEL.1.BODYINNER").style.transform = "translate3d(0px, 150px, 0px)";
	$("{dialog.ComponentName}.R1.PANEL.1.PANEL.0").style.transform = "translate3d(0px, -150px, 0px)";
	$("{dialog.ComponentName}.R1.PANEL.1.PANEL.0.BODY").style.height = "150px";
}

All my code is the code after the setActivePanel method... which was already in place.
This code closes a potentially open EditorSet_2 (my EditorSet for a NumberPad). The code then gets the Transform settings for the Panel. I need to reset the Panel back to 150px if it has been increased by some other EditorSet.

Here the code for my second EditorSet (my Editor for a NumberPad). The NumberPad must be set to a height of 450px in order to for the full NumberPad to show.

{dialog.object}.panelSetActive('PANELCARD_2');
{dialog.object}.editorCancel('EDITORSET_1');
setTimeout(function(){
	$("{dialog.ComponentName}.R1.PANEL.1.BODYINNER").style.transform = "translate3d(0px, 450px, 0px)";
	$("{dialog.ComponentName}.R1.PANEL.1.PANEL.0").style.transform = "translate3d(0px, -450px, 0px)";
	$("{dialog.ComponentName}.R1.PANEL.1.PANEL.0.BODY").style.height = "450px";
},50);

Here I am cancelling a potentially open EditorSet_1, and then resizing the Panel to accomodate the Number Pad. I put it within a slight setTimeout Delay so that it's not just "popping" into view.

Here's a video of what all this looks like... http://youtu.be/y_QMBTJYQmQ?hd=1

[gregincolumbus]

Hi David,

Thanks so much for the assistance…... I was definitely looking in the wrong spot on how to solve this.

I just watched the video and this is exactly what I am looking for…..I will dig into the code so that I have an understanding of how it works. Will also reach out to Alpha…seems like this would be a common need for those developing for phones and trying to minimize the weight of the UX for CRUD operations.

I appreciate your willingness to help!

Greg