How to implement Collapse/Expand in LightSwitch 2013?

Question

I'm building a project in LightSwitch 2013 on Visual Studio 2013.

I have 2 dialog screen: 1. view details (dialog screen mode) 2. edit details (dialog screen mode)

view screen navigates to the edit screen and the edit screen returns back to view screen (view --> edit --> view). I'm using the following code to change the dialog screen width and height:

$('div[class~="msls-dialog-frame"]').css('maxWidth', '50%');
$('div[class~="msls-dialog-inner-frame"]').css('maxHeight', '100%');

This code is in the main group post render.

My problem is: When i navigate from the edit screen to the view screen, sometimes the view screen show everything like it supposed to, but sometimes it shows just one button without all the rest of the elements that supposed to be displayed.

This bug occurs only because i'm using the code above.

Anybody have an idea?

Thanks.

Answer 1

Fortunately for you this one is an easy fix.

You need to include the screen element in the jQuery selector.

e.g:

$('div[class~="msls-dialog-frame"]', element).css('maxWidth', '50%');
$('div[class~="msls-dialog-inner-frame"]', element).css('maxHeight', '100%');