剑道移动模板样式/格式不起作用 [英] Kendo mobile template styling/formatting not working

查看：20 发布时间：2022/1/4 17:10:41 kendo-ui

本文介绍了剑道移动模板样式/格式不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用如下所示的模板，结果是一个视图，其中包含来自模板的所有元素在一行上，即使我使用

来分隔元素.为什么这不能正确显示?似乎无论我做什么样式，它仍然以单行视图结束.

更新罪魁祸首是剑道样式表 - kendo.mobile.all.min.css -

因此，剑道专家面临的新问题是，为什么当输入字段通过模板出现在列表视图中时，剑道对输入字段的处理方式与出现在模板之外时的处理方式不同?

列表视图模板之外的输入字段获取此类

.km-ios .km-list input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not(.k-input):not(.k-button), .km-ios .km-list select:not([multiple]), .km-ios .km-list .k-dropdown-wrap, .km-ios .km-list textarea

这导致没有奇怪的样式规则:) 普通文本字段视图

模板内部的输入字段获取此类

.km-root input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not(.k-input):not(.k-button), .km-root 选择:not([multiple]), .km-root .k-dropdown, .km-root textarea

这导致将这些规则应用于它(使字段位于一个奇怪的位置并松开所有正常的字段，即边框背景等)我不能 100% 确定是哪个包装器导致了这种情况

外观:无；-moz-外观:无；-webkit 外观:无；字体大小:1.1rem；颜色:#385487；最小宽度:6em；边框:0；填充:.4em；大纲:0；背景:透明的;

我的工作是为列表视图模板中的任何文本字段提供 class="k-input" ，这显然将它们从上述 css 中排除 -

<script src="kendo/js/jquery.min.js"></script><script src="kendo/js/kendo.mobile.min.js"></script><link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet"/><!-- eventDetail 视图--------------------------------------------------------------------------------------------------><div data-role="view" id="view-eventDetail" data-show="getEventDetailData" data-title="eventDetail"><header data-role="header"><div data-role="navbar"><span data-role="view-title"></span><a data-align="right" data-role="button" class="nav-button" href="#view-myEvents">返回</a>

</标题><form id="updateEventForm"><div id="updateEvent"><div id="eventDetail"></div><p><input type="button" id="eventUpdateCancelButton" style="width:30%" data-role="button" data-min="true" value="Back"/><input type="submit" id="eventUpdateSaveButton" style="width:30%" data-role="button" data-min="true" value="Save"/></p><div id="eventResult"></div>

</表单>

解决方案

ListView 小部件应该应用于

<div id="eventDetail"></div>

到:

<小时>

还有这段代码:

 $("#eventDetail").kendoMobileListView({数据源:数据源，模板:kendo.template($("#eventDetail-template").html())}).data("kendoMobileListView");

最后的 .data() 调用在这里没有做任何事情，可以删除，也可以只传递文本字符串作为模板.您不需要自己调用 kendo.template().因此，您可以将其更改为:

 $("#eventDetail").kendoMobileListView({数据源:数据源，模板:$("#eventDetail-template").html()});

I am trying to use a template as shown below, the outcome is a view with all elements from the template on one line, even though i am using

to separate the elements. Why does this not display properly? It seems that no matter what styling i do it still ends up a single line view.

UPDATE The culprit is the kendo style sheet - kendo.mobile.all.min.css -

So the new question for a kendo expert is why does kendo handle input fields differently when they appear in a listview via a template than when they appear outside of a template?

An input field outside of a listview template gets this class

.km-ios .km-list input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not(.k-input):not(.k-button), .km-ios .km-list select:not([multiple]), .km-ios .km-list .k-dropdown-wrap, .km-ios .km-list textarea

Which results in no odd styling rules :) Normal text field view

An input field inside of the template gets this class

.km-root input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not(.k-input):not(.k-button), .km-root select:not([multiple]), .km-root .k-dropdown, .km-root textarea

which results in these rules being applied to it (making the field sit in a wierd spot and loose all normal field stlying ie border background etc.) Im not 100% sure which wrapper is causing this

appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
font-size: 1.1rem;
color: #385487;
min-width: 6em;
border: 0;
padding: .4em;
outline: 0;
background: 
transparent;

My work around is to give any text fields inside listview templates the class="k-input" which obviously excludes them from the above css -

