[CLOSED] Good Day. What is the best way to eliminate gaps between a tabpanel's tabs?

  1. #1

    [CLOSED] Good Day. What is the best way to eliminate gaps between a tabpanel's tabs?

    Using css or there have property I can set? Many thanks.

    Regards,
    Xiaogang
    Last edited by Daniil; Jun 21, 2012 at 9:47 PM. Reason: [CLOSED]
  2. #2
    Hi,

    There is no property to set up these gaps, please use CSS.

    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 v2 Example</title>
    
        <style type="text/css">
            .my-tabs .x-tab {
                margin-left: 0px;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:TabPanel runat="server" Cls="my-tabs">
                <Items>
                    <ext:Panel runat="server" Title="Tab 1" />
                    <ext:Panel runat="server" Title="Tab 2" />
                    <ext:Panel runat="server" Title="Tab 3" />
                    <ext:Panel runat="server" Title="Tab 4" />
                </Items>
            </ext:TabPanel>
        </form>
    </body>
    </html>
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi,

    There is no property to set up these gaps, please use CSS.

    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 v2 Example</title>
    
        <style type="text/css">
            .my-tabs .x-tab {
                margin-left: 0px;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:TabPanel runat="server" Cls="my-tabs">
                <Items>
                    <ext:Panel runat="server" Title="Tab 1" />
                    <ext:Panel runat="server" Title="Tab 2" />
                    <ext:Panel runat="server" Title="Tab 3" />
                    <ext:Panel runat="server" Title="Tab 4" />
                </Items>
            </ext:TabPanel>
        </form>
    </body>
    </html>

    I have checked the css. Margin-left is already 0.
  4. #4
    Yes, it confused me as well, when I worked on your question.

    The initial tabs
    margin-left: 2px;
    becomes
    left: 2px; // + tab width
    internally within HBoxLayout which manages tabs positions. Then it resets initial CSS margins to 0.
  5. #5
    Quote Originally Posted by Daniil View Post
    Yes, it confused me as well, when I worked on your question.

    The initial tabs
    margin-left: 2px;
    becomes
    left: 2px; // + tab width
    internally within HBoxLayout which manages tabs positions. Then it resets initial CSS margins to 0.
    So, what I need to do in order to get rid of the gap? thanks.
  6. #6
    Well, I have provided the example. Did you try that example?
  7. #7
    Quote Originally Posted by Daniil View Post
    Well, I have provided the example. Did you try that example?
    Hum, I guess that we confused each other.

    I have checked the Margin-left and I saw it is already 0 without applying the css example you provided to me. But I still see gaps. One more thing is that I saw those tab headers are positioned "absolute" with top and left specified.

    Any idea?

    Thanks,
    Xiaogang
  8. #8
    Quote Originally Posted by RCM View Post
    I have checked the Margin-left and I saw it is already 0 without applying the css example you provided to me. But I still see gaps.
    Here is the answer.
    Quote Originally Posted by Daniil View Post
    Yes, it confused me as well, when I worked on your question.

    The initial tabs
    margin-left: 2px;
    becomes
    left: 2px; // + tab width
    internally within HBoxLayout which manages tabs positions. Then it resets initial CSS margins to 0.
    Please post a screen-shot how the tabs in my examples looks on your side. For me there are not gaps.
  9. #9
    Quote Originally Posted by Daniil View Post
    Here is the answer.


    Please post a screen-shot how the tabs in my examples looks on your side. For me there are not gaps.
    Please see the attached screenshot with your provided css applied.

    And below is the simple code:

        <ext:TabPanel runat="server" Cls="my-tabs">
            <Items>
                <ext:Panel runat="server" Title="tabone"></ext:Panel>
                <ext:Panel ID="Panel1" runat="server" Title="tabone"></ext:Panel>
                <ext:Panel ID="Panel2" runat="server" Title="tabone"></ext:Panel>
            </Items>
        </ext:TabPanel>
    Attached Thumbnails Click image for larger version. 

Name:	TabPanelWithGaps.PNG 
Views:	83 
Size:	44.3 KB 
ID:	4376  
  10. #10
    I can't see these gaps when I run my example.

    Please provide a full example how exactly you are trying.

    Also what Ext.NET sources do you use?

Similar Threads

  1. Add tabs to the tabpanel
    By Vaishali in forum 1.x Help
    Replies: 1
    Last Post: Oct 04, 2012, 11:23 AM
  2. [CLOSED] communication between tabs in a Tabpanel
    By FpNetWorth in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 02, 2012, 4:03 PM
  3. How to close all tabs in TabPanel
    By ozayExt in forum 1.x Help
    Replies: 3
    Last Post: Apr 27, 2012, 11:48 AM
  4. [CLOSED] TabPanel tabs are not hiding
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 31, 2011, 11:22 PM
  5. Hi, Why the TabPanel cannot update 2 tabs?
    By bruce in forum 1.x Help
    Replies: 2
    Last Post: Apr 20, 2009, 10:25 PM

Posting Permissions