What's New?

[CLOSED] Callout: MaxHeight Issue

  1. #1
    Dec 15, 2014, 1:46 PM

    [CLOSED] Callout: MaxHeight Issue

    Should MaxHeight be allowed in callouts? The call out is drawn based on MaxHeight, but the contents are shown outside of the Callout.



    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

    <%@ 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>
    Attached Thumbnails Click image for larger version.  Name: Callout.MasHeight.PNG  Views: 28  Size: 5.0 KB  ID: 17231  
    Last edited by Daniil; Dec 19, 2014 at 1:04 PM. Reason: [CLOSED]
  2. #2
    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.
  3. #3
    Dec 16, 2014, 10:14 AM
    I cannot overcome this problem yet, but I am still struggling.
    Last edited by Daniil; Dec 19, 2014 at 6:13 AM.
  4. #4
    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>
  5. #5
    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;
        }

Similar Threads

  1. [CLOSED] Callout: IE7 Line-Height
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 15, 2014, 1:44 PM
  2. [CLOSED] [#608] Callout: ShowDelay
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 13, 2014, 8:32 PM
  3. [CLOSED] Bug on the callout component
    By Akpenob in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 06, 2014, 8:00 AM
  4. AutoHeight with MaxHeight
    By huzzy143 in forum 1.x Help
    Replies: 4
    Last Post: Apr 11, 2012, 1:30 PM
  5. [CLOSED] Combine AutoHeight with MaxHeight and AutoScroll in ext:Window
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 20, 2011, 9:42 AM

Posting Permissions