Combobox in Tab Container

Last post 07-13-2009 2:20 AM by SMuhilan. 4 replies.

Sort Posts:

  • Combobox in Tab Container

    05-17-2009, 5:19 AM
    • Member
      5 point Member
    • tommyTanaka
    • Member since 07-03-2006, 9:54 PM
    • Posts 5

    It seems, that the Combobox does not work within a Tab Panel. And also there is a Problem with the position of the Dropdown-Area, if it is placed into a div-Container, that is positioned absolute on a page.

    Greetings,

     

     Tom

  • Re: Combobox in Tab Container

    05-17-2009, 6:51 AM
    • Contributor
      3,472 point Contributor
    • rami_nassar
    • Member since 10-07-2008, 7:01 AM
    • U.A.E.
    • Posts 788

    will you show us your HTML code?

    Regards...
    Nassar, Rami (MCP, MCTS)
    My Blog || E-Mail

    Don't forget to click "Mark as Answer" on the post that helped you.

    This credits that member, earns you a point and marks your thread as Resolved so we will all know you have been helped.
  • Re: Combobox in Tab Container

    05-17-2009, 7:35 AM
    • Member
      5 point Member
    • tommyTanaka
    • Member since 07-03-2006, 9:54 PM
    • Posts 5

    Ok, but will be a kind of complex, but I try.

     First the html-Code:

      

    1    <div id="hbig_mainFrame" class="hbig_mainFrame">
    2        <div id="divHeader" runat="server" class="hbig_header">
    3                <div id="suchDialog" class="suchDialog">
    4                   <ajaxToolkit:TabContainer ID="tcS" runat="server" Width="580" Height="50" ActiveTabIndex="0" CssClass="hbigSuche" OnClientActiveTabChanged="ActiveTabChanged">
    5                    <ajaxToolkit:TabPanel ID="tb1" runat="server" OnClientClick="closeSearchTab">
    6                        <HeaderTemplate>
    7                            <span style="margin-left:10px;*margin-left:0px;">Betriebe</span>
    8                        </HeaderTemplate>
    9                        <ContentTemplate>
    10                           <asp:Panel ID="panel2" runat="server" style="width:100%;">
    11                               <div style="float:left;">
    12                               <asp:TextBox ID="tbName" runat="server" CssClass="tb90" style="width:107px;">Name</asp:TextBox>
    13                               </div>
    14                               <div style="float:left;margin-left:2px;">
    15                                   <asp:TextBox ID="tbPLZ" runat="server" CssClass="tb90" style="width:40px;">PLZ</asp:TextBox>
    16                               </div>
    17                               <div style="float:left; margin-left:2px;">
    18                               <asp:TextBox ID="tbOrt" runat="server" CssClass="tb90" style="width:113px;*width:107px">Ort</asp:TextBox>
    19                               </div>
    20                               <div style="float:left; margin-left:2px;"> 
    21                               <ajaxToolkit:ComboBox ID="ComboBox1" runat="server" 
    22                                   AutoPostBack="False" renderMode="block" 
    23                                   AutoCompleteMode="SuggestAppend" 
    24                                   CaseSensitive="False" 
    25                                   CssClass="ddlStyle" 
    26                                   ItemInsertLocation="Append" /> 
    27                               </div>
    28   
    29                               <div style="float:left; margin-left:2px; margin-top:0px; *margin-top:1px;">
    30                                   <asp:Button ID="btnSucheBetrieb" runat="server" Text="Suchen" UseSubmitBehavior="False" 
    31                                           CssClass="hbhig_button" 
    32                                       style="background-image:url(/grafik/Steuerelemente/ButtonSearch.jpg);" />
    33                               </div>
    34                               <div style="float:left; left:6px; top:-3px; position:relative; text-align:center; font-size:10px;">
    35                                   <asp:LinkButton ID="lbtnErweitert" runat="server" 
    36                                   OnClientClick="$get('suchDialog').style.top='55px';$get('tabBackExpanded').style.display='block'; $get('loadingErweiterteSuche').style.display='block'">erweiterte<br />Suche</asp:LinkButton>
    37                               </div>
    38                               <div class="hbig_lineClearer"></div>
    39                           </asp:Panel>
    40   
    41   ... and so on.
    

     

    And here the related css-Classes:

      

    1    .hbig_mainFrame
    2    {
    3    	width:998px;
    4    	padding:0px;
    5    	margin:0px;
    6    	position:absolute;
    7    	left:50%;
    8    	margin-left:-499px;	
    9    	top:0px;
    10   }
    11   
    12   .hbig_header
    13   {
    14   	position:relative;
    15   	width:998px;
    16   	height:196px;
    17   	background-image:url(/grafik/masterPage/HeaderBack.jpg);
    18   	background-repeat:no-repeat;
    19   	background-position:top;
    20   	z-index:99;
    21   }
    22   
    23   .hbig_menuTop
    24   {
    25   	position:absolute;
    26   	left:4px;
    27   	height:52px;
    28   	bottom: 0px;	
    29   	width:990px;	
    30   	font-size:11px;
    31   	font-family:Verdana;
    32   	background-image:url(/grafik/masterPage/menuBack.jpg);
    33   	background-repeat:repeat-x;
    34   	z-index:2;
    35   }
    36   
    37   .hbig_menuTop a
    38   {
    39       color:White;
    40       text-decoration:none;
    41       font-weight:bold;
    42   }
    43   
    44   .hbig_menuTop a:hover
    45   {
    46       color:#FFF4CC;
    47   }
    48   
    49   .suchDialog
    50   {
    51       position:absolute;
    52       top:88px;
    53       left:360px;
    54       z-index:3;
    55   }
    56   
    57   
    58   .ddlStyle .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input
    59   {
    60       background-image: url(/grafik/tbBack.jpg);
    61       background-position: top left;
    62       border:1px solid #CFCFCF;
    63       border-right:none;
    64       color: #413D3C;
    65       padding: 3px 0px 2px 5px;
    66       font-size: 11px;
    67       height: 14px;
    68       width: 105px;
    69       margin:0px;
    70   }
    71   .ddlStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button
    72   {
    73       background-image: url(/grafik/DropDownPfeil.jpg);
    74       background-position: top left;
    75       border: 0px none;
    76       height: 23px;
    77       width: 23px;
    78       margin:0px;
    79   }
    80   .ddlStyle .ajax__combobox_itemlist
    81   {
    82       border-color: #E9E9E9;
    83       background-color: #FFFFFF;
    84       line-height:20px;
    85   } 
    86   
    87   .ddlStyleHoverItem
    88   {
    89       width:100px; height:16px;
    90       cursor:pointer;
    91       background-color:#E9E9E9;
    92   }
    93   
    

     

     By the way: the ListItemHoverCssClass does not work at all...

  • Re: Combobox in Tab Container

    05-17-2009, 7:48 AM
    Answer
    • Member
      5 point Member
    • tommyTanaka
    • Member since 07-03-2006, 9:54 PM
    • Posts 5

    Oh, of course you can check it out at: http://testweb.hierbinichgast.de

    You can see it, it's the one where "Region wählen" is written in it.

    If you change the tab-Register, you can see Dropdown-Comboboxes from Component-Art. They work fine.

    But i would prefer the Toolkit Combobox, cause the HTML/Javascript Overhead of the Componentart Control is very high... (about 18 kb per Combobox)

  • Re: Combobox in Tab Container

    07-13-2009, 2:20 AM
    • Member
      5 point Member
    • SMuhilan
    • Member since 02-23-2007, 10:44 PM
    • Posts 29

     Hi

    I am using Ajax Tab container which as 3 tabs. Each tab contains one or more ajax tool kit combobox control.

    I am facing the problem that the comboboxes in the second tab and thrid tabs are not displaying properly when active tab is first.

    If I set auto post back property of tab container is true, all comboboxes are dispplaying correctly.

    How to correct this bug of combobox?

     

Page 1 of 1 (5 items)