Top Menu Text not appearing on Mobile Safari

[mtbvfrMember]

Hi,

In order to have readable font sizes and make the best use of the limited space on a Smart Phone I have modified the CSS (inline styles and classes – heights, line-heights, padding, margins etc.).

Everything appears fine on my Destop browser (Firefox 12.0).

However, on Mobile Safari (iOS 6.1.3 iPhone 3GS), the word “Meny” (Top Menu Item) doesn’t appear and the Menu now opens when the page opens. Also there is a gap between the DropDown and the bottom of the <li>.

I’ve spent ages trying various things, including adding the z-index attribute to the Span, but to no avail.

Hoping someone can point me in the right direction.

Thanks, Michael.

[Peter StoevKeymaster]

Hi,

By making changes in the jqx.base.css you can break the widget’s layout and behavior. The width and height of the menu should be set only through the width and height properties.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[mtbvfrMember]

Why does setting the Border to “none”, for the Parent Div (id=”jqxMenu”), cause the menu to open (drop down) when using Mobile Safari?

Thank you, Michael.

[Peter StoevKeymaster]

Hi,

I do not know why, but as I already written, by making changes in the jqx.base.css you can break the widget’s layout and behvior.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[mtbvfrMember]

Hi Peter,

I will ask the question another way.

Why is a 1px Transparent Border used for the Div containing the Menu?

It must have been put there for a reason because removing it causes the Menu to open on Mobile Safari.

Also, the Div containing the Menu is given a “tabindex” of 1 which would cause it to receive the focus when the page opens.

If another Element, which was given a “tabindex” of 1, was positioned before/above the Menu’s Div, then, the Menu did not open.

Does a similar situation occur on browsers used on Android and Windows SmartPhones?

For the benefit of others, the best way, I found, to solve this problem was to set the “autoOpen” and “enableHover” Properties to false. Then, to allow the Hover feature to function on the Desktop Browser, I queried the “userAgent” Property of the Navigator Object to determine if a Mobile device was being used. If it is determined that a Mobile device is being used, then, “enableHover” is set to “false”, otherwise, “enableHover” is set to “true”.

In the future if you do not know the answer to a question, please ask someone who will know the answer. In this way we all can benefit.

Thank you, Michael.

[Author]

Posts