0

I've created a web project in ASP.NET MVC 4 and JQuery Mobile.

I try to use a mobiscroll component to print a scroller for time.

The problem is that the display is weird.

This is my code :

<html>
 <head>
  @Scripts.Render("~/ScriptsJQuery")
  @Styles.Render("~/Content/css")
  @Styles.Render("~/mobiscrollCSS")
  @Scripts.Render("~/mobiscrollScripts")
  @Scripts.Render("~/mobiscrolli18n")

  <script>
     $(function () {
        $('#demo').mobiscroll({ preset: 'time', lang: 'fr',display:'bottom', mode:'scroller', theme : 'android' });

        $('#demo').click(function () { $('#demo').mobiscroll('show'); });

     });
  </script>
  <meta name="viewport" content="width=device-width" />
  <title>Index</title>
 </head>


<body>
  <div data-role="page">
    <div data-role="header">
     <a id="arrow_left_link" data-ajax="false" href="@Url.Content("/MyRecipes")">
        <img id="arrow_img" src="~/Content/images/arrow_left.jpg" />
     </a>
     <label>Ajouter ma recette</label>
  </div>
  <div data-role="content">

    <div class="ui-grid-a">
        <div class="ui-block-a"><div class="ui-bar ui-bar-e">Image</div></div>
        <div class="ui-block-b"><div class="ui-bar ui-bar-e"><input type="file" /></div></div>

        <div class="ui-block-a"><div class="ui-bar ui-bar-e">Titre</div></div>
        <div class="ui-block-b"><div class="ui-bar ui-bar-e"><input type="text" /></div></div>

        <div class="ui-block-a"><div class="ui-bar ui-bar-e">Recette</div></div>
        <div class="ui-block-b"><div class="ui-bar ui-bar-e"><input type="text" /></div></div>

        <div class="ui-block-a"><div class="ui-bar ui-bar-e">Cat&eacute;gorie</div></div>
        <div class="ui-block-b">
            <div class="ui-bar ui-bar-e">
                <select id="select-category" name="select-category">
                    <option value="entree">Entr&eacute;e</option>
                    <option value="plat">Plat</option>
                    <option value="dessert">Dessert</option>
                </select>
            </div>

        </div>

        <div class="ui-block-a"><div class="ui-bar ui-bar-e">Difficult&eacute;</div></div>
        <div class="ui-block-b">
            <div class="ui-bar ui-bar-e">
                <select id="select-difficulty" name="select-difficulty">
                    <option value="easy">Facile</option>
                    <option value="middle">Moyen</option>
                    <option value="difficult">Difficile</option>
                </select>
            </div>

        </div>

        <div class="ui-block-a"><div class="ui-bar ui-bar-e">Cuisson</div></div>
        <div class="ui-block-b">
            <div class="ui-bar ui-bar-e">
                <input type="text" id="demo" name="demo" />
            </div>

        </div>

        <div class="ui-block-a"><div class="ui-bar ui-bar-e">Pr&eacute;paration</div></div>
        <div class="ui-block-b">
            <div class="ui-bar ui-bar-e">
                <input type="text" id="durationPreparation" name="durationPreparation" data-role="datebox" data-options='{"mode": "durationflipbox","overrideDurationOrder":["h","i"],"overrideDurationFormat": "%M"}'/>
            </div>

        </div>
    </div>
    <a id="addIngredientsLink" href="/CheckFridge" data-ajax="false" class="ui-corner-all">Ingr&eacute;dients</a>
    <textarea cols="40" rows="15" name="ingredientListArea" id="ingredientListArea" readonly>
        @if (ViewBag.IngredientList != null)
        {
            @ViewBag.IngredientList
        }
    </textarea>
        <label id="preparationLab" class="ui-corner-all">Pr&eacute;paration</label>
    <textarea cols="40" rows="15" name="textarea-1" id="textarea-1"></textarea>
    <a data-role="button" data-theme="b">Ajouter ma recette</a>
</div>

</div>
</body>
</html>

When I click on the input named "demo", instead of having an display 'bottom', I've all the digits that prints on the left side :

enter image description here

Do you have a solution ?

Thank you

user2274060
  • 896
  • 5
  • 18
  • 35

1 Answers1

0

You don't have to call show in the input click event handler. If you bind mobiscroll to the input the show will be called automatically on click/tap.

Remove $('#demo').click(function () { $('#demo').mobiscroll('show'); });

Levi Kovacs
  • 1,159
  • 8
  • 14