Minor bug in mobile client CSS - list scrolls first item off screen when coming back from dialog RRS feed

  • General discussion

  • Description of the issue

    In the LightSwitch HTML Client, the css includes some nice responsive optimizations for mobile clients.  

    However, there's a little quirk that can be observed in desktop browsers (I've seen it in IE 10, the latest Firefox, and the latest Chrome) when the browser window's width is less than 400px. 

    Create a simple browse screen with a list control.  Create an "Add" button on the browse screen and create the necessary AddEditEntity screen.  Set the browse screen's list control Item Tap behavior to edit the selected entity using your AddEditEntity screen.

    Run the application and resize the browser window so that the width is less than 400px... you should see the mobile styling kick in.

    Now note if you click the "Add" button, when you come back from the AddEditEntity dialog, the list box will have scrolled such that the first entity in the list is no longer visible.  The same happens if you tap an item in the list and pop up the AddEditEntity screen that way.

    If the AddEditEntity screen is not set to "Show as Dialog", the behavior doesn't occur.

    Here's a little screencast demonstrating the behavior:


    Proposed workaround

    A quick "binary tree elimination" search of the mobile-related portion of the msls-1.0.0.css or msls-1.0.1.css yields the culprit. Within the @media section of the css, there is this bit:

    body.msls-show-background-screen .msls-background-page.ui-page {
            display: none !important;

    If you comment this out, the problem goes away.  I haven't noticed any significant undesired consequences, but my testing at this point is limited.

    Just thought I'd share in case others had run into the problem.

    My Blog: dotnetlore.com Twitter: @DotNetLore

    Wednesday, June 19, 2013 10:27 PM