[CLOSED] TabPanel with "Plain" configuration, not applying Tab style of Triton theme?

  1. #1

    [CLOSED] TabPanel with "Plain" configuration, not applying Tab style of Triton theme?

    Hi, I believe there may be an issue with the rendering the active-tab shading for TabPanels configured with Plain attribute = true.

    Here is the example of a TabPanel with its Plain setting turned on:

    <%@ Page Language="C#" %>
    
    <script runat="server">
        public static string TEST_HTML_1 = @"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas gravida nibh, quis porttitor felis
                        venenatis id. Nam sodales mollis quam eget venenatis. Aliquam metus lorem, tincidunt ut egestas imperdiet, convallis
                        lacinia tortor. Mauris accumsan, nisl et sodales tristique, massa dui placerat erat, at venenatis tortor libero nec
                        tortor. Pellentesque quis elit ac dolor commodo tincidunt. Curabitur lorem eros, tincidunt quis viverra id, lacinia
                        sed nisl. Quisque viverra ante eu nisl consectetur hendrerit.";
    
        public static string TEST_HTML_2 = @"<b>This tab is scrollable.</b><br /><br />
                        Aenean sit amet quam ipsum. Nam aliquet ullamcorper lorem, vel commodo neque auctor quis. Vivamus ac purus in
                        tortor tempor viverra eget a magna. Nunc accumsan dolor porta mauris consequat nec mollis felis mattis. Nunc ligula nisl,
                        tempor ut pellentesque et, viverra eget tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales
                        rhoncus massa, sed lobortis risus euismod at. Suspendisse dictum, lectus vitae aliquam egestas, quam diam consequat augue,
                        non porta odio ante a dui. Vivamus lacus mi, ultrices sed feugiat elementum, ultrices et lectus. Donec aliquet hendrerit magna,
                        in venenatis ante faucibus ut. Duis non neque magna. Quisque iaculis luctus nibh, id pellentesque lorem egestas non. Phasellus
                        id risus eget felis auctor scelerisque. Fusce porttitor tortor eget magna pretium viverra. Sed tempor vulputate felis aliquam
                        scelerisque. Quisque eget libero non lectus tempus varius eu a tortor.
                        <br /><br />
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas gravida nibh, quis porttitor felis
                        venenatis id. Nam sodales mollis quam eget venenatis. Aliquam metus lorem, tincidunt ut egestas imperdiet, convallis
                        lacinia tortor. Mauris accumsan, nisl et sodales tristique, massa dui placerat erat, at venenatis tortor libero nec
                        tortor. Pellentesque quis elit ac dolor commodo tincidunt. Curabitur lorem eros, tincidunt quis viverra id, lacinia
                        sed nisl. Quisque viverra ante eu nisl consectetur hendrerit.";
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Plain TabPanel - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <ext:Viewport runat="server" MarginSpec="0 0 10 0">
            <LayoutConfig>
                <ext:VBoxLayoutConfig Align="Center" Pack="Center" />
            </LayoutConfig>
            <Items>
                <ext:TabPanel
                    runat="server"
                    Width="400"
                    Height="295"
                    MarginSpec="0 0 20 0"
                    Plain="true">
                    <Defaults>
                        <ext:Parameter Name="bodyPadding" Value="10" Mode="Raw" />
                        <ext:Parameter Name="autoScroll" Value="true" Mode="Raw" />
                    </Defaults>
                    <Items>
                        <ext:Panel runat="server" Title="Tab1">
                            <Items>
                                <ext:Button runat="server" Text="some buttons" />
                                <ext:Button runat="server" Text="some buttons" />
                                <ext:Button runat="server" Text="some buttons" />
                                <ext:Button runat="server" Text="some buttons" />
                                <ext:Button runat="server" Text="some buttons" />
                            </Items>
                        </ext:Panel>
                        <ext:Panel
                            runat="server"
                            Title="Active Tab"
                            Html="<%# TEST_HTML_1  %>"
                            AutoDataBind="true" />
    
                        <ext:Panel
                            runat="server"
                            Title="Inactive Tab"
                            Html="<%# TEST_HTML_2  %>"
                            AutoDataBind="true" />
    
                        <ext:Panel runat="server" Title="Disabled Tab" Disabled="true" />
                    </Items>
                </ext:TabPanel>
            </Items>
        </ext:Viewport>
    </body>
    </html>
    Here is the Triton theme that we've slightly adjusted for our needs. From my understanding, all of the styles meant to take effect for activated tabs on a "plain" tab toolbar are supposed to be some sort of gray, so they stand out on the white/plain-colored tabs toolbar

    .x-tab-bar-plain .x-tab.x-tab-active.x-tab-default .x-tab-inner-default {
    color: #404040;
    }

    .x-tab-bar-plain .x-tab.x-tab-active.x-tab-default .x-tab-icon-el {
    color: #404040;
    }

    .x-keyboard-mode .x-tab-bar-plain .x-tab-focus.x-tab-active.x-tab-default .x-tab-inner-default {
    color: #404040;
    }

    .x-keyboard-mode .x-tab-bar-plain .x-tab-focus.x-tab-active.x-tab-default .x-tab-icon-el {
    color: #404040;
    }

    .x-tab-bar-plain .x-tab.x-tab-disabled.x-tab-default .x-tab-inner-default {
    color: #606060;
    }

    I'm having difficulty uploading the theme to the forum, so I've pasted it inline above. I think the attachments option only lets me upload images?
    Last edited by fabricio.murta; Oct 05, 2018 at 8:56 PM.
  2. #2
    Hi Ext.Net just checking on this. Are you seeing the same on your side?
    This is very odd, because the browser's dev tools show the active tab (on a plain tab bar) has a dark grey CSS rule that ought to be winning out among all the CSS. However it's not grey, so it seems like something in the Ext.NET tab bar component is overwriting this. Can you confirm and advise? Thanks
  3. #3
    Hello @Caleb!

    Just checked your example, but I'm not really seeing what's wrong with it... At least as per documentation on Tab Panel's Plain setting, what it should do is just remove the background (color) from the tab bar, so it would inherit whatever is behind the tab bar, which is gray by default. But if within a window or panel (which background is white on Triton theme), it would become white, and so on.

    It should not affect the colors of the selected/active tab bar, just makes a "translucent tab list" (which, depending on the background color, could render text on inactive tabs unreadable or hard to see).

    Please let us know if we slipped in details you shared about the issue, but I'm shooting for "you thought it did something else".

    I believe I should be seeing the issue you're talking about in the example itself without further changes, right? Maybe a screenshot of what you see could help.
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Hi Fabricio, thanks for checking this. I think I forgot to mention one important detail about the situation.

    1) Yes, the Active Tab starts off with the right color of a dark grey.
    2) But once you click anywhere in the panel under the active tab, the color completely goes away. Even though the tab has lost focus, I'd still think it should be active.

    This behavior also happens in my small sample that is completely free of our normal codebase.

    Can you double check if this happens for you? Thanks.
  5. #5
    Hello @caleb!

    I don't see it the way you are describing. No dark grey. There's the outline where the tab is active and focused, but when I focus something below/within, the focus' blue outline goes away, but the tab still is white.

    The effect you're talking about is probably related to the CSS lines you added to the bottom of the first post, it is just not clear to me, are they required to reproduce the issue? I'm assuming you are viewing an strange behavior with the test case the way you provided. Here's what I see:

    Click image for larger version. 

