Jump to content

Improperly Displayed Submit Button


Recommended Posts

BACKGROUND:  Now that I have finally got my responsive design to function properly.  I did a little exploration of my site from my new iPhone 5 that a colleague gave me.to replace my broken "obsolete"  iPhone 4.   What I discovered was the unusual appearance of one of my form input controls.  Although the submit button appears correctly on my still functioning "obsolete" MacBook, it does not appear correct on my new, not yet "obsolete" iPhone.  When I investigate the matter with Firebug I am told that there is event bubbling. 

Now, I am not at all sure that this is the source of the problem.  Neither, am I clear about how  the bubbling is being created. This is the first time that I have encountered such an issue.


1) Open the Grammar Captive mainpage in your smartphone.

2) Find the text Weekly Podcasts under the Products subtitle in the navigation bar on your left and click on it.

3) Scroll to the bottom of the form located toward the bottom of the page and discover that the value of the button -- namely, Discover! -- is partially hidden.  The width of the button is clearly not wide enough to display the entire value of the value attribute.

QUESTION ONE:  Why does the value attribute display correctly in my browser window on my "obsolete" MacBook, but not on my not yet "obsolete" iPhone?

QUESTION TWO: If bubbling is the source of the problem, what must I do to fix it?


Link to comment
Share on other sites

I don't have an iPhone with me and can't reproduce it on my emulators, so I'll have to make a guess. It might have something to do with setting the width to "-webkit-auto". At best that would do nothing and at worst it's going to behave unpredictably. Remove the -webkit-auto rule because there will never be a circumstance where it is needed.

My second guess would be that it has something to do with the OS's button styles. You should set appearance/-webkit-appearance property so that it behaves like a regular element, like this:

#pc_signup form input[type="submit"] {
  -webkit-appearance: none;
  apperance: none;

On the topic of -webkit- prefixed rules, they must always go above the real rule, so that browsers that support both will use the most updated version of the rule.

I have no idea what you mean by "bubbling" in the context of CSS.

Link to comment
Share on other sites

Nope.  I tried the following three things and refreshed the browser page of iPhone each time.

1) Placed the -webkit setting before the rule.

2) Eliminated the -webkit setting altogether.

3) With the setting eliminated introduced the suggest CSS script.

All of these failed.

I do believe you are correct about it having something to do with the OS's button styles.  As other buttons on other filler pages are also distorted.  Any suggestions about where to go to obtain more insight into the resolution of the problem.  A Google search for the problem suggested the same as you.

Link to comment
Share on other sites

I still have not discovered a solution for my submit buttons.  By way of example, go to the Grammar Captive mainpage, find the phrase Weekly Podcasts in the navigation bar on your left, and click.  When the panel opens scroll down to the bottom of the page.  Only when my phone is turned horizontal will the button at the bottom of the form appear as it should.


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...