generally an <object> tag creates a window in front the browser window, so no html can be in front (flash has some workarounds). in this case you need to create a new window infront of the object. you can just use an <iframe> to do this. so when you display
a dropdown, you create, size and position and iframe in the correct spot, then render the dropdown or modal html and css in the iframe. delegate events back up to the parent frame.
hint: in the old days, in IE a <select> was its own window and the same technique was required. you can still find these examples.
another less elegant technique is to hide the object when the dropdown or modal are required.
According to your description, as far as I know, if you want to fixed the element at the bottom of the screen, please set the element position value to absolute. Also add !important.
Also I hope you could post all code you have done for us to test, this will better help you solve the problem.
Best Regards,
Eric Du
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
I don't know how much this will help but here is all of the code:
I have a Master Page that houses the menu which hides behind the WinFormsDocumentView in the content below. The bootstrap modal popups also hide behind the WinFormsDocumentView. Is there a way to just tell the browser to put everything on top the WinFormsDocumentView
without a complete redesign of the page?
Contributor
2853 Points
1372 Posts
Z-Index Bootstrap Modal <object> layering problem
Feb 01, 2017 05:51 PM|adamturner34|LINK
Hello all,
I have an object element that's sitting on top of everything. My dropdown menu's hide behind it. My bootstrap modal's hide behind it.
I've spent more than 2 days now scouring the internet changing z-indexes and positions with no luck.
Is there an easy fix to just place the <object> behind everything?
Appreciated any feedback,
Adam Turner
All-Star
52101 Points
23237 Posts
Re: Z-Index Bootstrap Modal <object> layering problem
Feb 01, 2017 06:07 PM|mgebhard|LINK
It's helpful if you post source code and describe the steps you've tried so far. According to MDN z-index is not a property of the object element.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object
According to flash blogs/forums add the following param and set the z-index of the elements you want on top of the object.
https://css-tricks.com/snippets/html/keep-flash-behind-other-elements/
All-Star
57864 Points
15491 Posts
Re: Z-Index Bootstrap Modal <object> layering problem
Feb 01, 2017 10:39 PM|bruce (sqlwork.com)|LINK
generally an <object> tag creates a window in front the browser window, so no html can be in front (flash has some workarounds). in this case you need to create a new window infront of the object. you can just use an <iframe> to do this. so when you display a dropdown, you create, size and position and iframe in the correct spot, then render the dropdown or modal html and css in the iframe. delegate events back up to the parent frame.
hint: in the old days, in IE a <select> was its own window and the same technique was required. you can still find these examples.
another less elegant technique is to hide the object when the dropdown or modal are required.
Contributor
6730 Points
2715 Posts
Re: Z-Index Bootstrap Modal <object> layering problem
Feb 02, 2017 07:17 AM|Eric Du|LINK
Hi adamturner34,
According to your description, as far as I know, if you want to fixed the element at the bottom of the screen, please set the element position value to absolute. Also add !important.
code:
Also I hope you could post all code you have done for us to test, this will better help you solve the problem.
Best Regards,
Eric Du
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Contributor
2853 Points
1372 Posts
Re: Z-Index Bootstrap Modal <object> layering problem
Feb 02, 2017 02:47 PM|adamturner34|LINK
I don't know how much this will help but here is all of the code:
I have a Master Page that houses the menu which hides behind the WinFormsDocumentView in the content below. The bootstrap modal popups also hide behind the WinFormsDocumentView. Is there a way to just tell the browser to put everything on top the WinFormsDocumentView without a complete redesign of the page?
Here is the content:
Contributor
2853 Points
1372 Posts
Re: Z-Index Bootstrap Modal <object> layering problem
Feb 02, 2017 03:31 PM|adamturner34|LINK
Another catch is that it has to be IE11 compatible and optimistically cross-browser compatible.
All-Star
57864 Points
15491 Posts
Re: Z-Index Bootstrap Modal <object> layering problem
Feb 02, 2017 09:24 PM|bruce (sqlwork.com)|LINK
in that case, you need to replace the <object> with a html/javascript solution.
note: IE Edge will not support your object tag. to get to work with IE11 you will need to update the client registry settings:
https://technet.microsoft.com/en-us/itpro/internet-explorer/ie11-deploy-guide/net-framework-problems-with-ie11
Contributor
2853 Points
1372 Posts
Re: Z-Index Bootstrap Modal <object> layering problem
Feb 03, 2017 04:20 PM|adamturner34|LINK
I just ended up hiding and showing for now: