What's New?

[FIXED] [1.2] Minor Line-height issue

  1. #1
    Dec 29, 2011, 4:09 PM

    [FIXED] [1.2] Minor Line-height issue

    When I use ext:StatusBar inside TopBar and assign Icon="Lock" the bottom pixels of the lock are not shown. The reason is the line-height in the controlling style is off by one. .x-toolbar div.xtb-text defines the line-height: 16px; . I assign my statusbar Cls to my own css and overrode the property and everything looks fine. This occurred in IE8 and Chrome.
    Last edited by Daniil; Dec 29, 2011 at 6:55 PM. Reason: [FIXED] [1.2]
  2. #2
    Dec 29, 2011, 4:49 PM
    Hi,

    Thanks for the report.

    What is the CSS you applied to fix?
  3. #3
    Dec 29, 2011, 5:26 PM
    Note: I would love to cut and paste my code, but we develop on a classified network and I can not bring the code back to the Internet side. So currently I have to retype everything on the unclassified side, until we stand up an unclassified testing environment.

    When I inspected the statusbar element via the Chrome Browser it showed that the style div.xtb-text had a line-height of 16px. Having a line-height of 16 worked for a lot of icons except the "Lock" icon. The bottom row of pixels was cut off. I also wanted the background-color to change so the user would have some eye-candy that this was reference data only. So I applied the following:

    <style type="text/css">

   .statusBarReadOnly div.xtb-text
   {
      line-height: 18px;
   }
   .statusBarReadOnly .x-toolbar-ct
   {
      backgground-color: #FFD1D1;
   }
...
<ext:Panel runtat="server" AutoScroll="true">
   <TopBar>
      <ext:StatusBar runat="server" ID="sbarStatusScenario" Text="<b>Read Only:</b> Data Source (I-DEV)" Icon="Lock" Cls="statusBarReadOnly" />
   </TopBar>
   <Items>
   ...
   </Items>
</ext:Panel>
    Last edited by cwolcott; Dec 29, 2011 at 5:28 PM. Reason: grammer
  4. #4
    Dec 29, 2011, 5:35 PM
    It seems that 17px is enough to fix, what do you think?

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>

    <style type="text/css">
        .x-toolbar div.xtb-text.icon-lock {
            line-height: 17px;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Panel runat="server" Width="300">
            <TopBar>
                <ext:StatusBar runat="server" Icon="Lock" />
            </TopBar>
        </ext:Panel>
    </form>
</body>
</html>
    We will consider to add the fix in SVN.
  5. #5
    Dec 29, 2011, 5:42 PM
    Zoom into the icon area. If you only go with 17px then the background-color doesn't wrap around (e.g., show below) the icon. If you go with 18px there is atleast one row of background color pixels below the Lock icon.

    I assume there are other icons that might have this problem so I assume you will change .x-toolbar div.xtb-text and not add a new style for .x-toolbar div.xtb-text.icon-lock.
    Last edited by cwolcott; Dec 29, 2011 at 5:48 PM.
  6. #6
    Dec 29, 2011, 6:06 PM
    I don't think the background color must wrap around an icon. I mean it's your desire, not a bug.

    At least, it looks not wrapped with Accept icon.

    We would prefer to don't change it for all icons, because it will change existing pages, when developers will update.

    By the way, I've found another fix without "line-height".
    .x-toolbar div.xtb-text.icon-lock {
    background-position-y: 1px;
}
    I think it's better.
  7. #7
    Dec 29, 2011, 6:16 PM
    Agreed. I like the final solution of starting this icon at 1px (background-position-y: 1px;).

    Thanks ...
  8. #8
    Dec 29, 2011, 6:20 PM
    Here is the cross-browser solution:
    .x-toolbar div.xtb-text.icon-lock {
    background-position: 3px 1px;
}
    "background-position-y" doesn't work in FireFox and, I guess, in Chrome.
  9. #9
    Dec 29, 2011, 6:55 PM
    The fix for Lock icon has been added to SVN (revision #3797) and will be publicly available in the upcoming 1.3 release.

    Thanks again for the report!

Similar Threads

  1. [CLOSED] Minor issue on multi rowspan grid
    By cleve in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 29, 2012, 6:53 AM
  2. [FIXED] Minor issue on forum pages
    By plykkegaard in forum Bugs
    Replies: 24
    Last Post: Aug 09, 2012, 4:41 PM
  3. [CLOSED] TextArea Height Issue
    By AABR in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 02, 2012, 6:00 PM
  4. [CLOSED] Ext.net v2 Beta release: Label top line height appears don´t works.
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 16, 2012, 7:09 PM
  5. [CLOSED] HTML Editor is showing Scroll bar in IE 9, even when the Width and Height is fixed
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 07, 2011, 7:13 AM

Tags for this Thread

Posting Permissions