[CLOSED] Callout: IE7 Line-Height

  1. #1

    [CLOSED] Callout: IE7 Line-Height

    I don't believe this is a Ext.NET issue at all, but looking for a suggestion since 19% of our hits are still coming from IE7.

    I am using ext:Callout with the UI attribute to show form issues. It looks good unless IE7 is used. The contents of the callout are separate <p></p> for each issue. The first button shows the callout without any BodyCls. The second button shows the callout with my BodyCls.

    From IE8 - IE11, Firefox and Chrome I like the look of the BodyCls (Tight and compact), but any thought for IE7.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <script runat="server">
        public const string Template = "<p><b>Property 1:</b> Description for property 1</p><p><b>Property 2:</b> Description for property 2</p><p><b>Property 3:</b> Description for property 3</p>";
    
    </script>
    
    <head runat="server">
        <title>Callout - EI7 CSS Issue</title>
        <style type="text/css">
            .IssuesCalloutMine {
                font-size: 11px;
                line-height: 2px;
                padding: 2px 9px 2px 4px;
            }
        </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:Button runat="server" Text="Show Callout (No CSS)">
                        <Callouts>
                            <ext:Callout runat="server" Title="Form Issues" UI="Danger" Html="<%# Template %>" Alignment="BottomLeft" />
                        </Callouts>
                    </ext:Button>
                    <ext:Button runat="server" Text="Show Callout (My CSS)">
                        <Callouts>
                            <ext:Callout runat="server" Title="Form Issues" UI="Danger" Html="<%# Template %>" Alignment="BottomLeft" BodyCls="IssuesCalloutMine" />
                        </Callouts>
                    </ext:Button>
                </Items>
            </ext:Panel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Dec 15, 2014 at 3:46 PM. Reason: [CLOSED]
  2. #2
    Hi Chris,

    I can suggest this.
    .IssuesCalloutMine {
        padding: 2px 9px 2px 4px;
        font-size: 11px;
        line-height: 2px;
    }
    
    .x-ie7 .IssuesCalloutMine p {
        margin: 1em 0 0.5em 0;
    }
  3. #3
    Please close the thread. That answered my question. It took me a little bit to get it working because I actually had the following attribute defined in my CSS

    overflow-y: scroll;
    based on work done in the thread Callouts Missing Arrow.

    It was causing the text to be hidden behind the scrollbar. I removed the overflow because I did not need scrolling in this callout.

Similar Threads

  1. [CLOSED] Line chart getting shrink, due to legend box Height
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: May 08, 2014, 9:12 AM
  2. [CLOSED] Dotted line renders as solid line in line chart image
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 01, 2014, 5:28 PM
  3. Replies: 2
    Last Post: Apr 15, 2013, 7:46 AM
  4. Replies: 2
    Last Post: Mar 16, 2012, 7:09 PM
  5. [FIXED] [1.2] Minor Line-height issue
    By cwolcott in forum Bugs
    Replies: 8
    Last Post: Dec 29, 2011, 6:55 PM

Posting Permissions