Name:	62455-tabPanelPlain.jpg 
Views:	44 
Size:	14.7 KB 
ID:	25186

    Here's an animation with interaction on the example: Tab Panel with plain enabled on Triton theme.

    Hope this helps!
  6. #6
    Quote Originally Posted by Caleb
    This is very odd, because the browser's dev tools show the active tab (on a plain tab bar) has a dark grey CSS rule that ought to be winning out among all the CSS
    Oh, this is true when hover event happens. When I'm hovering the mouse over the inactive tabs, a darker gray is displayed... Just a hunch, couldn't it be that your screen's contrast/brightness/color is too dim to discern between the white on the active tab and gray in the overall background over the example you provided?

    Try setting background to a darker color, like black, maybe, and see what happens:

    <style>
        .x-body { background: black; }
    </style>
    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Hi Fabricio thank for your help in verifying this.
    Got stuck on several other things, and just returning now. Discovered that the issue was with the CSS, which somehow got generated (not entirely sure what that process was).

    The rules the generator created for non-plain tabs has a rule like this .x-tab.x-tab-active.x-tab-default {background-color: #FFF}
    But the generated ones for plain tabs only has a text color rule for the inner element of an active tab, like this
    .x-tab-bar-plain .x-tab.x-tab-active.x-tab-default .x-tab-inner-default {color: #606060;}
    note that the plain rules only set the "font" color of the tab's inner area
    we needed a new rule that sets the "background" color of the active tab
    like this: .x-tab-bar-plain .x-tab.x-tab-active.x-tab-default {backgroundcolor:grey} (something approximating grey)

    Thanks and please close.
  8. #8
    Hello @caleb!

    Glad it helped, and thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 1
    Last Post: Apr 06, 2016, 12:05 PM
  2. Replies: 1
    Last Post: Feb 17, 2015, 7:03 PM
  3. [CLOSED] Element got style="width:0px;" default
    By ViDom in forum 1.x Legacy Premium Help
    Replies: 13
    Last Post: Feb 04, 2013, 1:30 PM
  4. Replies: 7
    Last Post: Nov 21, 2012, 7:34 PM
  5. Replies: 1
    Last Post: Jun 26, 2012, 11:29 AM

Posting Permissions