1

I have recently been working on a project that works with colorbox. Everything is working within all browsers on a desktop machine however I am having some trouble with the iPad browser.

I am using the colorbox to show a form that contains multiple input text boxes for the user to enter their information into and save. The problem that I am having is that when the user clicks on a textbox within the colorbox on the iPad the colorbox positon is pushed down and to the right and therefore the user is unable to view the colorbox unless they zoom out and find the colorbox again. However if they do this and then click on a textbox again the same thing happenes etc etc... Therefore they are unable to enter any information into the textbox.

I have a feeling this has something to do with the fact that the iPad is trying to focus on the textbox when it has been clicked and tries to re-position to get the textbox into view but because the colorbox is shown this does not work. Im not sure if this is correct just an idea?

If you would like anymore information please let me know.

Any help would be great!

Glen Robson
  • 908
  • 2
  • 19
  • 42
  • Which version of the iOS is running on the iPad? Fixed positioning is a nightmare on the iPad! however better support was given in 5 – Ryank Jun 11 '13 at 11:18
  • @Ryank Im using version 6.1. Any other ideas? – Glen Robson Jun 11 '13 at 11:33
  • This article could help [link](http://stackoverflow.com/questions/4889601/css-position-fixed-into-ipad-iphone) or an alternative would be to do a javascript fix - there is a work around [here](http://stackoverflow.com/questions/10597622/keeping-a-jquery-modal-within-an-ipad-viewport) – Ryank Jun 11 '13 at 11:41
  • @Ryank Thanks for the links however when i look at the styling of my colorbox the position is absolute not fixed. – Glen Robson Jun 11 '13 at 12:28

1 Answers1

5

For anyone that is interested the way that I fixed this issue was by adding 

reposition: false

to the colorbox:

$.colorbox({ href:"/sites/index.html", width: 600, reposition: false });

This stops the colorbox from moving position when an element is on focus.

Glen Robson
  • 908
  • 2
  • 19
  • 42