<script src="kendo/js/jquery.min.js"></script>
    <script src="kendo/js/kendo.mobile.min.js"></script>



    <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />


<!-- eventDetail view -------------------------------------------------------------------------------------------------->
    <div data-role="view" id="view-eventDetail" data-show="getEventDetailData" data-title="eventDetail">
        <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
                <a data-align="right" data-role="button" class="nav-button" href="#view-myEvents">Back</a>
            </div>
        </header>
        <form id="updateEventForm">
            <div id="updateEvent">
                <div id="eventDetail"></div>
                <p>
                    <input type="button" id="eventUpdateCancelButton" style="width:30%" data-role="button" data-min="true" value="Back" />
                    <input type="submit" id="eventUpdateSaveButton" style="width:30%" data-role="button"  data-min="true" value="Save" />
                </p>
                <div id="eventResult"></div>
            </div>

        </form>

    </div>

    <script id="eventDetail-template" type="text/x-kendo-template">

        <p>
        <input name="event_type" id="event_type" data-min="true" type="text" value="#= type #" />
        </p>
        <p>

        <input name="event_loc" id="event_loc" data-min="true" type="text" value="#= type #" />
        </p>
        <p>

        <input name="event_date_time" id="event_date_time" data-min="true" type="datetime" value="#= stamp #" />
        </p>
        <p>
        Share this
        <input data-role="switch" id="event_share" data-min="true" checked="checked" value="#= share #"/>
        </p>
        <input name="userID" id="userID" type="hidden" value="#= user_id #" />
        <input name="eventID" id="eventID" type="hidden" value="#= event_id #" />

    </script>

    <script>        
        function getEventDetailData(e) {

            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "http://localhost/mpt/website/api/event_details.php",
                        dataType: "jsonp",
                        type: "GET",
                        data: { userID: e.view.params.user_id, eventID: e.view.params.event_id },
                        cache: false
                    },
                    parameterMap: function(options) {
                        return {
                            userID: options.userID,
                            eventID: options.eventID

                        };
                    }
                },
                schema: { // describe the result format
                    data: "results" // the data which the data source will be bound to is in the "results" field
                }
            });           

            console.log(e);

            $("#eventDetail").kendoMobileListView({
                dataSource: dataSource,
                template: kendo.template($("#eventDetail-template").html())

            }).data("kendoMobileListView");

        }           

        //update event          
        function sendUpdateEvent() {

            var siteURI = "http://localhost/mpt/website/api/update_event.php?";

            app.showLoading();

            var user_id = $('#userID').val();
            var event_id = $('#eventID').val();
            var event_type = $('#event_type').val();
            var event_loc = $('#event_loc').val();
            var event_date_time = $('#event_date_time').val();
            var event_share = $('#event_share').val();

            var formVals = 'eventID=' + event_id + '&userID=' + user_id + '&event_type=' + event_type + '&event_loc=' + event_loc + '&event_date_time=' + event_date_time + '&event_share=' + event_share;
            var fullURI = siteURI + formVals;

            $.ajax({
                url: fullURI, dataType: 'json', success: function (data) {
                    $('#eventResult').html(data.results);
                    app.hideLoading();
                    app.navigate("#view-myEvents");

                }
            });
        }

        $('#eventUpdateCancelButton').click(function () {

            app.navigate("#view-myEvents");
        });

        $('#eventUpdateSaveButton').click(function () {

            sendUpdateEvent();
        });

        $('#updateEventForm').submit(function () {

            sendUpdateEvent();

            return false;
        });


    </script>

解决方案

ListView widgets are supposed to be applied to <ul> elements. Try changing:

<div id="eventDetail"></div>

to:

<ul id="eventDetail"></ul>

Also with this bit of code:

        $("#eventDetail").kendoMobileListView({
            dataSource: dataSource,
            template: kendo.template($("#eventDetail-template").html())
        }).data("kendoMobileListView");

The .data() call on the end isn't doing anything here and can be removed, and also you can pass just the text string as the template. You don't need to call kendo.template() yourself. So you can change that to just:

        $("#eventDetail").kendoMobileListView({
            dataSource: dataSource,
            template: $("#eventDetail-template").html()
        });

这篇关于剑道移动模板样式/格式不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

剑道移动模板样式/格式不起作用 [英] Kendo mobile template styling/formatting not working

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

剑道移动模板样式/格式不起作用 [英] Kendo mobile template styling/formatting not working

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