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.
Unfortunately, activation email could not send to your email. Please try again.

fixed element

Thread ID:

Created:

Updated:

Platform:

Replies:

121638 Jan 11,2016 03:38 PM Jan 12,2016 05:30 AM JavaScript 1
loading
Tags: ejmScrollPanel
Sagi Karni
Asked On January 11, 2016 03:38 PM

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

Dhinesh Ravi [Syncfusion]
Replied On January 12, 2016 05:30 AM

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;