jQuery UI Widgets › Forums › Navigation › Menu, Context Menu › Larger menue for iPad or iPhone
This topic contains 7 replies, has 3 voices, and was last updated by Peter Stoev 11 years ago.
May 17, 2012 at 6:59 am Larger menue for iPad or iPhone #4206
How can one enlarge the menue size for small devices like iPad or Phone ?May 17, 2012 at 1:48 pm Larger menue for iPad or iPhone #4212
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.
http://jqwidgets.com/May 17, 2012 at 5:25 pm Larger menue for iPad or iPhone #4213
But this will not enlarge the menues font, only the space used for the menue.May 18, 2012 at 7:52 am Larger menue for iPad or iPhone #4234
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.
http://www.jqwidgets.comMay 18, 2012 at 8:04 am Larger menue for iPad or iPhone #4237
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.May 18, 2012 at 8:27 am Larger menue for iPad or iPhone #4239
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.
http://www.jqwidgets.comMay 18, 2012 at 8:39 am Larger menue for iPad or iPhone #4240
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 ?May 22, 2012 at 11:00 am Larger menue for iPad or iPhone #4277
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
You must be logged in to reply to this topic.