PDA

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



RCM
Jun 14, 2012, 5:46 PM
Using css or there have property I can set? Many thanks.

Regards,
Xiaogang

Daniil
Jun 14, 2012, 10:29 PM
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>

RCM
Jun 15, 2012, 2:11 PM
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.

Daniil
Jun 15, 2012, 2:15 PM
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.

RCM
Jun 15, 2012, 4:01 PM
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.

Daniil
Jun 15, 2012, 4:18 PM
Well, I have provided the example. Did you try that example?

RCM
Jun 15, 2012, 6:12 PM
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

Daniil
Jun 15, 2012, 6:51 PM
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.

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.

RCM
Jun 18, 2012, 12:26 PM
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>

Daniil
Jun 18, 2012, 12:34 PM
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?