|
Craig Hobson
|
June 20, 2013 at 9:22 am
Hello,
The Espresso plug-in is great for ticketing but I am having trouble properly styling it as advertised.
We had to change the style of the buttons but the Ipad is picking up styles that I can’t seem to find or change anywhere in regards to the buttons.
Please advice, as its kinda hard to sort through all the depricated files because of a style glitch that can’t be overridden for some reason.
Here is the page in question on the test site:
http://captaincrispychicken.com/frisky-dingo/iwd-2013/register/register-for-impairment-without-disability/
The issue is with the Next > Button on the bottom.
Thanks!
|
|
Josh
|
June 20, 2013 at 10:45 am
Hi there,
I checked and it turns out that what you’re seeing is Mobile Safari’s built-in input element rendering. You can disable it site wide by adding:
input {
-webkit-appearance: none;
border-radius: 0;
}
which will cover all inputs site wide. If you want to target the Next button only, it would be:
.btn_event_form_submit, .inline-button {
border-radius: 0;
-webkit-appearance: none;
}
Note, some versions of iOS will need the border-radius set to zero, others will not, so you’ll likely want to test the above out to make sure it works.
As an aside, you might consider changing the width, or even add a min-width to the cancel button. It gets cut off on smaller screens when since its width is set to be 20% of its parent container.
|
|
Craig Hobson
|
June 20, 2013 at 1:25 pm
Excellent, both suggestions worked.
Thanks Josh.
|
|
Josh
|
June 20, 2013 at 1:45 pm
You’re welcome.
I’m not sure if this will help with your project, but if you’re on a Mac you can use Safari, with the iPad plugged in, and inspect elements right from the iPad for situations like this:
http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-tip-using-web-inspector-to-debug-mobile-safari/
|
