PDA

View Full Version : [CLOSED] Callout: IE7 Line-Height



cwolcott
Dec 14, 2014, 11:25 PM
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>

Daniil
Dec 15, 2014, 5:28 AM
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;
}

cwolcott
Dec 15, 2014, 1:44 PM
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 (http://forums.ext.net/showthread.php?33241-CLOSED-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.