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
Posts: 482
Registered: ‎10-24-2008
My Device: 9300
My Carrier: AT&T
Accepted Solution

Rim Navigation issue

Hello all,

 

I've implemented the RIM navigation into my widget, but I'm having issues with gaining focus on my select element.

 

My page has a select at the top and a Div containing a table in the lower section. I have added the CSS to highlight the div or the select depending on which is focused (the hover event). My Div highlights correctly, but my select never highlights. Below is my HTML and a snippet of my css as well as some screen shots.

SelectSelected.jpgDivSelected.jpg

<html>
	<head>
		<meta name="viewport" id="viewport" content="initial-scale=1.0,user-scalable=no" />
		<title>Emit</title>
		<link type="text/css" rel="stylesheet" href="style.css"/>
	</head>
	<body>
		<div id="TopDiv">	
			<select id="testSelect" size="1" onFocus="testSelectFocus();" x-blackberry-focusable="true">
				<option value="null">Select a station...</option>
				<option value="null">Second option...</option>
			</select>
			<hr />
		</div>
		<div x-blackberry-focusable="true">
			<font size=3 color=\"#B8860B\"><I>last updated: 2/11/2010 7:15:00 AM</I></font>
			<center>
				<table border='1px' cellpadding='5' cellspacing='0' style='border: solid 1px Silver;'>
					<thead><tr align='left' valign='top'><td align='left' valign='top'>Description</td><td align='left' valign='top'>Value</td></tr></thead>
						<tr align='left' valign='top'><td align='left' valign='top'>Current Day Volume</td><td align='left' valign='top'>67</td></tr><tr align='left' valign='top' class='odd'><td align='left' valign='top'>Previous Day Volume</td><td align='left' valign='top'>1302</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Differential Pressure</td><td align='left' valign='top'>51.95</td></tr><tr align='left' valign='top' class='odd'><td align='left' valign='top'>Corrected Flow Rate</td><td align='left' valign='top'>1331.5</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Pressure</td><td align='left' valign='top'>65.12</td></tr><tr align='left' valign='top' class='odd'><td align='left' valign='top'>RTU Supply Voltage</td><td align='left' valign='top'>12.41</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Tubing Pressure</td><td align='left' valign='top'>99.22</td></tr><tr align='left' valign='top' class='odd'><td align='left' valign='top'>Casing Pressure</td><td align='left' valign='top'>344.12</td></tr><tr align='left' valign='top'><td align='left' valign='top'>Separator Pressure</td><td align='left' valign='top'>68.39</td></tr><tr align='left' valign='top' class='odd'><td align='left' valign='top'>Tank 1 Level</td><td align='left' valign='top'>57.32</td></tr>
				</table>
			</center>
		</div>
	</body>
</html>

 

css

select:hover
{
	background-color:#FFE773;
	color: white;
}
div:hover
{
	background-color:#FFE773;
}

 

 

 

_________________________________________
www.jasonmace.com/blackberry
Developer
Posts: 482
Registered: ‎10-24-2008
My Device: 9300
My Carrier: AT&T

Re: Rim Navigation issue

More on the Rim navigation...

If I launch a modal window on top of the current page of my widget, I have issues with being able to focus on the elements in the background. Is there a way to disable the ability to focus on elements temporarily?

_________________________________________
www.jasonmace.com/blackberry
Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Rim Navigation issue

Hi jmace,

 

We have one of our developers taking a look at your issue... stay tuned

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Developer
Posts: 482
Registered: ‎10-24-2008
My Device: 9300
My Carrier: AT&T

Re: Rim Navigation issue

Thanks Tim,

 

I've dealt with the modal window issue by just moving to an element in the modal and controlling the Rim navigation until it is closed (onUp,onDown, etc...).

 

The "select" hovering issue is still just escaping me. I've also tried removing it the DIV around the "select" and "hr" and I still can't get it to highlight when it is the focused element.

_________________________________________
www.jasonmace.com/blackberry
Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Rim Navigation issue

I'm back with some more information.

 

It turns out that the CSS hover highlighting on "select" did not work on some builds of the OS where newer builds of the OS have that bug fixed.

 

What you could possibly do is put a <div> around the select and make it hover highlight to show the item as selected.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Developer
Posts: 482
Registered: ‎10-24-2008
My Device: 9300
My Carrier: AT&T

Re: Rim Navigation issue

Thanks for the hint Tim,

 

I did not wrap my select in a DIV and create a css hover rule for the div. This would highlight the div, but not allow my users to click on the select without scrolling a little (giving a false sense of being on the select).

 

Instead, I added an "onMouseOver' event to my select and created my functionality in javascript.

 

At what versions of 5.0 was the css select hover issue corrected? I'm currently at 5.0.0.442

_________________________________________
www.jasonmace.com/blackberry
Highlighted
Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Rim Navigation issue

I'm glad you found a work around.  I believe it is somewhere in the 5.0.0.5XX range.  

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter