Images for ext.net tabpanel closable showing faint image

  1. #1

    Images for ext.net tabpanel closable showing faint image

    Version 4.8.1, VS2015 using CRISP Theme
    Using a dynamic closable TabPanel

    The rendering is showing a faint image on top of the close icon...Refer Image attached
    The Browser is Chrome (Version 74.0.3729.169 (Official Build) (64-bit))Click image for larger version. 

Name:	ExtNet_TabPanelFaintImage.png 
Views:	2 
Size:	25.4 KB 
ID:	25266
    It is the same on Microsoft edge

    Other Themes do not show the Image

    I noted that I can get at the faint Image as ".x-tab-close-btn" and I have set the color to Red to make it clearer.
    I have replicated this using the EXT.Net Demo "TabPanel with TabCloseMenu plug in"

    It does not appear if the Tabs are not set to closable ...

    Sample Page...
    [

    RM_TestRec1.aspx
    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="RM_TestRec1.aspx.vb" Inherits="management_administration_RM_TestRec1" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    <html>
    <head runat="server">
    <title>Scrollable Tabs with TabScrollerMenu Plugin - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />

    <%--used to highlight the faint image --%>
    <style>
    .x-tab-close-btn {
    font-size: 14px !important;
    color: red;
    background-color: red;
    }
    </style>
    </head>
    <body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <h1>Scrollable Tabs with TabScrollerMenu Plugin</h1>
    <ext:TabPanel ID="TabPanel1" runat="server" Height="100">
    <Items>
    <ext:Panel runat="server" Title="Tab One" Closable="true" />
    <ext:Panel runat="server" Title="Tab Two" Closable="true" />
    <ext:Panel runat="server" Title="Tab Three" Closable="true" />
    <ext:Panel runat="server" Title="Tab Four" Closable="true" />
    <ext:Panel runat="server" Title="Tab Five" Closable="true" />
    </Items>
    </ext:TabPanel>
    </form>
    </body>
    </html>

    RM_TestRec1.aspx.vb
    Partial Class management_administration_RM_TestRec1
    Inherits System.Web.UI.Page

    End Class

    ]
  2. #2
    Thanks for the report. I wasn't able to reproduce the issue on my first try, but a couple of us will take another look and see if we figure out how to reproduce.

    When you view your sample locally, please open the browser developer tools and take a look at the Network tab. Refresh the page. Do any of the requests fail?
    Geoffrey McGill
    Founder & CEO
  3. #3

    Refresh page in Developer tools...

    Thanks Geoffrey,

    results of refreshing Page in Developer tools === Network

    examples.css produces 404 (2 times)

    Screen Captures attached.

    JohnB
    Attached Thumbnails TabPanel_FaintImage_Network_20190608_0721PM.png  
  4. #4
    We are now able to reproduce the issue locally. We are investigating.
    Geoffrey McGill
    Founder & CEO
  5. #5
    We took a look at this and we're pretty sure this is not a bug. Do you have something like the following in the application .css file?

    body {
        font-size: 14px !important;
    }
    We think somewhere within your app you are forcing a font-size globally which is affecting this <ext:TabPanel> component. Or somewhere somehow the font-size is being overriden in you applications custom .css.

    The faint markings are the bottom of two characters le, which are the last two characters of the word closable, which is a text label used for accessibility browsing:

    https://docs.sencha.com/extjs/6.7.0/...js.html#line56

    Using your original code sample, you can override accessibility text by adding CloseText="" to the <ext:Panel> config. The following sample demonstrates:

    <ext:TabPanel ID="TabPanel1" runat="server" Height="100">
        <Items>
            <ext:Panel runat="server" Title="Tab One" Closable="true" />
            <ext:Panel runat="server" Title="Tab Two" Closable="true" CloseText="" />
            <ext:Panel runat="server" Title="Tab Three" Closable="true" />
            <ext:Panel runat="server" Title="Tab Four" Closable="true" />
            <ext:Panel runat="server" Title="Tab Five" Closable="true" />
        </Items>
    </ext:TabPanel>
    The CloseText property will not show up in intellisense, but if you add the config in markup it will work.

    In the code sample you provided to reproduce the issue, the .x-tab-close-btn class is being purposely overriden. Overriding an Ext class may produce unexpected results, so it's generally not recommended. We can also fix the issue in your sample by overriding it back to the original hidden font-size, for example:

    <style>
        .x-tab-close-btn {
            font-size: 14px !important;
            font-size: 0 !important;
            color: red;
            background-color: red;
        }
    </style>
    We were also able to reproduce the same marking using other Themes, not just Crisp, so this isn't just specific to Crisp.

    Hope this helps.
    Last edited by geoffrey.mcgill; Jun 12, 2019 at 8:24 PM.
  6. #6

    Now Fixed...

    Thanks Geoffrey,

    Just got a chance to check your comments....
    I added to the page :
    <style>
    .x-tab-close-btn {
    font-size: 14px !important;
    font-size: 0 !important;
    color: red;
    background-color: red;
    }
    </style>

    ..This worked and eliminated the appearance of the faint image.

    I did have :
    body {
    font-size: 8px;
    background-color: #284051;
    font-family: "Trebuchet MS",sans-serif;
    }
    on the page...
    But I initially commented that out and seem to make no difference (perhaps caching but I did check on Chrome & Edge) ...

    Very much appreciate your help
    JohnB

Similar Threads

  1. New Ext.NET endpoint to export Charts to images
    By Daniil in forum Examples and Extras
    Replies: 0
    Last Post: Feb 28, 2014, 5:08 AM
  2. CSS/Backround Images not showing?
    By Tbaseflug in forum 1.x Help
    Replies: 1
    Last Post: Nov 04, 2012, 10:49 PM
  3. Replies: 0
    Last Post: Jun 20, 2011, 5:13 PM
  4. Replies: 2
    Last Post: Apr 23, 2010, 9:02 AM
  5. [CLOSED] TabPanel and Closable
    By Timothy in forum 1.x Premium Help
    Replies: 2
    Last Post: Oct 07, 2008, 5:11 PM

Tags for this Thread

Posting Permissions