Tabstrip disappears when there is a textarea in form

2 posts, 0 answers
  1. Radoslaw
    Radoslaw avatar
    15 posts
    Member since:
    Sep 2010

    Posted 28 Nov 2013 Link to this post

    I have a views in my Index.htm + layout containing a tabStrip. In one of my views I have a form. When I put <textarea/> in the form my layout with tabStrip disappears  (no errors reported in debug console). If I only changed <textarea/> to< input type=”text”/>, layout appears again. I need textareas in my form – how to manage it ?

    This works:
    < div id="view-detail"
            data-role="view"
            data-layout="detail"
            data-title="View1"
            data-init="app.views.detail.init"
            data-model="app.views.detail.viewModel">

            <form>
                <ul data-role="listview" data-style="inset">
                    <li>
                        <label>
                            <span data-bind="text:nameTxt"></span>
                            <input id="twrNazwa" type="text" style="width: 65%; text-wrap:normal" />
                        </label>
                    </li>
                    <li>
                        <label>
                            <span data-bind="text:jmTxt"></span>
                            <input id="twrJm" type="text" style="width: 65%" />
                        </label>
                    </li>
                    <li>
                        <label>
                            <span data-bind="text:indexTxt"></span>
                            <input id="twrIndex" type="text" style="width: 65%" />
                        </label>
                    </li>
                </ul>
            </form>
        </div>

       
    < !--
    the common layout for all views -->
    < div data-role="layout" data-id="main"
            <div data-role="header">
                <div style="margin-top: 5px" data-role="navbar">
                    <span data-role="view-title"></span>
                </div>
            </div>
            <div data-role="footer">
                <div data-role="tabstrip">
                    <a href="view1" data-icon="organize">Home</a>
                    <a href="view2" data-icon="contacts">View1</a>
                    <a href="view3" data-icon="cart">View2</a>
                    <a href="view4" data-icon="settings">View3</a>
                </div>
            </div>
        </div>

     

    This crushes:

      
    < div id="view-detail"
            data-role="view"
            data-layout="detail"
            data-title="View1"
            data-init="app.views.detail.init"
            data-model="app.views.detail.viewModel">
            <form>
                <ul data-role="listview" data-style="inset">
                    <li>
                        <label>
                            <span data-bind="text:nameTxt"></span>
                            <textarea id="twrNazwa" style="width: 65%; text-wrap:normal" />
                        </label>
                    </li>
                    <li>
                        <label>
                            <span data-bind="text:jmTxt"></span>
                            <input id="twrJm" type="text" style="width: 65%" />
                        </label>
                    </li>
                    <li>
                        <label>
                            <span data-bind="text:indexTxt"></span>
                            <input id="twrIndex" type="text" style="width: 65%" />
                        </label>
                    </li>
                </ul>
            </form>
        </div>

       
    < !--
    the common layout for all views -->
    < div data-role="layout" data-id="main">
            <div data-role="header">
                <div style="margin-top: 5px" data-role="navbar">
                    <span data-role="view-title"></span>
                </div>
            </div>
            <div data-role="footer">
                <div data-role="tabstrip">
                    <a href="view1" data-icon="organize">Home</a>
                    <a href="view2" data-icon="contacts">View1</a>
                    <a href="view3" data-icon="cart">View2</a>
                    <a href="view4" data-icon="settings">View3</a>
                </div>
            </div>
        </div>
  2. Radoslaw
    Radoslaw avatar
    15 posts
    Member since:
    Sep 2010

    Posted 28 Nov 2013 Link to this post

    I’ve found the solution: The problem is that <textarea> is need closing tag: <textarea></textarea>

  3. Kendo UI is VS 2017 Ready
Back to Top