AJAX :: Floating Divs In TabContainer
Nov 21, 2010
I am having a problem floating div's inside the AJAX TabContainer. The content I place inside the TabPanel is jumping outside the border. Here is the code:
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="EquipmentDetails.aspx.cs" Inherits="DocumentSandbox.Web.WebForm4" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
<asp:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">
<ContentTemplate>
<div>
<div>
<div><div>ID:</div><div>
<asp:TextBox ID="txtID" runat="server" CssClass="criteriatextbox"></asp:TextBox></div></div>
<div><div>Phone Number:</div><div>
<asp:TextBox ID="txtPhoneNumber" runat="server" CssClass="criteriatextbox"></asp:TextBox></div></div>
<div><div>Address:</div><div>
<asp:TextBox ID="txtAddress" runat="server" CssClass="criteriatextbox"></asp:TextBox></div></div>
</div>
<div>
<div><div>Last Name:</div><div>
<asp:TextBox ID="txtLastName" runat="server" CssClass="criteriatextbox"></asp:TextBox></div></div>
<div><div>First Name:</div><div>
<asp:TextBox ID="txtFirstName" runat="server" CssClass="criteriatextbox"></asp:TextBox></div></div>
<div><div>Middle Name:</div><div>
<asp:TextBox ID="txtMiddleName" runat="server" CssClass="criteriatextbox"></asp:TextBox></div></div>
</div>
</div>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
</asp:TabPanel>
</asp:TabContainer>
</asp:Content>
Here is the css for this code segment:
.searchcriteria
{
}
.searchresults
{
clear: both;
}
.criteriacolumn
{
float:left;
width:500px;
}
.criteriarow
{
width:498px;
height:24px;
padding-bottom:2px;
}
.criteriatextbox
{
padding-top: 3px;
float:left;
width:285px;
}
.criterialabel
{
width:200px;
padding-right: 6px;
text-align:right;
float:left;
}
I found a possible solution here: [URL], but I'm hoping for another option before I give up on having a border.
View 3 Replies
Similar Messages:
Jan 31, 2011
I was just after some help to put the following code into a loop. I have 6 div's with id's ImgDetails1 - ImgDetails6 and 6 buttons
with id's 1 - 6
if 1 is pushed it should hide the other divs but ensure div1 is shown. the same applies for every other
div.
I can do this the long way writing logic for each div but I am not the best with js and have failed
at each attempt to put the code in a 1 - 6 loop to hide all divs except the one selected and make sure that is shown.
[Code]....
View 4 Replies
Dec 17, 2010
I use a border for the TabContainer body which works fine.
[Code]....
also I use three hidden divs and one visible div inside a main div which works as body of Tabcontainer
View 1 Replies
Apr 1, 2010
The first one shows the page with a form which has an updatepanel around it. The second one shows what the page looks like for half a second when clicking the submit button in firefox.
Every <div> tag inside the updatepanel go grey (the background color of <body>) creating weird flickering... How can this be avoided? It seems the div's go transparent but they don't show the white background color of the div surrounding the form, it show the body background color.
I need the updatepanel around the form for some of the validation controls to be displayed so not letting it span the whole form is not an option.
View 4 Replies
Mar 25, 2010
I am a newbie in web development I came from win form environment. how to set tabcontainer (ASP.Net Ajax Tool) width size according to users desktop screen resolution?
(setup and tools)
visual studio 3.5 sp1
AspNetAjaxLibraryBeta0911
View 1 Replies
Jul 22, 2010
At present we are using <ajax:TabContainer> to load tabs. I have 5 user controls inside <ajax:TabPanel>.
The problem is that all the data on these 5 pages gets loaded at once and increases the loading time as well as it is very hard to debug. Can we do lazy loading uisng TabContainer control? so that only the data of the current tab is loaded and when we click on the other tab then that's control data gets loaded.
View 7 Replies
Dec 3, 2010
m kinda new in asp.net ,i'm try to do a web form with 3 tabs but i want that the tabs will start from the right end of the screen and not from the left?is there a way to do it?i searched the properties list for such a thing , and i didn't fine it.
View 1 Replies
Mar 29, 2010
I created dynamic the tabpanel of tabcontainer, and the tabpanels change depended on the item which chooses from dropdownlist but the problem is tabcontainer keeping the last tabpanel and create another tabpanel and I couldn't remove them how I can rebulid the tabconatiner each postback
View 2 Replies
Feb 5, 2010
how to get vertical tab using tabcontainer in ajax controls.
View 2 Replies
Sep 20, 2010
Having a strange issue with the TabContainer in the AJAX Toolkit. We have several views into a customer record system that we have built as ASP.net controls. These controls use UpdatePanels to load data asynchronously. We use jQuery and jquery.ui to place these controls in separate tabs on a single page. Which all works swimmingly. Lately, I've gotten a little tired of the jQuery tab hackish approach and decided to port everything to use the TabContainer. I want to be able to control the tabs as objects.
At first glance, everything works perfectly. I just slapped the controls into tabs in a TabContainer and everything looked great. However, for some reason, databound controls are losing their data. For instance, grid views vanish when I switch pages. A drop down control with an OnTextChanged event, loses its databound list of values upon post back. Something about the TabContainer -> Custom Control -> UpdatePanel -> Control that uses data binding heirarchy is throwing it out of whack and the debugger isn't shedding any light. It seems like control state isn't being stored. I don't really know enough about control state to know what to look for. Here is the markup for the TabContainer:
<asp:TabContainer ID="tcBanner" runat="server" ActiveTabIndex="0" Width="100%"
EnableViewState="False" ScrollBars="Vertical">
<asp:TabPanel runat="server" HeaderText="Comments" ID="tbComments">
<ContentTemplate>
<luBannerControl:Comments ID="commentsTabContent" runat="server" />
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel runat="server" HeaderText="General" ID="tbContact">
<ContentTemplate>
<luBannerControl:Contact ID="contactTabContent" runat="server" />
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
Here is the markup for one of the controls:
<asp:UpdatePanel ID="pnlComments" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:GridView ID="CommentsGridView" AllowPaging="true" PageSize="20" DataSourceID="BannerSqlDataSource" runat="server" AutoGenerateColumns="False" GridLines="None" CssClass="CommentGrid" HeaderStyle-CssClass="CommentGridHeader" RowStyle-CssClass="CommentRowsEven" AlternatingRowStyle-CssClass="CommentRowsOdd">
<Columns>
<asp:BoundField DataField="SPRCMNT_TEXT" HeaderText="Comment" SortExpression="SPRCMNT_TEXT" />
<asp:BoundField DataField="SPRCMNT_DATE" HeaderText="Created" SortExpression="SPRCMNT_DATE" DataFormatString="{0:M/dd/yyyy}" />
<asp:BoundField DataField="SPRCMNT_CMTT_CODE" HeaderText="Type" SortExpression="SPRCMNT_CMTT_CODE" />
<asp:BoundField DataField="SPRCMNT_CTYP_CODE" HeaderText="Source" SortExpression="SPRCMNT_CTYP_CODE" />
<asp:BoundField DataField="sprcmnt_user_id" HeaderText="User" SortExpression="sprcmnt_user_id" />
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="txtSearch" EventName="TextChanged" />
<asp:AsyncPostBackTrigger ControlID="btnClearFilter" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
View 1 Replies
Aug 19, 2010
I want to add a close button on each tab,just like the firefox.
It seams that Ajax Control Toolkit doesn't provide any method to close the tab.
I have try to use the .Remove() function,but it doesn't delete the tab...it just make it invisible and work correctly only once....
Could any give the code in C#..
View 2 Replies
May 14, 2010
[Code]....
</cc1:TabContainer>
View 3 Replies
Feb 17, 2011
I am making a TabContainer with several TabPanel. In one the TabPanel I have a video player. When I start the video and switch to an another TabPanel, the video stops.
How can I do to make the video continue to play when I switch to an another TabPanel ?
View 1 Replies
Feb 10, 2014
How to implement Table and Forms inside AJAX TabContainer in ASP.Net ...
View 1 Replies
Jul 30, 2010
I have seen posts discussing this error however, no post has identified a solution to address the issue I am having, so here it goes.
I am using Micosoft Visual Studio 2008
.NET Framework 3.5 SP1
AjaxControlTookkit 3.5.40412.0
Step 1: I create a new, ASP.NET Web Application.
Step 2: Add a 'New Item' from the templates called 'AJAX Web Form'.
Step 3: In Source view go to the Toolbox and drug a 'TabContainer' directly below the ScriptManager tag.
Step 4: Switch to Design view and click 'Add New Tab' on the TabContainer control.
Step 5: Switch back to Source view and add a ContentTemplate open and close tag within the TabPanel tags.
Step 6: Between the open and close ContenTemplate tages add something. I added the following 2 letters, Hi.
Step 7: Set the page we have been working on to your startup page and run it.
Step 8: You will get the following exception every time. Sys.ArgumentUndefinedException: Value cannot be undefined. Parameter name: type
I have tried about 15 different ways to create the most simple use of this control and it fails every time in IE7 and FireFox.
The code.
[Code]....
View 3 Replies
Jan 6, 2011
I have a Collapsiblepanelextender and a TabContainer with two tabs. the code works fine in FF and Chrome but fails in IE8. I am using VS2008 .Net 3.5 and the latest AjaxToolkit.
I am trying to control the collapsible behavior through tab clicking using javascript. here is the code to replicate my problem.
The aspx.cs code:
[Code]....
View 1 Replies
Jan 8, 2011
How to activate a specific TabPanel in TabContainer from code behind? I tried the following but it doesn't change activate the tab.
[Code]....
View 2 Replies
Sep 18, 2010
I have a asp.net page that contains a Ajax TabContainer control with three tabs, this is all dynamically created and added using the code-behind file. Inside each tab I have one or more gridview controls that can cause a postback for various reasons.
When a gridview control causes a postback, the entire tabcontainer gets hidden on the page and therefore nothing is displayed. In the HTML source code I can see that the controls have been added to the page, but the tabcontainer has a style added to it (style="visibility: hidden"]. If I remove this style using the developer tools, the tabcontainer displays and all tabs, but some of the styling gets lost. Is there a specific reason why this occurs and how I can resolve this?
View 4 Replies
Feb 10, 2011
how to set a TabContainer to hidden/visible. I have tried placing it in a div and in a panel, but when I hide these (style="visibility: hidden;"), the Tabcontainer stays visible! Setting the style of the TabContainer itself doesn't work.
View 3 Replies
Sep 21, 2010
We upgraded our project to 4.0 yesterday and did a live release. Unfortunately for some reason on one of our pages the tab container does not display anymore. I've set a breakpoint at the end of code execution and the .Visible property of the container is True, but the generated HTML has a CSS tag set to make it invisible:
<div class="ajax__tab_xp" id="ctl00_PageBody_tbcTabs"
style="visibility:hidden;">
If I use the IE8 development tools to remove the style property then everything displays correctly. why the container is set to be invisible even though the code behind is setting it to visible?
View 2 Replies
Jun 16, 2010
how to add close to all the tabs in a tabcontainer.The scenario is, I have only TabContainer on aspx and m populating tabs with UserControls programmatically (with use of DOM). How can I develop the close of a tab with small X on each of the tab? I am not sure how many tabs I have.
View 4 Replies
Aug 16, 2010
I am using VB.NET in my Web application. I would like to link directly to a tabcontainer from my masterpage. I have seen snippets of code, but I have not been able to get anything to work. Does someone have a simple solution already?
View 4 Replies
Jan 20, 2010
First time ever I am using a ajax tapcontainer control. To learn some info I went to look for the video hosted by asp.net about how to use tab control.
The one I am using it seems different. I am using AjaxToolkit 3.5 in VS 2008.
So is there any place I can learn about tabContainer for 3.5.
View 2 Replies
Apr 7, 2010
I have a tabcontainer which has 7 tab panels and on certain conditions i want to make 1 tab either visible false or remove from the TabContainer. Firstly, i had set tab visible false but by doing this my TabContainer1_ActiveTabChanged event fired twice intially when i select the tab panel then it fire and shows my correct ActiveTabIndex number but but at the same moment it fires again with 1 Decrement in ActiveTabIndex number.
I could not understand why it is happening.What thing makes the ActiveTabIndex number decremented by 1. If select Tab 3 then it shows me result of 2 and so on.
Why this event firing twice i set any tab Visible false.
View 6 Replies
Aug 25, 2010
I have an Ajax TabContainer with three tabs. Within one of the TabPanels I have an Ajax ModalPopupExtender. The ModalPopupExtender presents a panel that allows a user to upload a file. The upload can take a little while so I wanted to add an UpdatePanel control and an UpdateProgress Control to inform the user to wait and prevent them from pressing the "Upload" button again.
I've tried the following:
Wrapping the panel in an UpdatePanel control ... didn't work.
Wrapping the TabPanel in an UpdatePanel control ... didn't work.
Wrapping the TabContainer in an UpdatePanel control ... didn't work.
The page itself has an UpdatePanel, UpdateProgress and an UpdatePanelAnimationExtender. All of these control work as expected when the page reloads.
Here is part of the code. For brevity I have removed some of the unnecessary 'fluff'.
<cc1:TabContainer ... >
<cc1:TabPanel ...>...</cc1:TabPanel>
<cc1:TabPanel ...>...</cc1:TabPanel>
<cc1:TabPanel I...>
[Code]....
View 1 Replies