So I have went through multiple changes on this UX component to make sure I narrowed down the issue to the panel and nothing else. So lets talk shop...
If you head over to the link at the bottom of this page in mobile chrome on Android you will experience a strange phenomenon, the login (which is integrated into the component) will pop-up but in the background (as it is slightly transparent) you will see that the buttons are only slightly showing off to the right of the screen (they should be centered). If they are already centered go ahead and tap login (don't need to fill in user name or password) and click the refresh button (may have to try it a couple times but eventually the buttons will come back and not be rendered in the center). If this never happens then please let me know what phone and version of Android you are running.
Here is how I ended up fixing the problem (there are two options but both have pros and cons)..
1) The panel has multiple containers inside it that are all set to width of 100% and center alignment (this includes the login container that is set to show as a pop-up ajax window). However, the buttons (clock-in, clock-out, etc) will only always show up in the window if I change the alignment of the container to left (however this isn't the look I'm going for as setting the buttons t). What is strange is the login controls are sitting in a container set to center and 100% as well as inside the same panel and they render just fine.
2) Instead I can get rid of the panel all together and just wrap everything in an outer container and set it to alignment of left with width 100% (leaving all other containers set to center). This at least gives me the buttons centered but with this set up it seems like the buttons are vertically aligned centered as well (where as with the panel they would be closer to the top of the page). Now this isn't a deal breaker but not having the panel also seems to take away my ability to implement "pull to refresh" (using the pull past events of the panel). I tried to add the same code to the outer most container (first by turning on drag scrolling and setting it to vertical) but on iOS it just made it so I could move the page all over the place past the edges (never fired the events).
Again I am doing this by adding the app to the home screen so I can use it in standalone mode (however I have the same issues when just using it in the chrome browser on android). This is obviously quite annoying but I am hoping someone else has come across this same issue. It seems like it is an issue with the way mobile chrome is handling the panel as well as the underlying containers.
www.etrucktools.com/timekeeper.a5w
If you head over to the link at the bottom of this page in mobile chrome on Android you will experience a strange phenomenon, the login (which is integrated into the component) will pop-up but in the background (as it is slightly transparent) you will see that the buttons are only slightly showing off to the right of the screen (they should be centered). If they are already centered go ahead and tap login (don't need to fill in user name or password) and click the refresh button (may have to try it a couple times but eventually the buttons will come back and not be rendered in the center). If this never happens then please let me know what phone and version of Android you are running.
Here is how I ended up fixing the problem (there are two options but both have pros and cons)..
1) The panel has multiple containers inside it that are all set to width of 100% and center alignment (this includes the login container that is set to show as a pop-up ajax window). However, the buttons (clock-in, clock-out, etc) will only always show up in the window if I change the alignment of the container to left (however this isn't the look I'm going for as setting the buttons t). What is strange is the login controls are sitting in a container set to center and 100% as well as inside the same panel and they render just fine.
2) Instead I can get rid of the panel all together and just wrap everything in an outer container and set it to alignment of left with width 100% (leaving all other containers set to center). This at least gives me the buttons centered but with this set up it seems like the buttons are vertically aligned centered as well (where as with the panel they would be closer to the top of the page). Now this isn't a deal breaker but not having the panel also seems to take away my ability to implement "pull to refresh" (using the pull past events of the panel). I tried to add the same code to the outer most container (first by turning on drag scrolling and setting it to vertical) but on iOS it just made it so I could move the page all over the place past the edges (never fired the events).
Again I am doing this by adding the app to the home screen so I can use it in standalone mode (however I have the same issues when just using it in the chrome browser on android). This is obviously quite annoying but I am hoping someone else has come across this same issue. It seems like it is an issue with the way mobile chrome is handling the panel as well as the underlying containers.
www.etrucktools.com/timekeeper.a5w
Comment