Orbeon Forms community mailing list

Repeated Grid: Popup menu does not appear on button click

Classic

List

Threaded

5 messages Options

kushp

Repeated Grid: Popup menu does not appear on button click

I am embedding an Orbeon form inside a JSP page. I've used a repeatable grid in this form. When I tried running this form, the button to insert a row above/below/remove was not working. When clicked nothing happened. When I run the form without embedding, it was working. Just for the embedding scenario, it fails. The popup menu does not appear. Also, the button square in shape ideally. But it looks kinda out of shape in the embedded form. Below are the screenshots.

--
You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].

kushp

Re: Repeated Grid: Popup menu does not appear on button click

Some observations:

From the Elements panel in Chrome Dev tools, I search for the 'Move Up' phrase and found it. I spotted the differences w.r.t to the working form and found out that the on the button click, the values of a division changed from 'dropdown fr-grid-dropdown-menu' to 'dropdown fr-grid-dropdown-menu open' and of aria-expanded from 'false' to 'true'. Below is the link to a useful video. It depicts the change css attributes on button tag.

https://drive.google.com/open?id=1ZkDTbBGe4w88N3YuQ7qVrQYdG9EPT18i

Also, on providing the same css attribute values to the embedded form, I got this:

On Thursday, March 8, 2018 at 4:23:12 PM UTC+5:30, [hidden email] wrote:

I am embedding an Orbeon form inside a JSP page. I've used a repeatable grid in this form. When I tried running this form, the button to insert a row above/below/remove was not working. When clicked nothing happened. When I run the form without embedding, it was working. Just for the embedding scenario, it fails. The popup menu does not appear. Also, the button square in shape ideally. But it looks kinda out of shape in the embedded form. Below are the screenshots.

<a href="https://lh3.googleusercontent.com/-ZOTLGGAOfsc/WqEWAwNxXdI/AAAAAAAACIk/cto_xmD2HaIMzV73CGsKOXQ90sVrPUwXQCLcBGAs/s1600/repeated-grid-button.png" style="margin-left:1em;margin-right:1em" target="_blank" rel="nofollow" onmousedown="this.href='https://lh3.googleusercontent.com/-ZOTLGGAOfsc/WqEWAwNxXdI/AAAAAAAACIk/cto_xmD2HaIMzV73CGsKOXQ90sVrPUwXQCLcBGAs/s1600/repeated-grid-button.png';return true;" onclick="this.href='https://lh3.googleusercontent.com/-ZOTLGGAOfsc/WqEWAwNxXdI/AAAAAAAACIk/cto_xmD2HaIMzV73CGsKOXQ90sVrPUwXQCLcBGAs/s1600/repeated-grid-button.png';return true;">

kushp

Re: Repeated Grid: Popup menu does not appear on button click

Moreover, clicking on the popup menu displayed at the bottom right end did not add any/remove any row.

On Thursday, March 8, 2018 at 6:57:28 PM UTC+5:30, [hidden email] wrote:

Some observations:

From the Elements panel in Chrome Dev tools, I search for the 'Move Up' phrase and found it. I spotted the differences w.r.t to the working form and found out that the on the button click, the values of a division changed from 'dropdown fr-grid-dropdown-menu' to 'dropdown fr-grid-dropdown-menu open' and of aria-expanded from 'false' to 'true'. Below is the link to a useful video. It depicts the change css attributes on button tag.

<a href="https://drive.google.com/open?id=1ZkDTbBGe4w88N3YuQ7qVrQYdG9EPT18i" target="_blank" rel="nofollow" onmousedown="this.href='https://drive.google.com/open?id\x3d1ZkDTbBGe4w88N3YuQ7qVrQYdG9EPT18i';return true;" onclick="this.href='https://drive.google.com/open?id\x3d1ZkDTbBGe4w88N3YuQ7qVrQYdG9EPT18i';return true;">https://drive.google.com/open?id=1ZkDTbBGe4w88N3YuQ7qVrQYdG9EPT18i

Also, on providing the same css attribute values to the embedded form, I got this:
<a href="https://lh3.googleusercontent.com/-esyBJV3ShE8/WqE5kSHiCzI/AAAAAAAACJA/UviKhxoaQQUL9B3J2ClPeNag2Hwy15CmACLcBGAs/s1600/repeatable-facepalm.png" style="margin-left:1em;margin-right:1em" target="_blank" rel="nofollow" onmousedown="this.href='https://lh3.googleusercontent.com/-esyBJV3ShE8/WqE5kSHiCzI/AAAAAAAACJA/UviKhxoaQQUL9B3J2ClPeNag2Hwy15CmACLcBGAs/s1600/repeatable-facepalm.png';return true;" onclick="this.href='https://lh3.googleusercontent.com/-esyBJV3ShE8/WqE5kSHiCzI/AAAAAAAACJA/UviKhxoaQQUL9B3J2ClPeNag2Hwy15CmACLcBGAs/s1600/repeatable-facepalm.png';return true;">

On Thursday, March 8, 2018 at 4:23:12 PM UTC+5:30, [hidden email] wrote:
I am embedding an Orbeon form inside a JSP page. I've used a repeatable grid in this form. When I tried running this form, the button to insert a row above/below/remove was not working. When clicked nothing happened. When I run the form without embedding, it was working. Just for the embedding scenario, it fails. The popup menu does not appear. Also, the button square in shape ideally. But it looks kinda out of shape in the embedded form. Below are the screenshots.

<a href="https://lh3.googleusercontent.com/-ZOTLGGAOfsc/WqEWAwNxXdI/AAAAAAAACIk/cto_xmD2HaIMzV73CGsKOXQ90sVrPUwXQCLcBGAs/s1600/repeated-grid-button.png" style="margin-left:1em;margin-right:1em" rel="nofollow" target="_blank" onmousedown="this.href='https://lh3.googleusercontent.com/-ZOTLGGAOfsc/WqEWAwNxXdI/AAAAAAAACIk/cto_xmD2HaIMzV73CGsKOXQ90sVrPUwXQCLcBGAs/s1600/repeated-grid-button.png';return true;" onclick="this.href='https://lh3.googleusercontent.com/-ZOTLGGAOfsc/WqEWAwNxXdI/AAAAAAAACIk/cto_xmD2HaIMzV73CGsKOXQ90sVrPUwXQCLcBGAs/s1600/repeated-grid-button.png';return true;">

kushp

Re: Repeated Grid: Popup menu does not appear on button click

In reply to this post by kushp

Alex,

Please don't mistake it for embedding multiple forms in a single page. Later, I tried using just one form, at the root level where it always works without any exception.

Observations:

The button in the repeated grid was still out of shape(rectangular).

https://drive.google.com/open?id=1IG63BMVKed6AJOzlVczjZA3mgJgfl0I0

The Orbeon form is at root level here. It is not inside any custom tag. This is not part of the patch where I load a dummy form first inside a hidden <div> element.

Thanks,

Kush

On Thursday, March 8, 2018 at 4:23:12 PM UTC+5:30, [hidden email] wrote:

I am embedding an Orbeon form inside a JSP page. I've used a repeatable grid in this form. When I tried running this form, the button to insert a row above/below/remove was not working. When clicked nothing happened. When I run the form without embedding, it was working. Just for the embedding scenario, it fails. The popup menu does not appear. Also, the button square in shape ideally. But it looks kinda out of shape in the embedded form. Below are the screenshots.

<a href="https://lh3.googleusercontent.com/-ZOTLGGAOfsc/WqEWAwNxXdI/AAAAAAAACIk/cto_xmD2HaIMzV73CGsKOXQ90sVrPUwXQCLcBGAs/s1600/repeated-grid-button.png" style="margin-left:1em;margin-right:1em" target="_blank" rel="nofollow" onmousedown="this.href='https://lh3.googleusercontent.com/-ZOTLGGAOfsc/WqEWAwNxXdI/AAAAAAAACIk/cto_xmD2HaIMzV73CGsKOXQ90sVrPUwXQCLcBGAs/s1600/repeated-grid-button.png';return true;" onclick="this.href='https://lh3.googleusercontent.com/-ZOTLGGAOfsc/WqEWAwNxXdI/AAAAAAAACIk/cto_xmD2HaIMzV73CGsKOXQ90sVrPUwXQCLcBGAs/s1600/repeated-grid-button.png';return true;">

Alessandro Vernet

Re: Repeated Grid: Popup menu does not appear on button click

Administrator

Hi Kush,

Based on your video linked below, it seems like the menu is "shown" but it
might just be "out of sight", as the values for the `top` and `left` are way
too high. So, at least the JavaScript is running, which is good. Now, why
would it show it "out of sight"? That, I don't know.

https://drive.google.com/open?id=1ZkDTbBGe4w88N3YuQ7qVrQYdG9EPT18i

The code that positions the menu is in:

https://github.com/orbeon/orbeon-forms/blob/master/form-runner/js/src/main/scala/org/orbeon/xbl/Grid.scala

The code that positions the menu is in `moveMenu`. As you can see from the
code, it's positing the "menu element" based on the position of the
`.dropdown`, which contains button you click on:

Is `dropdownOffset.left/top` incorrect? Or does setting the offset with
jQuery set it to an incorrect value?
One way to sort this out would be to add `println` statement to that code to
see what goes wrong. For this, you need to build Orbeon Forms locally, so
you can make changes to the code. We have some information on how you can do
this on:

https://doc.orbeon.com/contributors/building-orbeon-forms.html

You'll let me know if this helps.

Alex

-----
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet
--
Sent from: http://discuss.orbeon.com/

--
You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].

--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet