PDA

View Full Version : [CLOSED] Callouts - Missing Arrow



cwolcott
Apr 25, 2014, 1:20 PM
Is there a reason that the Callout doesn't display it's arrow when the autoScroll is set to true?
It the example below AutoScroll = true. The arrow, defined as RightTop, is not shown.



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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<script runat="server">

protected void CreateCallout(object sender, DirectEventArgs e)
{
X.Msg.Callout(FormPanel, new Callout
{
Title ="Test Callout",
Icon = Ext.Net.Icon.BookOpen,
Html = "This is a test to show that the arrow is missing when the attribute AutoScroll is set to TRUE.",
Alignment = AnchorPoint.RightTop,
CloseAction = CloseAction.Destroy,
UI = Ext.Net.UI.Warning,
CloseOnOutsideClick = true,
Draggable = true,
Width = 200,
AutoScroll = true
}).Show(true);
}
</script>
<head runat="server">
<title>Callout - Missing Arrow</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Window ID="Callout01" runat="server" Width="500" Title="Window Border & Fit Layout" Layout="FitLayout"
CloseAction="Destroy">
<Items>
<ext:FormPanel ID="FormPanel" runat="server" ClientIDMode="Static" BodyPadding="8"
Region="Center">
<Items>
<ext:Label runat="server" Text="Select a category the press the 'Initiate Request' button, please." />
<ext:Container runat="server" Html="<hr/>" MarginSpec="0 0 5 0" />
<ext:RadioGroup ID="CategoryRadioGroup" runat="server" ClientIDMode="Static" ColumnsNumber="2" Vertical="true" AllowBlank="false">
<Items>
<ext:Radio runat="server" Name="Categories" BoxLabel="ABC" />
<ext:Radio runat="server" Name="Categories" BoxLabel="DEF" />
<ext:Radio runat="server" Name="Categories" BoxLabel="XYZ" />
</Items>
</ext:RadioGroup>
</Items>
</ext:FormPanel>
</Items>
<Buttons>
<ext:Button ID="CalloutBtn" runat="server" Text="Callout">
<DirectEvents>
<Click OnEvent="CreateCallout" />
</DirectEvents>
</ext:Button>
<ext:Button ID="CloseBtn" runat="server" Text="Close" Icon="BulletGo" OnClientClick="#{Callout01}.close();" />
</Buttons>
</ext:Window>
</body>
</html>

Vladimir
Apr 25, 2014, 1:39 PM
AutoScroll sets overflow property to callout element which prevents to show any callout sub elements are displayed outside callout (arrow is rendered inside callout but its position has negative offset)

Vladimir
Apr 25, 2014, 1:50 PM
I can suggest the following workaround


BodyStyle = "overflow-y:scroll;height:50px;"


and set Draggable to false otherwise scrolling will not works. Or set callout header as draggable element only


DraggableConfig = new ComponentDragger {
Delegate = "h3.x-callout-header"
},

cwolcott
Apr 25, 2014, 2:44 PM
Thanks. I have added the suggestions and I like the scrollbar inside the callout rather than outside the entire control and only being able to drag the callout via the header is nice. But did you expect the arrow to be show?

10221


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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<script runat="server">

protected void CreateCallout(object sender, DirectEventArgs e)
{
X.Msg.Callout(FormPanel, new Callout
{
Title = "Test Callout",
Icon = Ext.Net.Icon.BookOpen,
Html = "This is a test to show that the arrow is missing when the attribute AutoScroll is set to TRUE.",
Alignment = AnchorPoint.RightTop,
CloseAction = CloseAction.Destroy,
UI = Ext.Net.UI.Warning,
CloseOnOutsideClick = true,
BodyStyle = "overflow-y: scroll; height: 50px;",
Width = 200,
AutoScroll = true,
Draggable = true,
DraggableConfig = new ComponentDragger
{
Delegate = "h3.x-callout-header"
},
}).Show(true);
}
</script>
<head runat="server">
<title>Callout - Missing Arrow</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Window ID="Callout01" runat="server" Width="500" Title="Window Border & Fit Layout" Layout="FitLayout"
CloseAction="Destroy">
<Items>
<ext:FormPanel ID="FormPanel" runat="server" ClientIDMode="Static" BodyPadding="8"
Region="Center">
<Items>
<ext:Label runat="server" Text="Select a category the press the 'Initiate Request' button, please." />
<ext:Container runat="server" Html="<hr/>" MarginSpec="0 0 5 0" />
<ext:RadioGroup ID="CategoryRadioGroup" runat="server" ClientIDMode="Static" ColumnsNumber="2" Vertical="true" AllowBlank="false">
<Items>
<ext:Radio runat="server" Name="Categories" BoxLabel="ABC" />
<ext:Radio runat="server" Name="Categories" BoxLabel="DEF" />
<ext:Radio runat="server" Name="Categories" BoxLabel="XYZ" />
</Items>
</ext:RadioGroup>
</Items>
</ext:FormPanel>
</Items>
<Buttons>
<ext:Button ID="CalloutBtn" runat="server" Text="Callout">
<DirectEvents>
<Click OnEvent="CreateCallout" />
</DirectEvents>
</ext:Button>
<ext:Button ID="CloseBtn" runat="server" Text="Close" Icon="BulletGo" OnClientClick="#{Callout01}.close();" />
</Buttons>
</ext:Window>
</body>
</html>

Vladimir
Apr 25, 2014, 3:05 PM
Just remove AutoScroll property from callout

cwolcott
Apr 25, 2014, 4:47 PM
Perfect. Sorry I missed that. Thank you for the help. I really like the look of the Callout. Please close the thread.