在展开可折叠时向下滑动内容

时间:2014-02-28 20:49:53

标签: jquery css html5 jquery-mobile collapsable

我有一个可以动态填充的折叠。当我展开可折叠时,它与我的flot图表重叠。enter image description here

有可能在折叠扩展后滑动图表div吗?同样当它再次折叠(向上滑动)时?

这是我目前的设置:

<div id="main" data-role="page">
        <div id="header" data-role="header">
            <h1>Real Time Monitoring</h1>
        </div>

        <div id="parameters" data-role="collapsible" style="position: relative;width: auto; height: 100px;">
            <h3>Parameters</h3>
                <div id="divSensors" class="ui-grid-a">
                    <!-- dynamically generate checkboxes based on available sensors (c#) -->
                </div>
        </div>

        <!-- Div for flot graph -->
        <div id="chart-container" style="position: relative;">
            <!-- <label>LX Accel(g)</label> -->
            <div id="placeholder" style="width: 500px; height: 200px;"></div>
            <label">Time</label>
        </div>


        <!-- Footer -->
        <div id="footer" data-role="footer" data-position="fixed">
            <h3>&copy;&nbsp;Test Test</h3>
        </div>

    </div>

1 个答案:

答案 0 :(得分:1)

只需从可折叠和图表容器中删除position: relative,然后从图表容器中删除height: 100px;