We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. jQuery
  4. fixed element

fixed element

Hi,
I would like to add a fixed div between the header and the list view ?
How can I do it correctly ?

I want my layout will look like :
Heade
Fixed Div
Content


Code :

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="description" content="syncfusion" />
    <meta name="author" content="syncfusion" />
    <title>Essential Studio for JavaScript Mobile - Listview - Template</title>
    <link rel="stylesheet" rel='nofollow' href="13.2.0.29/external/bootstrap.css" />
    <link rel="stylesheet" rel='nofollow' href="http://cdn.syncfusion.com/13.2.0.29/js/mobile/ej.mobile.all.min.css" />
    <link rel="stylesheet" rel='nofollow' href="13.2.0.29/themes/mobile/samplebrowser.css" />
    <link rel="stylesheet" rel='nofollow' href="13.2.0.29/themes/mobile/samplestyle.css" />
    <script type="text/javascript" src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
    <script type="text/javascript" src="http://cdn.syncfusion.com/13.2.0.29/js/mobile/ej.mobile.all.min.js"></script>
</head>
<body>
    <div id="scrollpanel" data-role="ejmscrollpanel">
        <div id="header" data-role="ejmheader" data-ej-title="Syncfusion" data-ej-showleftbutton="true" data-ej-leftbuttoncaption="Back" data-ej-showrightbutton="true" data-ej-rightbuttoncaption="Next"></div>
       <div style="height:30px;position:absolute">aaa</div>
        <div data-role="ejmlistview" style="height:200px" id="pulltorefresh" data-ej-datasource="window.datasource"
             data-ej-fieldsettings="window.dbitem" data-ej-enablepulltorefresh="true" data-ej-appendonrefresh="true" data-ej-headertitle="Pull to refresh" data-ej-query="ej.Query().from('Orders').select('ShipCity').take(500)"
             data-ej-enablenativescrolling="false" data-ej-refreshthreshold="200">
        </div>
    </div>
    <script type="text/javascript">
        window.datasource = ej.DataManager({
            url: "http://mvc.syncfusion.com/Services/Northwnd.svc/"
        });

        window.dbitem = { "text": "ShipCity" };
    </script>
</body>
</html>

thx
Sagi

http://jsplayground.syncfusion.com/m4a0yfw1

1 Reply
DR Dhinesh Ravi Syncfusion Team January 12, 2016 10:30 AM UTC

Hi Sagi,

Thank you for contacting Syncfusion Support.

On analyzing your code example, we figured out that you have handled the scrollpanel control wrongly. Usually ScrollPanel control renders within the div element of target element. Refer to the following link for online documentation of ScrollPanel.

http://help.syncfusion.com/mobilejs/scrollpanel/getting-started

You have used the ScrollPanel control element as the parent element for whole page and also position absolute is not necessary for the inner custom div. Refer to the following code example which you have provided.

[Html]

  <div id="Div1" data-role="ejmscrollpanel">

        <div id="Div2" data-role="ejmheader" data-ej-title="Syncfusion" data-ej-showleftbutton="true" data-ej-leftbuttoncaption="Back" data-ej-showrightbutton="true" data-ej-rightbuttoncaption="Next"></div>

        <div style="height: 30px; position: absolute">aaa</div>

        <div data-role="ejmlistview" style="height: 200px" id="Div3" data-ej-datasource="window.datasource"

            data-ej-fieldsettings="window.dbitem" data-ej-enablepulltorefresh="true" data-ej-appendonrefresh="true" data-ej-headertitle="Pull to refresh" data-ej-query="ej.Query().from('Orders').select('ShipCity').take(500)"

            data-ej-enablenativescrolling="false" data-ej-refreshthreshold="200">

        </div>
    </div>


Instead we need to use target property for ScrollPanel, and within the target element, other elements needs to be rendered other than the header, since header is fixed. Refer to the following code example for simple layout of ScrollPanel.

[Html]

   <!--Scroll Panel target-->

<div id="target">

<!--child element were scrollPanel renders-->
        <div>
<!--Scrollable contents-->

        </div>
    </div>

<div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="target"></div>


ScrollPanel control will automatically adjust its height and margin, if fixed elements were present in the main page. So that the following elements will gets rendered after the header. Refer to the following code example

[Html]

    <div id="header" data-role="ejmheader" data-ej-title="Syncfusion" data-ej-position="normal" data-ej-showleftbutton="true" data-ej-leftbuttoncaption="Back" data-ej-showrightbutton="true" data-ej-rightbuttoncaption="Next"></div>

   <!--Scroll Panel target-->

     <div id="target">

         <!--child element were scrollPanel renders-->

        <div style="height:100%">

            <!--Scrollable contents-->

            <div style="height: 30px; background: yellow">Custom Text</div>

            <div data-role="ejmlistview" style="height: 200px" id="pulltorefresh" data-ej-datasource="window.datasource"

                data-ej-fieldsettings="window.dbitem" data-ej-enablepulltorefresh="true" data-ej-appendonrefresh="true" data-ej-headertitle="Pull to refresh" data-ej-query="ej.Query().from('Orders').select('ShipCity').take(500)"

                data-ej-enablenativescrolling="false" data-ej-mode="page" data-ej-refreshthreshold="200">

            </div>

        </div>

    </div>

  
    <div id="scrollpanel" data-role="ejmscrollpanel" data-ej-target="target"></div>


Now the whole page will gets rendered as per the requirement “header, content and listview”.

We have also edited your code example and updated the code in the following JSPlayground link.

http://jsplayground.syncfusion.com/irjwbuk3
 
Regards,
Dhinesh R

Loader.
Up arrow icon