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>
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>