I have tried using AJAX's TabContainer with TabPanel but the problem is, I cannot specify a breakup in the tabs. For example, I have 10 tabs and I want to break 10 tabs into two rows of tabs and so far there is no way to do it easily. So, what's another
alternative to this? Any suggestion is much appreciated.
I have tried using AJAX's TabContainer with TabPanel but the problem is, I cannot specify a breakup in the tabs. For example, I have 10 tabs and I want to break 10 tabs into two rows of tabs and so far there is no way to do it easily.
I have tried using AJAX's TabContainer with TabPanel but the problem is, I cannot specify a breakup in the tabs. For example, I have 10 tabs and I want to break 10 tabs into two rows of tabs and so far there is no way to do it easily.
Here's what I do not get. I went to the http://ajaxcontroltoolkit.codeplex.com/ site and click the Download button/link on the right side of this page to donwload. I extracted this zip file. There is no such file called "Tabs.css" inside of the "AjaxControlToolkit/Tabs/"
folder. Where do I find this file to modify?
Okay, I finally found the tabs.css file here: AjaxControlToolkit_edf1fbcb2745\Client\MicrosoftAjax.Extended\Tabs
I build the solution, drag and drop the file "AjaxControlToolkit.dll" from the folder "AjaxControlToolkit_edf1fbcb2745\Tests\AjaxControlToolkit.Tests\bin" to my project's Bin folder. However, it's not working. Any suggestion?
mychucky
Contributor
4358 Points
3709 Posts
What's the best way to get a tabbed display?
Feb 08, 2012 07:23 PM|LINK
I have tried using AJAX's TabContainer with TabPanel but the problem is, I cannot specify a breakup in the tabs. For example, I have 10 tabs and I want to break 10 tabs into two rows of tabs and so far there is no way to do it easily. So, what's another alternative to this? Any suggestion is much appreciated.
DarrellNorto...
All-Star
86733 Points
9643 Posts
Moderator
MVP
Re: What's the best way to get a tabbed display?
Feb 08, 2012 09:02 PM|LINK
Use jQuery tabs, set the <li> elements to a fixed width.
Here is how to use jQuery tabs with ASP.NET MVC: http://ericdotnet.wordpress.com/2009/03/17/jquery-ui-tabs-and-aspnet-mvc/
Then add a fixed width to the <li> tag, like this:
<style>
li { width: 50px;}
</style>
Darrell Norton's Blog
Please click "Mark as Answer" if this helped you.
ramiramilu
All-Star
95473 Points
14106 Posts
Re: What's the best way to get a tabbed display?
Feb 09, 2012 12:21 PM|LINK
with simple CSS fix, you can get this working in AJAX Tab Container - http://www.narizvi.com/blog/post/Two-rows-of-tab-headers-in-TabContainer-in-Ajax-Control-Toolkit.aspx
Thanks,
JumpStart
mychucky
Contributor
4358 Points
3709 Posts
Re: What's the best way to get a tabbed display?
Feb 09, 2012 01:01 PM|LINK
Here's what I do not get. I went to the http://ajaxcontroltoolkit.codeplex.com/ site and click the Download button/link on the right side of this page to donwload. I extracted this zip file. There is no such file called "Tabs.css" inside of the "AjaxControlToolkit/Tabs/" folder. Where do I find this file to modify?
mychucky
Contributor
4358 Points
3709 Posts
Re: What's the best way to get a tabbed display?
Feb 09, 2012 01:07 PM|LINK
Do you know/have a good tutorial on how to do this in asp.net and not MVC? I don't use MVC. Thanks for the suggestion.
mychucky
Contributor
4358 Points
3709 Posts
Re: What's the best way to get a tabbed display?
Feb 09, 2012 01:31 PM|LINK
Okay, I finally found the tabs.css file here: AjaxControlToolkit_edf1fbcb2745\Client\MicrosoftAjax.Extended\Tabs
I build the solution, drag and drop the file "AjaxControlToolkit.dll" from the folder "AjaxControlToolkit_edf1fbcb2745\Tests\AjaxControlToolkit.Tests\bin" to my project's Bin folder. However, it's not working. Any suggestion?
mychucky
Contributor
4358 Points
3709 Posts
Re: What's the best way to get a tabbed display?
Feb 09, 2012 01:36 PM|LINK
Here's what I have:
/* default layout */ .ajax__tab_default .ajax__tab_header {} .ajax__tab_default .ajax__tab_outer {display:-moz-inline-box;display:inline-block} .ajax__tab_default .ajax__tab_inner {display:-moz-inline-box;display:inline-block} .ajax__tab_default .ajax__tab_tab {margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block}It's still not working.
mychucky
Contributor
4358 Points
3709 Posts
Re: What's the best way to get a tabbed display?
Feb 16, 2012 03:30 PM|LINK
Any other suggestions?
nideeshm
Participant
1069 Points
269 Posts
Re: What's the best way to get a tabbed display?
Feb 16, 2012 04:53 PM|LINK
Tab container from ajax is easy to code, but with flexibility and performance it is not so good.
As some user have already pointed out, many developers use <ul><li> tag. Below is a sample code for that.
<html>
<head>
<script>
function fnShow(container)
{
document.getElementById("content").innerHTML = "Link is clicked <br/>" + container +"- contencts is shown"
}
</script>
<style>
li
{
float:left;
height:30px;
width:100px;
list-style:none;
border:1px solid brown;
border-bottom-width:0px;
text-align:center;
margin:0;
padding:0;
position:relative;
}
ul
{
float:left;
margin:0;
padding:0;
position:relative;
}
#content
{
width:500px;
height:250px;
border:1px solid brown;
border-top-width:0px;
padding:30px
}
</style>
</head>
<body>
<div style="width:50%;">
<ul style="left:20px;">
<li id="home"><a href="#" onclick=fnShow("div1")>linka</a></li>
<li id="save"><a href="#" onclick=fnShow("div2")>linkb</a></li>
<li id="prev"><a href="#" onclick=fnShow("div3")>linkc</a></li>
</ul>
</div>
<div style="border-bottom:1px solid red;width:500px;">
<ul >
<li id="home" style="width:110px"><a href="#" onclick=fnShow("div1")>linkd</a></li>
<li id="save" style="width:120px"><a href="#" onclick=fnShow("div2")>linke</a></li>
<li id="prev" style="width:120px"><a href="#" onclick=fnShow("div3")>linkf</a></li>
</ul>
</div>
<div id="content" style="clear:both;">Not loaded</div>
</body>
</html>
Save the aboce code as abc.html and open in the browser. Apply css for your look and feel.
You can have separate panels associated with each of the tab, and load the panel by clicking on the link and hide other panels related to other tabs.
Nideesh.S
Mark as answer, If it helps you.
marko4
Member
320 Points
78 Posts
Re: What's the best way to get a tabbed display?
Feb 16, 2012 05:35 PM|LINK
see this
http://webdesign14.com/30-useful-jquery-tabs-tutorials/