locked
LightSwitch 2013 - Adding Panel with JQuery-Mobile-1.3.0 RRS feed

  • Question

  • Hey,

    I'v added a panel to my LightSwitch 2013 HTML Application.

    There is a bug (that happens just because there is a panel) that i didn't manage to fix it:

    Lightswitch gives the body of the screen default height that is almost half of the screen. When i'm changing the browser's size, the height of the body is changed and it gets bigger and bigger and then i can scroll (a lot) to the bottom of the page which is empty.

    For Example:

    At first, the body of the screen is 400+ px and after i change the browser's size the height is 9000+ px!

    I have to say that this bug occurs only when i'm adding a panel to my screens.

    Any idea?

    Thanks.

    Monday, February 8, 2016 7:12 AM

All replies

  • Hi Yaron,

    By using LightSwitch, you can create HTML client screens that are optimized for display on mobile devices. From your description above, it's not recommended to set fixed size for screen.

    hope it helps.

    Regards.

    Angie


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, February 10, 2016 8:15 AM
  • Hey Angie xu,

    Thanks for your answer.

    Just to be clear, i am not using fixed size. The sizes that i'v mentioned are the sizes that LightSwitch gives to the body (and it's children)...

    My problem is that it seems that LightSwitch doesn't give the height correctly (At first, it gives the body height that is small, and after changing window's size it gives the body much grater height).

    If you will try to add panel to the screen we will see what i'm talking about.

    Thanks.

    Wednesday, February 10, 2016 8:33 AM
  • Hi Yaron,

    LightSwitch HTML is good for more than small mobile form factors, but not without a little work.

    We use simple implementations of panels and expanders similar to our blog article:

    Expanders in LightSwitch HTML

    Will something like that work for you?

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    Wednesday, February 10, 2016 9:02 AM
  • Hey Dave,

    Thanks for your answer.

    For adding a panel i'm using jquery-mobile.

    When I'm adding a panel to the screen i need to add it like this (via jquerymobile.com):

    <div data-role="page">
    
    <div data-role="panel" id="mypanel">
        <!-- panel content goes here -->
    </div><!-- /panel -->
    
    <!-- header -->
    <!-- content -->
    <!-- footer -->
    
    </div><!-- page -->

    So when i'm adding the panel to the screen, i'm adding it like this:

    inside the Tab-PostRender:

    var $panel = $('<div></div>');

    // Adds the relevant attributes.
    $panel.attr("data-role", "panel");
    $panel.attr("id", "mypanel");
    $panel.attr("data-position", "right");
    $panel.attr("data-display", "push");

    $("body").find("div[data-role='page']").append($panel);

    Is there an other way for adding panel to the screen?

    Thanks.

    Wednesday, February 10, 2016 9:57 AM
  • $("body").find("div[data-role='page']").append($panel);

    Is there an other way for adding panel to the screen?

    Hi Yaron,

    I often use this way to add DIV to panel in Jquery, there are many discussions about this topic online.

    Regards,

    Angie



    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Friday, February 26, 2016 6:58 AM
  • Hi Yaron,

    Regarding other ways to append, I've done it like this:

    Say you have two rows inside a tab(the top one with the panel content, the bottom one with the body). On the top row post render:

    $(element).closest("[data-role='page']").prepend(element);
    $(element).closest("[data-role='page']").addClass('ui-responsive-panel');
    $(element).wrap("<div data-role='panel' id='mypanel' data-display='push' data-dismissible='false'></div>");

    Btw, you can then toggle/open the panel with

    $("#mypanel").panel("toggle");

    I'm not sure how the behaviour is if applyed to the tabs insteads.

    I hope it helps something :)

    Friday, February 26, 2016 8:47 PM