Navbar full width in a Panel and load Problem?

Navbar full width in a Panel and load Problem?

Hi,

i have tried the new Panel but i have 2 problems with the Navbar and one with the Panel itself.



if you can see in the picture the nav Buttons are not at the top of the Panel and they have not the full width, so how can i do this ?

then i have sometimes a Problem with the Panel. If i open the site above with an iPad and then i klick on the Video Page Button, it loads with jquery ajax a site with a html5 video tag. But sometimes if the video site is loaded the Panel page is white, you can see it on the other picture..



The code for this page is this... i have write this with asp mvc 4 razor.. and should i change the ajax code? are there any better ideas how i can load the other page with ajax !?

  1. <script type="text/javascript">
     

        $(document).ready(function () {
            $("#m_video").click(function () {
                $("#mainp").load("@Url.Action("videoL","Mobile")");
                $('#mypanel').trigger('updatelayout');
             
            });

        });

        $(document).on('swiperight', function (event, ui) {
            $('#mypanel').panel('open');

        });


    </script>


    <div data-role="page">
        <div data-role="panel" id="mypanel" data-position="left" data-display="push" data-dismissible="true" data-theme="a">
        <!-- panel content goes here -->

            <div class="ui-grid-solo">
          <div class="ui-block-a" data-role="navbar" data-iconpos="left">
                        <ul>
                            <li>
                                <a href="#page1" data-transition="fade" data-theme="" data-icon="star">
                                    Home
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
             <div data-role="navbar" data-iconpos="left">
                        <ul>
                            <li>
                                <a href="" data-transition="fade" data-theme="" data-icon="star" data-iconshadow="true" data-shadow="true" id="m_video">
                                   Video Page
                                </a>
                            </li>
                        </ul>
                    </div>
            <a href="" data-rel="close" data-role="button" data-theme="c" data-icon="delete" data-inline="true">Close panel</a>

        </div>

        <div data-role="header">
            <h1>My Title</h1>
                     
            <a title="Home" data-theme="f" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="true" class="ui-btn-left ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-notext ui-focus ui-btn-up-f" href="#mypanel" data-icon="home" data-iconpos="notext" data-direction="reverse"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Home</span><span class="ui-icon ui-icon-home ui-icon-shadow">&nbsp;</span></span></a>
        </div><!-- /header -->

        <div data-role="content" >
           
            <section id="mainp">


            </section>



        </div><!-- /content -->

    <div data-theme="a" data-role="footer" data-position="fixed">
                    <h3>
                        Footer
                    </h3>
                </div>


    </div><!-- /page -->