Bug on iphone for input submit form

HTML & CSS
1

Hi everyone:

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!

512×797 254 KB

640×1136 226 KB

2

Hi,

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.

3

thanks. Now it shows “submit” instead of “Go”, how do I change that?

4

I mentioned that already above :slight_smile:

5

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…

6

Ah, I see, sorry.

7

class="submit" value="Go"

:slight_smile:

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 :slight_smile:

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.