Viewing Galaxy in Ipad
Hi all, There is a problem when viewing Galaxy from the Ipad if the Tool or History menu needs to scroll. Iframes do not render scrolling properly on Ios5 or later (even when using 2-finger scroll method). Has anyone had this issue and been able to fix it? We're showing off Galaxy at the PAG conference and we'll be using Ipads to display the page. Right now I'm trying to wrap contents of the toolMenuContainer in a div with style="-webkit-overflow-scrolling: touch;", but I could use some help since the toolMenu containing the tools gets inserted before my div. If I could just have it render one line down: Source looks like: <body class="toolMenuContainer"> <div class="toolMenu"> ..Tools.. </div> <div class="menuWrapper"> <div class="toolMenu"> ..Workflow.. </div> </div> </body> Thanks, Carrie Ganote
Carrie, Thank you so much for bringing this new webkit CSS attribute to our attention! This iOS bug has plagued us for years. I think what you want to do however is add this to the div containing the iframe. Specifically in templates/root/index.mako there is a unified-panel-body div that contains the iframe. Adding this attribute there makes scrolling work (tested only in iPhone simulator). I'll be committing this change to galaxy-central shortly. Thanks again, James On Fri, Jan 4, 2013 at 1:37 PM, Ganote, Carrie L <cganote@iu.edu> wrote:
Hi all,
There is a problem when viewing Galaxy from the Ipad if the Tool or History menu needs to scroll. Iframes do not render scrolling properly on Ios5 or later (even when using 2-finger scroll method). Has anyone had this issue and been able to fix it? We're showing off Galaxy at the PAG conference and we'll be using Ipads to display the page.
Right now I'm trying to wrap contents of the toolMenuContainer in a div with style="-webkit-overflow-scrolling: touch;", but I could use some help since the toolMenu containing the tools gets inserted before my div. If I could just have it render one line down:
Source looks like: <body class="toolMenuContainer"> <div class="toolMenu"> ..Tools.. </div> <div class="menuWrapper"> <div class="toolMenu"> ..Workflow.. </div> </div> </body>
Thanks,
Carrie Ganote
___________________________________________________________ Please keep all replies on the list by using "reply all" in your mail client. To manage your subscriptions to this and other Galaxy lists, please use the interface at:
The fix is in this changeset, applied conditionally on iOS devices: https://bitbucket.org/galaxy/galaxy-central/commits/312ba8a948a1c678bea807f4... On Fri, Jan 4, 2013 at 2:08 PM, James Taylor <james@jamestaylor.org> wrote:
Carrie,
Thank you so much for bringing this new webkit CSS attribute to our attention! This iOS bug has plagued us for years. I think what you want to do however is add this to the div containing the iframe. Specifically in templates/root/index.mako there is a unified-panel-body div that contains the iframe. Adding this attribute there makes scrolling work (tested only in iPhone simulator). I'll be committing this change to galaxy-central shortly.
Thanks again, James
On Fri, Jan 4, 2013 at 1:37 PM, Ganote, Carrie L <cganote@iu.edu> wrote:
Hi all,
There is a problem when viewing Galaxy from the Ipad if the Tool or History menu needs to scroll. Iframes do not render scrolling properly on Ios5 or later (even when using 2-finger scroll method). Has anyone had this issue and been able to fix it? We're showing off Galaxy at the PAG conference and we'll be using Ipads to display the page.
Right now I'm trying to wrap contents of the toolMenuContainer in a div with style="-webkit-overflow-scrolling: touch;", but I could use some help since the toolMenu containing the tools gets inserted before my div. If I could just have it render one line down:
Source looks like: <body class="toolMenuContainer"> <div class="toolMenu"> ..Tools.. </div> <div class="menuWrapper"> <div class="toolMenu"> ..Workflow.. </div> </div> </body>
Thanks,
Carrie Ganote
___________________________________________________________ Please keep all replies on the list by using "reply all" in your mail client. To manage your subscriptions to this and other Galaxy lists, please use the interface at:
Hi James, This does work in the Ipad simulator, but I can't seem to get it to work on the actual Ipad device. Oh, simulators. It's gotta be close though. Thanks, Carrie Ganote ________________________________________ From: james@taylorlab.org [james@taylorlab.org] on behalf of James Taylor [james@jamestaylor.org] Sent: Friday, January 04, 2013 2:45 PM To: Ganote, Carrie L Cc: galaxy-dev@lists.bx.psu.edu Subject: Re: [galaxy-dev] Viewing Galaxy in Ipad The fix is in this changeset, applied conditionally on iOS devices: https://bitbucket.org/galaxy/galaxy-central/commits/312ba8a948a1c678bea807f4... On Fri, Jan 4, 2013 at 2:08 PM, James Taylor <james@jamestaylor.org> wrote:
Carrie,
Thank you so much for bringing this new webkit CSS attribute to our attention! This iOS bug has plagued us for years. I think what you want to do however is add this to the div containing the iframe. Specifically in templates/root/index.mako there is a unified-panel-body div that contains the iframe. Adding this attribute there makes scrolling work (tested only in iPhone simulator). I'll be committing this change to galaxy-central shortly.
Thanks again, James
On Fri, Jan 4, 2013 at 1:37 PM, Ganote, Carrie L <cganote@iu.edu> wrote:
Hi all,
There is a problem when viewing Galaxy from the Ipad if the Tool or History menu needs to scroll. Iframes do not render scrolling properly on Ios5 or later (even when using 2-finger scroll method). Has anyone had this issue and been able to fix it? We're showing off Galaxy at the PAG conference and we'll be using Ipads to display the page.
Right now I'm trying to wrap contents of the toolMenuContainer in a div with style="-webkit-overflow-scrolling: touch;", but I could use some help since the toolMenu containing the tools gets inserted before my div. If I could just have it render one line down:
Source looks like: <body class="toolMenuContainer"> <div class="toolMenu"> ..Tools.. </div> <div class="menuWrapper"> <div class="toolMenu"> ..Workflow.. </div> </div> </body>
Thanks,
Carrie Ganote
___________________________________________________________ Please keep all replies on the list by using "reply all" in your mail client. To manage your subscriptions to this and other Galaxy lists, please use the interface at:
It is working for me on a real ipad (3rd gen). It isn't perfect, sometimes it scrolls the whole page and other times the frame, but it does seem to mostly work. -- James Taylor, Assistant Professor, Biology/CS, Emory University On Fri, Jan 4, 2013 at 3:55 PM, Ganote, Carrie L <cganote@iu.edu> wrote:
Hi James,
This does work in the Ipad simulator, but I can't seem to get it to work on the actual Ipad device. Oh, simulators. It's gotta be close though.
Thanks,
Carrie Ganote ________________________________________ From: james@taylorlab.org [james@taylorlab.org] on behalf of James Taylor [james@jamestaylor.org] Sent: Friday, January 04, 2013 2:45 PM To: Ganote, Carrie L Cc: galaxy-dev@lists.bx.psu.edu Subject: Re: [galaxy-dev] Viewing Galaxy in Ipad
The fix is in this changeset, applied conditionally on iOS devices:
https://bitbucket.org/galaxy/galaxy-central/commits/312ba8a948a1c678bea807f4...
On Fri, Jan 4, 2013 at 2:08 PM, James Taylor <james@jamestaylor.org> wrote:
Carrie,
Thank you so much for bringing this new webkit CSS attribute to our attention! This iOS bug has plagued us for years. I think what you want to do however is add this to the div containing the iframe. Specifically in templates/root/index.mako there is a unified-panel-body div that contains the iframe. Adding this attribute there makes scrolling work (tested only in iPhone simulator). I'll be committing this change to galaxy-central shortly.
Thanks again, James
On Fri, Jan 4, 2013 at 1:37 PM, Ganote, Carrie L <cganote@iu.edu> wrote:
Hi all,
There is a problem when viewing Galaxy from the Ipad if the Tool or History menu needs to scroll. Iframes do not render scrolling properly on Ios5 or later (even when using 2-finger scroll method). Has anyone had this issue and been able to fix it? We're showing off Galaxy at the PAG conference and we'll be using Ipads to display the page.
Right now I'm trying to wrap contents of the toolMenuContainer in a div with style="-webkit-overflow-scrolling: touch;", but I could use some help since the toolMenu containing the tools gets inserted before my div. If I could just have it render one line down:
Source looks like: <body class="toolMenuContainer"> <div class="toolMenu"> ..Tools.. </div> <div class="menuWrapper"> <div class="toolMenu"> ..Workflow.. </div> </div> </body>
Thanks,
Carrie Ganote
___________________________________________________________ Please keep all replies on the list by using "reply all" in your mail client. To manage your subscriptions to this and other Galaxy lists, please use the interface at:
Hi James, Thanks for the reply, I tried it on the Ipad3 and it did work. However, some notes: For the 1st gen Ipad, this still didn't work very well; the page would scroll on a sideways swipe (weird!) but the contents would not re-render until the page was zoomed. What seems to work for me is this: *In templates/root/index.mako, make changes suggested by James. *In static/june../blue/base.css: add line --> div.menuWrapper{overflow:auto;-webkit-overflow-scrolling:touch;} *In templates/root/tool_menu.mako: line 55 ##$('body').prepend(tool_panel_view.$el); change to --> $('.menuWrapper').prepend(tool_panel_view.$el); line 101 <body class="toolMenuContainer"> add line --> <div class="menuWrapper"> line 102 <div class="toolMenu"> line 103 ## Feedback when search returns no results. ... line 133 %endif line 134 </div> add line --> </div> line 135 </body> *In templates/root/history.mako: line 593 <body class="historyPage"> add line --> <div class="menuWrapper"> line 594 <div id="top-links" class="historyLinks"> ... line 706 ${_("Your history is empty. Click 'Get Data' on the left pane to start")} line 707 </div> add line --> </div> line 708 </body> ..This works OK in Mobile Safari and pretty well in Mobile Mercury. Doesn't work in Terra and can't get Chrome to even load Galaxy over ssl. Hopefully this will help someone out! Sincerely, Carrie Ganote ________________________________________ From: james@taylorlab.org [james@taylorlab.org] on behalf of James Taylor [james@jamestaylor.org] Sent: Friday, January 04, 2013 4:12 PM To: Ganote, Carrie L Cc: galaxy-dev@lists.bx.psu.edu Subject: Re: [galaxy-dev] Viewing Galaxy in Ipad It is working for me on a real ipad (3rd gen). It isn't perfect, sometimes it scrolls the whole page and other times the frame, but it does seem to mostly work. -- James Taylor, Assistant Professor, Biology/CS, Emory University On Fri, Jan 4, 2013 at 3:55 PM, Ganote, Carrie L <cganote@iu.edu> wrote:
Hi James,
This does work in the Ipad simulator, but I can't seem to get it to work on the actual Ipad device. Oh, simulators. It's gotta be close though.
Thanks,
Carrie Ganote ________________________________________ From: james@taylorlab.org [james@taylorlab.org] on behalf of James Taylor [james@jamestaylor.org] Sent: Friday, January 04, 2013 2:45 PM To: Ganote, Carrie L Cc: galaxy-dev@lists.bx.psu.edu Subject: Re: [galaxy-dev] Viewing Galaxy in Ipad
The fix is in this changeset, applied conditionally on iOS devices:
https://bitbucket.org/galaxy/galaxy-central/commits/312ba8a948a1c678bea807f4...
On Fri, Jan 4, 2013 at 2:08 PM, James Taylor <james@jamestaylor.org> wrote:
Carrie,
Thank you so much for bringing this new webkit CSS attribute to our attention! This iOS bug has plagued us for years. I think what you want to do however is add this to the div containing the iframe. Specifically in templates/root/index.mako there is a unified-panel-body div that contains the iframe. Adding this attribute there makes scrolling work (tested only in iPhone simulator). I'll be committing this change to galaxy-central shortly.
Thanks again, James
On Fri, Jan 4, 2013 at 1:37 PM, Ganote, Carrie L <cganote@iu.edu> wrote:
Hi all,
There is a problem when viewing Galaxy from the Ipad if the Tool or History menu needs to scroll. Iframes do not render scrolling properly on Ios5 or later (even when using 2-finger scroll method). Has anyone had this issue and been able to fix it? We're showing off Galaxy at the PAG conference and we'll be using Ipads to display the page.
Right now I'm trying to wrap contents of the toolMenuContainer in a div with style="-webkit-overflow-scrolling: touch;", but I could use some help since the toolMenu containing the tools gets inserted before my div. If I could just have it render one line down:
Source looks like: <body class="toolMenuContainer"> <div class="toolMenu"> ..Tools.. </div> <div class="menuWrapper"> <div class="toolMenu"> ..Workflow.. </div> </div> </body>
Thanks,
Carrie Ganote
___________________________________________________________ Please keep all replies on the list by using "reply all" in your mail client. To manage your subscriptions to this and other Galaxy lists, please use the interface at:
participants (2)
-
Ganote, Carrie L -
James Taylor