[FIXED] [#317] [2.x] How to align the Tab Panel Title?

  1. #1

    [FIXED] [#317] [2.x] How to align the Tab Panel Title?

    Hi,

    Please suggest the proper way to align the Panel Title. I would like it to be left aligned next to the tab icon. Naturally, I've tried to use the TitleAlign property but it didn't work.

    Update: The following styling hack does the trick but it doesn't feel right:

        .x-tab-inner-center
        {
            text-align: left;
        }
    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Ext.NET Examples</title>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
            <Items>
                <ext:TabPanel ID="TabPanel1" runat="server" MinTabWidth="120">
                    <Items>
                        <ext:Panel ID="Panel1" runat="server" Icon="Book" Title="Books" MinWidth="120" TitleAlign="Left">
                        </ext:Panel>
                        <ext:Panel ID="Panel2" runat="server" Icon="Find" Title="Find Books" MinWidth="120" TitleAlign="Left">
                        </ext:Panel>
                    </Items>
                </ext:TabPanel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by fabricio.murta; Apr 27, 2016 at 1:14 AM.
  2. #2
    Hello!

    Unfortunately, Ext JS doesn't provide configs for this. So this trick is an appropriate solution to align TabPanel's title.
  3. #3
    Thanks, please mark this question as resolved.
  4. #4
    Hi everybody,

    I would say there is an option:
    <ext:Panel>
        <TabConfig TextAlign="Left" />
    </ext:Panel>
    However, it doesn't work. Sencha has a bug ticket for that.
    http://www.sencha.com/forum/showthread.php?180657

    Created an Issue to monitor.
    https://github.com/extnet/Ext.NET/issues/317

    I can suggest you to define:
    .x-tab-inner-left {
        text-align: left;
    }
    
    .x-tab-inner-right {
        text-align: right;
    }
    and use
    <TabConfig TextAlign="Left" />
    <TabConfig TextAlign="Right" />
  5. #5
    Hello!

    I see ExtJS claims their respective issue thread as fixed now. So I believe we should consider likewise!

    Unless, of course, this issue still bugs someone, in which case we'll have to update it here and maybe open a new thread on Sencha forums informing the issue is still actual to this day.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Panel title click
    By elector in forum 2.x Help
    Replies: 4
    Last Post: Jul 17, 2014, 6:56 AM
  2. [CLOSED] FieldSet Title should be align center
    By iansriley in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 02, 2014, 7:27 PM
  3. Buttons Align on Panel
    By Yuniel537 in forum 2.x Help
    Replies: 3
    Last Post: Feb 13, 2014, 3:08 AM
  4. Replies: 2
    Last Post: Nov 09, 2012, 4:32 PM
  5. [CLOSED] Align Center in Panel
    By macap in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Oct 30, 2009, 9:52 AM

Tags for this Thread

Posting Permissions