jQuery Mobile fixed header div overlaps content div

StackOverflow https://stackoverflow.com/questions/23597851

  •  20-07-2023
  •  | 
  •  

题

Am using Jquery Mobile 1.3.1 on Worklight 6. When I use a fixed header and content. The header always seem to overlap the content. Please suggest what I am doing wrong.

<body id="content" style="display: none;">
    <div data-role="page" id="basic">
        <div data-role ="header" data-position="fixed">
            <h3>CORS</h3>
        </div>

    <div data-role="content">
        <form id="basic-information">
            <div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-inset="false">
                <div data-role="collapsible">
                    <h3>Basic Information</h3>
                    <fieldset data-role="controlgroup" data-type="horizontal"
                    data-mini="true">

Screenshot

有帮助吗？

解决方案

Not sure what's up with jQuery Mobile, but it seems to originate from there (tested with jQuery Mobile 1.4.2, happens there as well).

To fix, I have added the following to common\css\main.css:

.ui-page-header-fixed { padding-top: 15px !important; }

BTW,
Your code snippet is cut... (not full).

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top