css - float DOM,固定位置 - Telerik Kendo-Mobile AppBuilder Icenium

标签 css telerik kendo-mobile

我正在使用 Telerik Kendo-Mobile AppBuilder Icenium,构建一个混合 应用程序。我已经检查了关于同一主题的其他帖子,但没有一个有效。我在想可能有一些剑道特有的东西,有人知道如何解决这个问题。在特定 View 上

    <div data-role="view"
     data-title="Rules..."
     data-layout="main"
     data-model="app.workoutTypeRuleInterstatial"
     data-show="app.workoutTypeRuleInterstatial.onShow"
     data-after-show="app.workoutTypeRuleInterstatial.afterShow"
     id="workoutTypeRuleInterstatial_View">

    <ul data-role="listview"
        data-auto-bind="false"
        data-style="inset"
        data-template="workoutTypeRuleInterstatialModelTemplate"
        data-bind="{ source: workoutTypeRuleInterstatialModel.dataSource }"
        data-pull-to-refresh="true"
        data-endless-scroll="false"></ul>

    <script type="text/x-kendo-template" id="workoutTypeRuleInterstatialModelTemplate">
        <div class="image-with-text">
            <table style="width: 100%;">
                <tr>
                    <td style="width:100%;">
                        <a onclick="app.workoutTypeRuleInterstatial.workoutRuleClick('#: TypeId #')">
                            <h4 id="id" class="workoutRule">#: Name #</h4>
                        </a>
                    </td>
                </tr>
            </table>
        </div>
    </script>


    <div id="addButton">
        <img src="images/add.png" class="button" id="addNewWorkoutType" />
    </div>

</div>

和这个CSS

    <style>
    #addButton {
        top: 70%;
        left: 90%;
        width: 2.3em;
        height: 2.3em;
        margin-top: -9em;
        margin-left: 0em;
        border: 0;
        position: fixed;
    }

    .button {
        padding: 0;
        width: 2.3em;
        height: 2.3em;
    }
</style>

不允许元素在滚动列表时保持“固定”位置,它随列表滚动,我希望它像下图一样(它不随列表滚动)

Screenshot

最佳答案

答案是:

<footer data-role="footer">
    <div data-role="tabstrip" id="navigation-container">
        <a href="components/homeView/view.html" data-icon="home">Home View</a>
        <a href="components/settingsView/view.html" data-icon="settings">Settings</a>
        <a href="components/contactsView/view.html" data-icon="contacts">Contacts</a>
    </div>
    <a data-role="button" class="floating" data-icon="compose"></a>
</footer>

<style>
    .km-nova .km-button.floating {
        position: fixed;
        right: 20px;
        bottom: 70px;
        border-color: transparent;
        border-radius: 35px;
        width: 50px;
        height: 50px;
        line-height: 35px;
        background-color: red;
        color: white;
    }

        .km-nova .km-button.floating span {
            font-size: 1.5em;
        }
</style>

关于css - float DOM,固定位置 - Telerik Kendo-Mobile AppBuilder Icenium,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39907946/

相关文章:

javascript - 在特定 View 中禁用抽屉的滑动打开

javascript - onclick 和 href 无法在移动设备上协同工作

javascript - 为什么我在 div 中的移动按钮没有反应?

javascript - 使用 bootstrap 向下填充 div,同时保持相同的长度

javascript - radgrid - 在客户端获取服务器编辑的行

jquery - Kendo UI Map 不渲染任何内容

html - 将具有动态高度的 block 与具有动态高度的外部右下角对齐

javascript - 简单的 DOM 更改,非常奇怪的错误

asp.net - IIS7 上的 "Error loading RadChart Image"

javascript - 多色线