View Full Version : Callout shows Behind Window

Oct 08, 2020, 4:43 AM
see attached.
Callout shows Behind Window

to test, press the click #1 button. then on the window, press click me.

<%@ Page Language="C#" %>

<!DOCTYPE html>

<head id="Head2" runat="server">


<ext:ResourceManager ID="ResourceManager2" runat="server" Theme="NeptuneTouch" />

<ext:Viewport ID="Viewport1" runat="server" Layout="VBoxLayout">
<ext:VBoxLayoutConfig Align="Stretch" />

<ext:Button runat="server" Text="click #1">
<Click Handler="App.winme.show()" />


Hidden="true" >
<ext:Button ID="ttttwer" runat="server" Text="click me">
<Click Handler="App.Callout1.show();" />
<ext:Checkbox ID="aaaa" BoxLabel="AAAA" runat="server" Note="SOME AAAA" Flex="1" />
<ext:Checkbox ID="bbbb" BoxLabel="BBBB" runat="server" Note="SOME BBBB" Flex="1" />
<ext:Checkbox ID="cccc" BoxLabel="CCCC" runat="server" Note="SOME CCCC" Flex="1" />
<ext:TextField ID="twerwer"
FieldLabel=" Comment"
Note="Some Note"
<ext:Callout runat="server" ID="Callout1" Title="Save Reminder" Trigger="Manual" Alignment="Right" HideDelay="3" >
<ext:Label runat="server" Text="Don't forget to save your changes" />


Oct 08, 2020, 4:46 AM
this bug is from 2015

Can we fix it pls?? i used the work around.

Oct 08, 2020, 7:37 PM
Hello @Z! Thanks for the heads up, I was about to link you to the already open issue.

The z-index management becomes subject to this kind of edge case when you have something "on top" over something else "on top" (or as in the case, "floating"). They compete for the foreground as both are technically floating windows. But there may be an issue with z-index hierarchy in callouts when instantiated within windows.

Please make sure to subscribe to the forum thread you pointed so you receive an update notification once this issue is fixed.

Oct 12, 2020, 7:26 PM
Hello again @Z!

I have just gave this a try to better identify the issue and I noticed the callout was not being displayed behind the window at the first try. It goes behind if I click the button, then the window. So it seems the z-index layout engine is working well.

So then, to ensure it won't go behind the window, just set AlwaysOnTop="True" and the callout will stand in front without any CSS overrides.

Let us know if you still can't make this work without overrides on either javascript or CSS, we may have missed something along the lines to reproduce the issue!