Allow expansion of dropdown menu inside a row of Expandable avoid collapsing it

So basically I have List of records where each row consists of a Section expandable web pattern.
Inside each row I have a dropdown menu with multiple items.

So what happens here is that when I click on the dropdown menu , it expands but so does the section expandable row.

Its under in the oml

UIFlow1->webscreen1



How do I avoid this ?




ZipButton.oml

Hi Craig,

there's a possible solution, but you should maybe read up on unwanted side effects, it feels slightly hacky to me, but it seems to work on a simple test screen.  See attached oml.

So what you do is enclose your dropdown in a container, and give the container this inline onclick event

I didn't use the exact same widgets as you did, I couldn't find them quickly, so let us know if it also works for your screen.

Dorine

QDTDropdownOnExpandable.oml

Hi Dorine ,

I too did try this , but if I add an event.stopPropagation() , the dropdown doesn't expand unfortunately.


Regards Craig

Ok, so as it works in my test, can you see any differences ?

Or can you share your oml where it doesn't work ?

ZipButton.oml

well,

there's too much broken dependencies for me to implement it, but if this is what you have tested, you are not doing what I was proposing, so that might explain it.

I'll leave the find-the-difference exercise up to you ;-)

Dorine

Ok,

i was able to strip out all the unavailable references from your oml, and see same as you see, for the Dropdown Menu, it doesn't work as it blocks the menu from expanding.

I have no other ideas for this right now,

Dorine

To further elaborate (and this is the unwanted side effects i was talking about earlier), if other parts of your page (such as the javascripts behind the dropdown menu's) rely on events finding their way all the way op to a higher level in the DOM to work properly, doing the event.stopPropagation() breaks that code.

this is a good article about that.

Dorine


mvp_badge
MVP

Hello Craig,

Hope you're doing well.

You're placing the Dropdown in the Title placeholder of the Section Expandable. Do you want to have a Dropdown there?

Maybe you should move it to the Content placeholder instead.


Kind regards,

Rui Barradas

Hello Rui ,

I need it to  be there in the title as , in my title will be where all main data goes and inside the content there will be extra information displayed after I expand the Section Expandable.


Regards Craig

Hi Craig,

there's a possible solution, but you should maybe read up on unwanted side effects, it feels slightly hacky to me, but it seems to work on a simple test screen.  See attached oml.

So what you do is enclose your dropdown in a container, and give the container this inline onclick event

I didn't use the exact same widgets as you did, I couldn't find them quickly, so let us know if it also works for your screen.

Dorine

QDTDropdownOnExpandable.oml

Hi Dorine ,

I too did try this , but if I add an event.stopPropagation() , the dropdown doesn't expand unfortunately.


Regards Craig

Ok, so as it works in my test, can you see any differences ?

Or can you share your oml where it doesn't work ?

ZipButton.oml

well,

there's too much broken dependencies for me to implement it, but if this is what you have tested, you are not doing what I was proposing, so that might explain it.

I'll leave the find-the-difference exercise up to you ;-)

Dorine

Ok,

i was able to strip out all the unavailable references from your oml, and see same as you see, for the Dropdown Menu, it doesn't work as it blocks the menu from expanding.

I have no other ideas for this right now,

Dorine

To further elaborate (and this is the unwanted side effects i was talking about earlier), if other parts of your page (such as the javascripts behind the dropdown menu's) rely on events finding their way all the way op to a higher level in the DOM to work properly, doing the event.stopPropagation() breaks that code.

this is a good article about that.

Dorine


@Dorine Boudry  You were right , you had use event.stopPropagation()  but it has to be appended to the very first element in the dropdown

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.