Forums / General Questions / custom jQuery Mobile formatting issue for product info

custom jQuery Mobile formatting issue for product info

Views: 1,583

Results 1 to 4 of 4
5 Jan 2012, 11:05 PM
#1
smm11 avatar

smm11

New Zenner

Join Date:
Aug 2011
Posts:
15
Plugin Contributions:
0

custom jQuery Mobile formatting issue for product info

I've got jQuery Mobile working on a mobile version of Zen Cart, other than an issue with what I see when "drilling down" for more information on a product, to the single-product display page.

On this page, where the "Previous, Product Listing, Next" buttons might appear, the "viewport" I'm using is completely ignored, instead displaying the page far beyond the screen reach of Android and iPhone devices.

This is odd, since the remainder of the site formats correctly for "mobile," including iPads, given the jquery mobile bits I've placed in html_header.php.

I can't find where else in the files structure that this page display is referenced. Anyone?

(I'm running this on localhost for now, calling a dupe of our public DB, so can't quite post photos.)

5 Jan 2012, 11:48 PM
#2
niccol avatar

niccol

Totally Zenned

Join Date:
Apr 2009
Posts:
2,138
Plugin Contributions:
1

Re: custom jQuery Mobile formatting issue for product info

hard to comment without more information but the main file for the product_info pages is includes/your_template/templates/tpl_product_info_display.php

Off the top of my head, my somewhat addled memory tells me that with jQuery mobile you'll want to reformat this page considerably to get it to render nicely. Both an individual elements width and the css can throw the rendering out. Have a good look in firebug or developer tools or whatever and find what is causing the problem.

Nick
iszent.com

11 Jan 2012, 5:28 PM
#3
smm11 avatar

smm11

New Zenner

Join Date:
Aug 2011
Posts:
15
Plugin Contributions:
0

Re: custom jQuery Mobile formatting issue for product info

Thanks, that narrowed down the issue quite a bit.

I've since been looking into the CSS buttons, which look much better than the stock "add to cart," etc., buttons, which appear very stretched and distorted when appearing on my mobile.

But, while CSS buttons look great, they don't work on any mobile or desktop platform I've tried. In fact, investigating the links shows that all input has been stripped from the buttons when they're activated.

Is there a special trick to making the CSS buttons actually work?

11 Jan 2012, 7:13 PM
#4
niccol avatar

niccol

Totally Zenned

Join Date:
Apr 2009
Posts:
2,138
Plugin Contributions:
1

Re: custom jQuery Mobile formatting issue for product info

jQuery mobile completely rewrites form and button elements.

Again of the top of my head there is a way of stopping it doing that by adding a tag to the element. If you read the jQuery mobile documentation you should be able to find that.

Nick
iszent.com