PDA

View Full Version : [CLOSED] Callout: MaxHeight Issue



cwolcott
Dec 15, 2014, 1:46 PM
Should MaxHeight be allowed in callouts? The call out is drawn based on MaxHeight, but the contents are shown outside of the Callout.

http://forums.ext.net/attachment.php?attachmentid=17231&stc=1

I just noticed that if I use the attribute AutoScroll="true" then the contents are kept inside the Callout, but then the Callout arrow is not shown and the scrollbar screws with the content wrapping. See an old thread Callouts Missing Arrow (http://forums.ext.net/showthread.php?33241-CLOSED-Callouts-Missing-Arrow)



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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<script runat="server">
public const string Template = "<p>public class RequestsInfo {</p><p>&nbsp;&nbsp;&nbsp;public int RequestMonth { get; set; }</p><p>&nbsp;&nbsp;&nbsp;public int RequestYear { get; set; }</p><p>&nbsp;&nbsp;&nbsp;public int? Requests { get; set; }</p><p>}</p>";

</script>

<head runat="server">
<title>Callout - IE7 Maxheight Issue</title>
<style type="text/css">
.IssuesCalloutMine {
font-size: 11px;
line-height: 2px;
padding: 2px 9px 2px 4px;
}

.x-ie7 .IssuesCalloutMine p {
margin: 1em 0 0.5em 0;
}
</style>
</head>
<body>
<ext:ResourceManager runat="server" />
<form runat="server">
<ext:Panel
runat="server"
Frame="true"
Header="false"
Width="610"
AutoDataBind="true"
Layout="ColumnLayout">
<Defaults>
<ext:Parameter Name="Margin" Value="10" />
</Defaults>
<Items>
<ext:DisplayField runat="server" Height="100" />
</Items>
<Buttons>
<ext:Button runat="server" Text="Show Callout (No CSS)">
<Callouts>
<ext:Callout runat="server" Title="Code" UI="Danger" Html="<%# Template %>" Alignment="BottomLeft" MaxHeight="75" />
</Callouts>
</ext:Button>

<ext:Button runat="server" Text="Show Callout (My CSS)">
<Callouts>
<ext:Callout runat="server" Title="Code" UI="Danger" Html="<%# Template %>" Alignment="RightBottom" BodyCls="IssuesCalloutMine" MaxHeight="75" />
</Callouts>
</ext:Button>
</Buttons>
</ext:Panel>
</form>
</body>
</html>

Daniil
Dec 15, 2014, 5:24 PM
Hi Chris,

I've reproduced the issue and will try to find a solution. Maybe, not today already before going sleep, but I will continue tomorrow.

Daniil
Dec 16, 2014, 10:14 AM
I cannot overcome this problem yet, but I am still struggling.

Daniil
Dec 19, 2014, 6:22 AM
Please try this example.

Example

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

<!DOCTYPE html>

<html>
<script runat="server">
public const string Template = "<p>public class RequestsInfo {</p><p>&nbsp;&nbsp;&nbsp;public int RequestMonth { get; set; }</p><p>&nbsp;&nbsp;&nbsp;public int RequestYear { get; set; }</p><p>&nbsp;&nbsp;&nbsp;public int? Requests { get; set; }</p><p>}</p>";
</script>

<head runat="server">
<title>Callout - IE7 Maxheight Issue</title>
<style type="text/css">
.IssuesCalloutMine {
font-size: 11px;
line-height: 2px;
padding: 2px 9px 2px 4px;
}

.x-ie7 .IssuesCalloutMine p {
margin: 1em 0 0.5em 0;
}
</style>
</head>
<body>
<ext:ResourceManager runat="server" />
<form runat="server">
<ext:Panel
runat="server"
Frame="true"
Header="false"
Width="610"
AutoDataBind="true"
Layout="ColumnLayout">
<Defaults>
<ext:Parameter Name="Margin" Value="10" />
</Defaults>
<Items>
<ext:DisplayField runat="server" Height="100" />
</Items>
<Buttons>
<ext:Button runat="server" Text="Show Callout (No CSS)">
<Callouts>
<ext:Callout
runat="server"
Title="Code"
UI="Danger"
Html="<%# Template %>"
Alignment="BottomLeft"
MaxHeight="75"
BodyStyle="overflow-y:scroll;height:45px;"
Draggable="false" />
</Callouts>
</ext:Button>

<ext:Button runat="server" Text="Show Callout (My CSS)">
<Callouts>
<ext:Callout
runat="server"
Title="Code"
UI="Danger"
Html="<%# Template %>"
Alignment="RightBottom"
BodyCls="IssuesCalloutMine"
MaxHeight="75"
BodyStyle="overflow-y:scroll;height:45px;"
Draggable="false" />
</Callouts>
</ext:Button>
</Buttons>
</ext:Panel>
</form>
</body>
</html>

cwolcott
Dec 19, 2014, 12:57 PM
Got it. Please close the thred.

I add 1em to the right margin for IE7 CSS because the text was hiding behind the scrollbar.


.x-ie7 .IssuesCalloutMine p {
margin: 1em 1em 0.5em 0;
}