Thread: Mobile add to cart, different options than full site?

I have images turned on for my add to cart button in desktop mode.

In mobile mode the image stretches out of proportion, is hovering over a default jquery button, and there is no text displaying.

Is this expected behavior? If so, how is this good design? I should be able to separate the design for mobile vs. desktop add-to-cart, since jquery mobile defaults to 100% width buttons with expected text instead of using an image or whatever.

Any tips on how to resolve this w/out losing my add-to-cart image in desktop mode?

thanks.

I believe you could just update the styles on that button in the Mobile skin's stylesheet? Or maybe I'm misunderstanding...

I've been working at this for days now. ASPDNSF only supplies us with the minimized files for the Jquery 1.0.1 they are using for the mobile site in 9.3, and so separating out the styles and so forth is frustrating. Furthermore, I've been reading up on the Jquery mobile options and there should be an option available to turn off the jquery buttons in lieu of an image button, but I believe it would have to be supported in the codebehind for the add to cart form, or at least, I can't tell where to put it otherwise. Also, the jquery buttons are supposed to have an option to either go 100% width or be width of text/content, but again I think that would have to be done in the source code? Gah. Frustrating to have these options restricted or have to recompile for something so simple.

Hmm, which version of the cart are you on? Did you consider the http://www.aspdotnetstorefront.com/p...e-plug-in.aspx

I think you missed the part where I said 9.3

Sorry! Ok, Mobile Plugin included in MS93x is running/using the Skin_2 files so App_Templates\Skin_2 which includes the css file there... couldn't you overload the styling/css using those?

What is the site so I can see?

I'm sure you have this link already but just in case: http://manual.aspdotnetstorefront.co...nd-higher.aspx

Been there done that Jan, and the files included there are minimized, so there are no comments, and you cannot import it to the ThemeRoller at the mobile jquery site. It's just frustrating to have to dig through minimized JS and CSS without access to the full versions.

If you visit here:
http://jquerymobile.com/demos/1.0.1/

Specifically http://jquerymobile.com/demos/1.0.1/...ons-types.html

"To preserve events bound to the original button or input, the framework hides the original element by making it transparent and positioning it over the new button markup. When a user clicks on the the custom-styled button, they're actually clicking on the original element. To prevent a form button from being converted into an enhanced button, add the data-role="none" attribute and hte native control will be rendered."

- that gives the "button" appearance underneath the image and this:

http://jquerymobile.com/demos/1.0.1/...ns-inline.html

"By default, all buttons in the body content are styled as block-level element so they fill the width of the screen:"
and
"However, if you want a more compact button that is only as wide as the text and icons inside, add the data-inline="true" attribute to the button:"

means I should be able to fix this with the proper coding however, their example shows the code being used directly in the html that the button is made of, which is created in the codebehind/source code for the AddToCart functions ....

I hope this makes sense.