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
Developer
RapsFan
Posts: 442
Registered: ‎08-02-2010
My Device: Z10
Accepted Solution

ActionBar in footer blocking content

[ Edited ]

My problem is two fold. The first is that the footer blocks some of the content, the submit button as seen in the image. If I remove the <frame> tags then it's fine. The second issue is that if scrolling down, or up too much the header and footer doesn't stay fixed. What am I doing wrong?

 

<body>
<div data-role="page" id="landing">
<div data-role="header"> </div>
<div data-role="content">
<div id="map_canvas" style="height:600px"> </div>
<div id="info"> </div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="actionbar"> <a id="help" data-role="tab"> <img src="img/ic_help.png"/>
<p>Help</p>
</a> <a id="chat" data-role="tab"> <img src="img/ic_textmessage.png"/>
<p>Chat</p>
</a> <a id="add" data-role="tab" href="#add"> <img src="img/ic_add.png"/>
<p>Add </p>
</a> <a id="settings" data-role="tab" href="#register"> <img src="img/Core_applicationmenu_icon_settings.png" alt="" />
<p>Settings</p>
</a> </div>
</div>
</div>
<div data-role="page" id="register">
<div data-role="header"> </div>
<div data-role="content">
<div class="BB10Container">
<form id="adduser">
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" placeholder="John"/>
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" placeholder="Doe"/>
<label for="username">Username</label>
<input type="text" name="username" id="username" placeholder="Username"/>
<label for="basic">Password</label>
<input type="password" name="password" id="password" placeholder="Password"/>
<label for="verpass">Repeat Password</label>
<input type="password" name="verpass" id="verpass" placeholder="Password"/>
<label for="regemail">Email</label>
<input type="email" name="email" id="email" placeholder="your@email.com"/>
<input type="submit" data-role="button" data-inline="true" data-icon="check" value="Submit" id="regsubmit">
</form>

</div>
<div id="info"> </div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="actionbar"> <a id="help" data-role="tab"> <img src="img/ic_help.png"/>
<p>Help</p>
</a> <a id="chat" data-role="tab"> <img src="img/ic_textmessage.png"/>
<p>Chat</p>
</a> <a id="add" data-role="tab" href="#add"> <img src="img/ic_add.png"/>
<p>Add </p>
</a> <a id="settings" data-role="tab" href="#settings"> <img src="img/Core_applicationmenu_icon_settings.png" alt="" />
<p>Settings</p>
</a> </div>
</div>
</div>
</div>
</body>

 

action bar

BlackBerry Development Advisor
oros
Posts: 1,557
Registered: ‎04-12-2010
My Device: BlackBerry Z10

Re: ActionBar in footer blocking content

If you use Web Inspector, does the <form> element have any specific CSS being applied? Perhaps height: 100%? If so, it may be forcefully stretching the container beyond the intended height.

What about BB10Container, what CSS does it have associated with it?

Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Developer
RapsFan
Posts: 442
Registered: ‎08-02-2010
My Device: Z10

Re: ActionBar in footer blocking content

It was the form hight. I got rid of the container and it didn't change anything. I looked at the CSS rules for the form in the inspector but didn't see a height value set so I set one.