What's New?

[CLOSED] ComboBox Item List not displaying full Width

  1. #1
    Aug 24, 2009, 2:10 PM

    [CLOSED] ComboBox Item List not displaying full Width

    I have attached a screenshot of what I am seeing and also below is my code for a simple ComboBox. When you click to display the item list, the width is only about 50% of the actual field width. 

    <ext:LayoutColumn ColumnWidth="0.11">
<ext:Panel ID="Panel3" runat="server">
        <Body>
        <ext:ComboBox ID="LastGroupNameOption" runat="server">
        <Items>
        <ext:ListItem Text="Exact Match" Value="E" />
        <ext:ListItem Text="Keyword" Value="K" />
         <ext:ListItem Text="Starting With" Value="S" />                                                    
         </Items>
         </ext:ComboBox>  
         </Body>
</ext:Panel>
</ext:LayoutColumn>
[img]file:///C:/DOCUME%7E1/folgerw/LOCALS%7E1/Temp/moz-screenshot-2.jpg[/img]
  2. #2
    Aug 24, 2009, 2:14 PM

    RE: [CLOSED] ComboBox Item List not displaying full Width

    Hi,

    Please show test sample? Does Panel3 is placed in hidden area (like inactive Tab)?
  3. #3
    Aug 24, 2009, 2:37 PM

    RE: [CLOSED] ComboBox Item List not displaying full Width

    Yes, that field is part of a hidden tab and is only displayed once user clicks on the applicable tab.
  4. #4
    Aug 24, 2009, 3:03 PM

    RE: [CLOSED] ComboBox Item List not displaying full Width

    Hi,

    Please post that Tab description (markup of that Tab)
  5. #5
    Aug 24, 2009, 3:11 PM

    RE: [CLOSED] ComboBox Item List not displaying full Width


    Here is the tab container for the 3 tabs (and this happens on all of them) Actually, on first display the tab with ActiveTabIndex="0" does not display until you click on another tab and come back to that tab (I will probably create another post for that issue). Anyway, below this I have the code for one of the tabs which is the ArtistSearchControl. Could that be the problem that have created them as user controls?

    <ext:FitLayout ID="FitLayout3" runat="server">
        <ext:Panel ID="Panel6" runat="server" Frame="true">
            <Body>
                <ext:Panel ID="Panel18" runat="server" BodyStyle="padding: 10px;">
                    <Body>
                        <h3>Under Construction...</h3>
                        <br />                        
                        <ext:TabPanel ID="TabPanelSearch" runat="server" ActiveTabIndex="0" Height="350">
                            <Tabs>
                                <ext:Tab ID="ReleaseTab" runat="server" Title="Releases">
                                    <Body>                                        
                                        <uc1:ReleaseSearch ID="ReleaseSearchControl" runat="server" />
                                    </Body>
                                </ext:Tab>
                                <ext:Tab runat="server" Title="Resources / Tracks">
                                    <Body>
                                        <uc2:ResourceSearch ID="ResourceSearchControl" runat="server" />
                                    </Body>
                                </ext:Tab>
                                <ext:Tab runat="server" Title="Artists">
                                    <Body>
                                        <uc3:ArtistSearch ID="ArtistSearchControl" runat="server" />
                                    </Body>
                                </ext:Tab>
                            </Tabs>
                        </ext:TabPanel>
                    </Body>
                </ext:Panel>
            </Body>
            <Buttons>
                <ext:Button ID="Button1" runat="server" Text="Search" Icon="Find"> 
                    <AjaxEvents>
                        <Click OnEvent="DoRepertoireSearch">
                            <EventMask ShowMask="true" MinDelay="500" />
                        </Click>
                    </AjaxEvents>                   
                </ext:Button>
                <ext:Button ID="Button2" runat="server" Text="Reset" Icon="Reload" />
            </Buttons>
        </ext:Panel>
    </ext:FitLayout>
    Here is the included tab user control for the ArtistSearchControl (none of the comboBoxes display correctly as shown in the attachment to this forum post.
    <ext:FitLayout runat="server" LabelAlign="Left">    
    <ext:Panel runat="server">
        <Body>            
            <ext:RowLayout runat="server">
                <ext:LayoutRow RowHeight="0.09">
                    <ext:Panel runat="server">
                        <Body>
                             <ext:ColumnLayout ID="ColumnLayout2" runat="server">
                                <ext:LayoutColumn ColumnWidth="0.08">
                                    <ext:Panel runat="server">
                                        <Body>
                                            <div style="float:right">
                                                <ext:Label ID="Label2" runat="server" Text="Display Name:"/>     
                                            

                                        </Body>
                                    </ext:Panel>                                    
                                </ext:LayoutColumn>
                                <ext:LayoutColumn ColumnWidth="0.2">
                                    <ext:Panel ID="Panel5" runat="server">
                                        <Body>
                                            <ext:TextField ID="DisplayName" EmptyText="Enter Name" runat="server" Width="300px"/>     
                                        </Body>
                                    </ext:Panel>
                                </ext:LayoutColumn>
                                <ext:LayoutColumn ColumnWidth="0.01">
                                    <ext:Panel ID="Panel6" runat="server">
                                        <Body>
                                            <ext:Checkbox ID="SearchAllFields" runat="server" Checked="true"/>
                                        </Body>
                                    </ext:Panel>                                    
                                </ext:LayoutColumn>
                                <ext:LayoutColumn ColumnWidth="0.1">
                                    <ext:Panel ID="Panel7" runat="server">
                                        <Body>                                    
                                            <ext:Label ID="SearchAllFieldsLabel" runat="server" Text="Search All Name Fields"/>                                                
                                        </Body>
                                    </ext:Panel>    
                                </ext:LayoutColumn>
                             </ext:ColumnLayout>                        
                        </Body>
                    </ext:Panel>                
                </ext:LayoutRow>
                
                <ext:LayoutRow RowHeight="0.09">
                    <ext:Panel ID="Panel1" runat="server">
                        <Body>
                             <ext:ColumnLayout ID="ColumnLayout1" runat="server">
                                <ext:LayoutColumn ColumnWidth="0.08">
                                    <ext:Panel ID="Panel2" runat="server">
                                        <Body>
                                            <div style="float:right">
                                                <ext:Label ID="LastGroupNameLabel" runat="server" Text="Last Name or Group Name:"/>                                                                                            
                                            

                                        </Body>
                                    </ext:Panel>                                    
                                </ext:LayoutColumn>
                                <ext:LayoutColumn ColumnWidth="0.11">
                                    <ext:Panel ID="Panel3" runat="server">
                                        <Body>                                            
                                            <ext:ComboBox ID="LastGroupNameOption" runat="server">
                                                <Items>
                                                    <ext:ListItem Text="Exact Match" Value="E" />
                                                    <ext:ListItem Text="Keyword" Value="K" />
                                                    <ext:ListItem Text="Starting With" Value="S" />                                                    
                                                </Items>
                                            </ext:ComboBox>  
                                        </Body>
                                    </ext:Panel>
                                </ext:LayoutColumn>
                                <ext:LayoutColumn ColumnWidth="0.1">
                                    <ext:Panel ID="Panel4" runat="server">
                                        <Body>
                                            <ext:TextField ID="LastGroupName" EmptyText="Enter Name" runat="server"/>  
                                        </Body>
                                    </ext:Panel>                                    
                                </ext:LayoutColumn>                                
                             </ext:ColumnLayout>                        
                        </Body>
                    </ext:Panel>                
                </ext:LayoutRow>
                <ext:LayoutRow RowHeight="0.09">
                    <ext:Panel  runat="server">
                        <Body>
                            <ext:ColumnLayout ID="ColumnLayout4" runat="server">
                                <ext:LayoutColumn ColumnWidth="0.08">
                                    <ext:Panel ID="Panel8" runat="server">
                                        <Body>
                                            <div style="float:right">
                                                <ext:Label ID="FirstNameLabel" runat="server" Text="First Name:" />                                                                                            
                                            

                                     </Body>
                                    </ext:Panel>     
                                </ext:LayoutColumn>
                                <ext:LayoutColumn ColumnWidth="0.11">
                                    <ext:Panel  runat="server">
                                        <Body>
                                            <ext:ComboBox ID="FirstNameOption" runat="server">
                                                <Items>
                                                    <ext:ListItem Text="Exact Match" Value="E" />
                                                    <ext:ListItem Text="Keyword" Value="K"/>
                                                    <ext:ListItem Text="Starting With" Value="S" />                                                    
                                                </Items>
                                            </ext:ComboBox>
                                        </Body>
                                    </ext:Panel>    
                                </ext:LayoutColumn>
                                <ext:LayoutColumn ColumnWidth="0.1">
                                    <ext:Panel  runat="server">
                                        <Body>
                                            <ext:TextField ID="FirstName" EmptyText="Enter Name" runat="server"/>                                             
                                        </Body>
                                    </ext:Panel>  
                                </ext:LayoutColumn>
                             </ext:ColumnLayout>                        
                        </Body>
                    </ext:Panel>                
                </ext:LayoutRow>
                
                <ext:LayoutRow RowHeight="0.09">
                    <ext:Panel ID="Panel9"  runat="server">
                        <Body>
                            <ext:ColumnLayout ID="ColumnLayout3" runat="server">
                                <ext:LayoutColumn ColumnWidth="0.08">
                                    <ext:Panel ID="Panel10" runat="server">
                                        <Body>
                                            <div style="float:right">
                                                <ext:Label ID="ContractNameLabel" runat="server" Text="Contract Name:"/>                                                                                            
                                            

                                         </Body>
                                    </ext:Panel>     
                                </ext:LayoutColumn>
                                <ext:LayoutColumn ColumnWidth="0.11">
                                    <ext:Panel ID="Panel11"  runat="server">
                                        <Body>
                                            <ext:ComboBox ID="ContractNameOption" runat="server">
                                                <Items>
                                                    <ext:ListItem Text="Exact Match" Value="E" />
                                                    <ext:ListItem Text="Keyword" Value="K" />
                                                    <ext:ListItem Text="Starting With" Value="S" />                                                    
                                                </Items>
                                            </ext:ComboBox>  
                                        </Body>
                                    </ext:Panel>    
                                </ext:LayoutColumn>
                                <ext:LayoutColumn ColumnWidth="0.1">
                                    <ext:Panel ID="Panel12"  runat="server">
                                        <Body>
                                            <ext:TextField ID="ContractName" EmptyText="Enter Name" runat="server"/>      
                                         </Body>
                                    </ext:Panel>  
                                </ext:LayoutColumn>
                             </ext:ColumnLayout>                        
                        </Body>
                    </ext:Panel>                
                </ext:LayoutRow>
                
                <ext:LayoutRow RowHeight="0.09">
                    <ext:Panel ID="Panel13"  runat="server">
                        <Body>
                            <ext:ColumnLayout ID="ColumnLayout5" runat="server">
                                <ext:LayoutColumn ColumnWidth="0.08">
                                    <ext:Panel ID="Panel14" runat="server">
                                        <Body>
                                            <div style="float:right">
                                                <ext:Label ID="ContractNumberLabel" runat="server" Text="Contract #"/>                                                
                                            

                                        </Body>
                                    </ext:Panel>     
                                </ext:LayoutColumn>
                                <ext:LayoutColumn ColumnWidth="0.11">
                                    <ext:Panel ID="Panel15"  runat="server">
                                        <Body>
                                             <ext:ComboBox ID="ContractNumberOption" runat="server" >
                                                <Items>
                                                    <ext:ListItem Text="Exact Match" Value="E" />
                                                    <ext:ListItem Text="Keyword" Value="K" />
                                                    <ext:ListItem Text="Starting With" Value="S" />                                                    
                                                </Items>
                                            </ext:ComboBox> 
                                         </Body>
                                    </ext:Panel>    
                                </ext:LayoutColumn>
                                <ext:LayoutColumn ColumnWidth="0.1">
                                    <ext:Panel ID="Panel16"  runat="server">
                                        <Body>
                                            <ext:TextField ID="ContractNumber" EmptyText="Enter Number" runat="server"/>        
                                        </Body>
                                    </ext:Panel>  
                                </ext:LayoutColumn>
                             </ext:ColumnLayout>                        
                        </Body>
                    </ext:Panel>                
                </ext:LayoutRow>                
            </ext:RowLayout>
        </Body>
    </ext:Panel>        
</ext:FitLayout>
  6. #6
    Aug 24, 2009, 3:20 PM

    RE: [CLOSED] ComboBox Item List not displaying full Width

    Hi,

    It is known issue. Just Combo can't detemine correct size when it renders in hidden area (hidden area (display:none) has no size)


    In your case you can one of the following:


    1. Call syncSize function of combo (js function) when corresponding tab is activated (Activate is listener of Tab)
    <Activate Handler="#{Combo1}.syncSize();" Single="true">

    May be it is not better fix (need call for each combo in Tab) but it fix dropdown list width


    2. Set fixed list width for combo, use ListWidth property of combo
  7. #7
    Aug 24, 2009, 10:12 PM

    RE: [CLOSED] ComboBox Item List not displaying full Width

    Thanks - I used ListWidth and everything is looking good.

Similar Threads

  1. Combobox Partial String Search for List Item
    By GolchK in forum 1.x Help
    Replies: 15
    Last Post: Jun 01, 2017, 11:51 PM
  2. Hovering a ComboBox item from the list triggers mouseleave event
    By paul-2011 in forum 1.x Help
    Replies: 1
    Last Post: Dec 15, 2010, 3:07 PM
  3. Combobox autoSize to List width
    By johnsoftinfos in forum 1.x Help
    Replies: 4
    Last Post: Dec 10, 2010, 8:45 AM
  4. [CLOSED] Displaying two records(First Name and Last Name) fields in combobox (as full name)
    By sadaf in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Nov 02, 2010, 3:56 PM
  5. [CLOSED] [1.0] Selecting Combobox expanded list item through Tab key
    By r_honey in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jun 02, 2010, 4:54 PM

Posting Permissions