I have a responsive menu that on mobile can show a search box with its input submit. The input submit area has a bug on the iphone that makes the box for “Go” longer. Does anybody know why?
I attach images where you see the design working fine on desktop and a second one for the iphone where you can see the problem.
I used to have an image instead of Go, But I modified it for accesibility. Here’s the the PHP:
<input type="image" id="ctrl_submit_<?php echo $this->uniqueId; ?>" class="submit" alt="Go">
And here’s the link to the website, if you’d like to check it on an iphone: planetaaleph.com
Thanks a lot!
The main problem is that you are using an input of type=“image” but you aren’t linking to the source of the image and therefore you get the alt attribute placeholder text due to a missing image.
<input type="image" id="ctrl_submit_22" class="submit" alt="Go">
Add the src to the image and then you can style it to fit.
If you didn’t want an image then use an input of type=“submit” and add the value attribute for the text.
<input type="submit" id="ctrl_submit_22" class="submit" value="Go">
Once that is in place then you should be able to consistently style it for both desktop and mobile.
thanks. Now it shows “submit” instead of “Go”, how do I change that?
I mentioned that already above
I have this:
<input type="submit" id="ctrl_submit_<?php echo $this->uniqueId; ?>" class="submit" alt="Go">
And that shows Submit instead of Go now…
The mobile version is working ok now but you need to tidy up the desktop version a little (just size and position it better).
I’m out for lunch now
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.