Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
New Developer
Posts: 6
Registered: ‎05-19-2010
My Device: 8900
My Carrier: none

Fixed position not work in BB widget!

Hi,

 

I am a newer of Blackberry widget develop.

 

I write a simple app to verify if i can implement the following layout in BB widget, but find that the fixed position not work.

 

Note: I also want to implement this using the focus base mode.

 

-------------

|  Header  |    Fixed

-------------

|  Body     |     Scrollable

-------------

| Footer    |     Fixed

-------------

 

[HTML]

 

<body>
        <!-- Header -->
        
        <!-- Body -->
        <input style="width:100%;" type="button" value="Line [1]" />
        <input style="width:100%;" type="button" value="Line [2]" />
        <input style="width:100%;" type="button" value="Line [3]" />
        <input style="width:100%;" type="button" value="Line [4]" />
        <input style="width:100%;" type="button" value="Line [5]" />
        <input style="width:100%;" type="button" value="Line [6]" />
        <input style="width:100%;" type="button" value="Line [7]" />
        <input style="width:100%;" type="button" value="Line [8]" />
        <input style="width:100%;" type="button" value="Line [9]" />
       
        <!-- Footer -->
        <div id="idChatInputSend">
            <input id="idChatInput" type="text"/>
            <span id="idChatSend">Send</span>
        </div>
    </body>

 

[CSS]

#idChatInputSend {
    position: fixed;
    z-index: 100;
    left: 0px;
    bottom: 0px;
    
    width: 100%;
    height: 45px;
}

 

In firefox, it work and be positioned at the bottom.

 

Blackberry device: 8900

 

Thanks for your help!

Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Fixed position not work in BB widget!

Hi There,

 

The BlackBerry Browser rendering engine has difficulties with fixed position items.  When you scroll it will attempt to keep the item fixed, but what will end up happening is that you will get the fixed item "jumping" on the screen trying to stay fixed while the other content scrolls.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
New Contributor
Posts: 5
Registered: ‎06-09-2011
My Device: Blackberry 9700
My Carrier: Digicel Jamaica

Re: Fixed position not work in BB widget!

Is there update an to this issue, or is there a way we can circumvent this rendering issue in achieving a fixed div in html or webworks? Thanks.
it's all a dream
Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Fixed position not work in BB widget!

Fixed position div's work on PlayBook and on BB7 but do not work on BB6 or earlier devices.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
New Contributor
Posts: 2
Registered: ‎07-13-2011
My Device: blackberry smartphone
My Carrier: me

Re: Fixed position not work in BB widget!

Hi tneil, 

I am facing same problem with position:fixed style ,  what is alternative solution for that, did you got any alternative solution for that ,.. please help for that.

Regards,

Rajesh k

Highlighted
Developer
Posts: 70
Registered: ‎04-08-2011
My Device: BB 4 and BB 5.0
My Carrier: BB Curve

Re: Fixed position not work in BB widget!

I have used this but still it misses.

 

document.ontouchstart = function(event) {
  //  event.preventDefault();
    //$('#nav').hide();
   
    if(event.target.tagName == 'a' || event.target.tagName == 'A')
    {
        ////Do nothing on navigation click
    }
    else{
    $('#nav').hide();
    window.setTimeout(showNav,500);
    }
   
   
    /*for(var i in event)
    {
        alert(i+ '    :' + event[i]);
    }*/
   
 
};

function showNav(){
$('#nav').show();
}

New Developer
Posts: 20
Registered: ‎10-23-2013
My Device: na
My Carrier: na

Re: Fixed position not work in BB widget!

It is still an issue on Black 10 Browser. Any updates on a possible JS/CSS solution ?

New Developer
Posts: 13
Registered: ‎04-02-2015
My Device: z10, q10
My Carrier: Telus

Re: Fixed position not work in BB widget!

You could consider placing the footer absolutely, and making the body container scrollable.  Something like this:

 

<body>
  <header/>
  <div class="main">Content</div>
  <footer />
</body>

body {
  height: 100%;
  width: 100%;
}

header {
  position:relative;
  top:0;
}

.content {
  overflow-y: scroll;
}

footer {
  position:absolute;
  bottom:0;
}

  Or you could consider using flex box and have the content div scrollable.  I believe flex box works just fine in the bb10 browser (again content div with overscroll-y )