locked
Layout broken after Runtime Update 1 RRS feed

  • Question

  • I want try out a mobile first design approach with LightSwitch, so I did Runtime Update 1 to bring in a more recent version of jQuery Mobile. However, the update always breaks my layout. 

    Here are repeatable steps, and screen shots of what I am seeing:
    New Project... Lightswitch HTML Application (Visual C#)
    Create a New Table Title: Person, Columns: Name, Occupation
    Add Screen: AddEditPerson
    Add Screen: BrowsePeople
      Command Bar, Add... People.addAndEditNew (button)

     Before


    Next, I went to Solution Explorer, File View, right click on Application3.HTMLClient, Manage NuGet Packages, Update Microsoft.LightSwitch.Client.JavaScript.Runtime

    Edit default.htm according to the instructions here:
    http://blogs.msdn.com/b/lightswitch/archive/2013/05/07/announcing-runtime-update-1-supporting-jquerymobile-1-3.aspx
    Use jquery.mobile-1.3.1.min.js instead of 1.3.0, since that is the file that NuGet retrieved.

    After 

    The tool bar is inaccessible because it is 1 pixel high,a nd several other parts of the layout are broken. I tried several browsers with clear caches, and the problem is the same.

    How can I get the upgrade to work properly?


    Friday, June 14, 2013 3:15 PM

Answers

  • Hi Ryan,

    I just tried your exact steps and am not seeing an issue. Did you perhaps forget to update a style sheet? What browser version are you running?

    Default.htm should look like this:

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=10" />
        <meta name="HandheldFriendly" content="true" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <title>Application2</title>
    
        <script type="text/javascript">
            // Work around viewport sizing issue in IE 10 on Windows Phone 8
            if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
                document.writeln("<style>@-ms-viewport { width: auto!important; }</style>");
            }
        </script>
    
        <!-- Change light-theme.css and msls-light.css to dark-theme.css and msls-dark.css respectively to use the 
             dark theme.  Alternatively, you may replace light-theme.css with a custom jQuery Mobile theme. -->
        <link rel="stylesheet" type="text/css" href="Content/light-theme-1.0.1.css" />
        <link rel="stylesheet" type="text/css" href="Content/msls-light-1.0.1.css" />
    
        <link rel="stylesheet" type="text/css" href="Content/jquery.mobile.structure-1.3.1.min.css" />
        <link rel="stylesheet" type="text/css" href="Content/msls-1.0.1.min.css" />
    
        <!-- Default font, header, and icon styles can be overriden in user-customization.css -->
        <link rel="stylesheet" type="text/css" href="Content/user-customization.css"/>
    </head>
    <body>
        <div id="msls-id-app-loading" class="ui-body-a msls-layout-ignore">
            <div class="msls-app-loading-img"></div>
            <span class="ui-icon ui-icon-loading"></span>
            <div class="ui-bottom-load">
                <div>Application2</div>
            </div>
        </div>
    
        <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
        <script type="text/javascript" src="Scripts/winjs-1.0.min.js"></script>
        <script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="Scripts/jquery.mobile-1.3.1.min.js"></script>
        <script type="text/javascript" src="Scripts/datajs-1.1.0.min.js"></script>
        <script type="text/javascript" src="Scripts/Generated/resources.js"></script>
        <script type="text/javascript" src="Scripts/msls-1.0.1.min.js"></script>
        <script type="text/javascript" src="Scripts/Generated/generatedAssets.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                msls._run()
                .then(null, function failure(error) {
                    alert(error);
                });
            });
        </script>
    </body>
    </html>
    


    Senior Program Manager, Visual Studio Community http://www.bethmassi.com http://msdn.com/lightswitch http://dev.office.com

    Friday, June 14, 2013 4:32 PM