Larger menue for iPad or iPhone

[carloParticipant]

How can one enlarge the menue size for small devices like iPad or Phone ?

[MinkoBlocked]

Hello Carlo,

you can detect whether the browser is mobile and/or it’s screen resolution and resize the jqxMenu depending on that information.
Here is how you can resize jqxMenu:

$('#menu').jqxMenu('width', '500px');
$('#menu').jqxMenu('height', '100px');

The code above will make jqxMenu with height 100px and width 500px.

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

[carloParticipant]

But this will not enlarge the menues font, only the space used for the menue.

[Peter StoevKeymaster]

The Font in our themes is set in pixels. However, if you want to set it to a different value, you can edit the font-size settings for your application in the jqx.base.css file

Hope this helps.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[carloParticipant]

Hello Peter,

the menues are okay on a desktop PC, but are too small on an iPad and much too small on an iPhone. You claim jqwidgets to be for all devices, so one could expect some mechanism to handle that. Editing jqx.base.css is no soulition. If I increase the fontsize to fit an iPhone, it would be too big for the iPad and much too big for the desktop. Also I do not want to edit a jqwidget system file, which may be changing in the next release.

[Peter StoevKeymaster]

Hi carlo,

Yes, jQWidgets change their behavior when they detect a Touch/Mobile Device. However, according to us, it is not correct to hard-code CSS values in the widgets and it is not correct to change the size of a widget when the size is set in pixels. That is why, I suggest you to set the font-size to a percentage value in the jqx.base.css file. I am suggesting this because with the percent unit, your text remains fully scalable for mobile devices and for accessibility.

BEst Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[carloParticipant]

Hi Peter,

please tell me which style I have to change in jqx.base.css . You say you detect Touch/Mobile devices. Are there any jqwidgets device properties we can query to adapt our code ?

[Peter StoevKeymaster]

Hi carlo,

The font-size is defined in the following CSS classes – .jqx-widget-content, .jqx-widget-header and .jqx-widget.

To detect whether a device is a Touch device, please take a look here: http://pastebin.com/ycpAvp25

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts