locked
VS2012 Lightswitch HTML Client, layout problems after applying filter. RRS feed

  • Question

  • Hi,

    I have a simple list of items on an edit screen with the following layout.

    

    Group1 contains the text fields I use to filter the data.

    When I first run the app, the layout is perfect, the items scroll between the filter row at the top and the command bar at the bottom, see left example.

    However, if I filter the data (type into the search text field and hit return) and the results will not fit onto the available screen area, the command bar is pushed to the end of the result and therefore off screen. See right example

    Clearing the filter does not resolve the issue, it seems that once the layout 'breaks' that's it.

    I've not upgraded to later version of jQuery (I did try but that had not positive effect).

    I'm using the default template jQuery versions 

    jquery-mobile-1.2.0

    jquery-1.8.2

    msls-1.0.0

    I tried building a very simple client from scratch too, adding a single screen and adding a single filter, I get the same result. Also tried filtering from a popup and removing the filter row (Group1 in the structure image above).

    Knowing virtually nothing about jQuery I'm a little stumped as the LS design seems OK (too me at least) so any help would be greatly appreciated.

    Regards,

    Al.


    Friday, August 30, 2013 2:46 PM

Answers

  • Hi Alan,

    It's actually a feature of jQuery Mobile Fixed Toolbar (you can also see the behavior here, API reference here). When certain elements - text boxes in this case - on the page receive focus, jQuery Mobile will hide the fixed tool bar to give user more screen estate. To bring back the fixed tool bar, you just need to tab / click on other elements.

    In your case I believe the footer will slide down off the screen the moment you click on the search text box. So if you click on a screen area around the text box, the footer should slide up.

    This behavior is useful on small screen devices, but not so much on a large Desktop. That's something we're looking to improve in future.

    Best regards,
    Huy

    Friday, August 30, 2013 4:58 PM

All replies

  • Hi Alan,

    It's actually a feature of jQuery Mobile Fixed Toolbar (you can also see the behavior here, API reference here). When certain elements - text boxes in this case - on the page receive focus, jQuery Mobile will hide the fixed tool bar to give user more screen estate. To bring back the fixed tool bar, you just need to tab / click on other elements.

    In your case I believe the footer will slide down off the screen the moment you click on the search text box. So if you click on a screen area around the text box, the footer should slide up.

    This behavior is useful on small screen devices, but not so much on a large Desktop. That's something we're looking to improve in future.

    Best regards,
    Huy

    Friday, August 30, 2013 4:58 PM
  • Many thanks for the explanation Huy.

    Regards,

    Al.

    Friday, August 30, 2013 5:08 PM