I am having a problem with a simplest of forms that uses a list view to contain fields. I have two NumericTextBox fields with format set to 'c0' (currency), one outside of the listview and another inside. I want both to look same like the one outside of the list. What's wrong and how can I fix that? Thanks a lot!
HTML:
<div data-role="view" data-title="Home" data-model="app.home" data-show="app.home.onShow" data-after-show="app.home.afterShow">
<div id="homeModel" class="form-view">
<form>
<div class="form-content-item">
<label>
<span>Income 2</span>
<input id="income2" data-bind="value: homeModel.fields.income" type="number">
</label>
</div>
<ul class="form-content" data-role="listview" data-style="inset">
<li>
<label>
<span>Income</span>
<input id="income" data-bind="value: homeModel.fields.income" type="number">
</label>
</li>
</ul>
<div class="button-group">
<a class="primary" data-role="button" data-bind="events: { click: homeModel.submit }">Results</a>
</div>
</form>
</div>
</div>
Script:
app.home = kendo.observable({
onShow: function () {
$("#income").kendoNumericTextBox({
format: "c0",
});
$("#income2").kendoNumericTextBox({
format: "c0",
});
},
afterShow: function () {}
});
5 Answers, 1 is accepted
Rank 1
Rank 1
This appearance of numeric fields is caused by the date-role="listview" attribute on the ul element. The radio buttons also do not appear correctly, only one of them shows up - they are all on top of each other. What am I doing wrong? It's a new app and a view is created by the view editing tool.
<div data-role="view" data-title="Home" data-model="app.home" data-show="app.home.onShow" data-after-show="app.home.afterShow">
<div id="homeModel" class="form-view">
<form>
<ul class="form-content" data-role="listview" data-style="inset">
<li class="group-separator">
<h4 class="group-separator-header">You</h4>
</li>
<li class="form-content-item">
<label>
<span>Age</span>
<input id="age" data-bind="value: homeModel.fields.age" type="number">
</label>
</li>
<li class="form-content-item">
<label>
<span>Gender</span>
<input data-bind="checked: homeModel.fields.gender" value="Male" type="radio" name="gender">Male</input>
<input data-bind="checked: homeModel.fields.gender" value="Female" type="radio" name="gender">Female</input>
</label>
</li>
<li class="form-content-item">
<label>
<span>Income</span>
<input id="income" data-bind="value: homeModel.fields.income" type="number" >
</label>
</li>
</ul>
<div class="button-group">
<a class="primary" data-role="button" data-bind="events: { click: homeModel.submit }">Results</a>
</div>
</form>
</div>
</div>
Rank 1
More information about my app below. Any help is appreciated!
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link href="kendo/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="kendo/styles/kendo.default.min.css" rel="stylesheet"/>
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet">
<link href="styles/overrides.css" rel="stylesheet">
<link href="styles/main.css" rel="stylesheet">
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.all.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="app.js"></script>
</head>
<body id="kendoUiMobileApp">
<script src="components/home/index.js"></script>
<div data-role="layout" data-id="main">
...
app.js
'use strict';
(function() {
var app = {
data: {}
};
var bootstrap = function() {
$(function() {
app.mobileApp = new kendo.mobile.Application(document.body, {
transition: 'slide',
skin: 'flat',
initial: 'components/home/view.html'
});
kendo.culture("en-US");
});
};
if (window.cordova) {
document.addEventListener('deviceready', function() {
if (navigator && navigator.splashscreen) {
navigator.splashscreen.hide();
}
bootstrap();
}, false);
} else {
bootstrap();
}
app.keepActiveState = function _keepActiveState(item) {
var currentItem = item;
$('#navigation-container li a.active').removeClass('active');
currentItem.addClass('active');
};
window.app = app;
app.isOnline = function() {
if (!navigator || !navigator.connection) {
return true;
} else {
return navigator.connection.type !== 'none';
}
};
}());
In general, Kendo Web widgets are not designed to be placed within Kendo Mobile widgets without the need to re-style them. This is the exact case here, as you will need to override some of the default mobile styles in order to the NumericTextBox widget:
Regards,
Georgi Krustev
Telerik
Rank 1
Georgi,
Thank you for the help. If I need to restyle I will restyle. Got styles for the radios?
It seems one of the biggest challenges of starting with Kendo is to understand what is Kendo UI and what is Kendo UI Mobile.It would be nice if the components were marked as regular or mobile on the page that lists them.
Thanks again,
Sergei