problem to align and position controls in column layout

  1. #1

    problem to align and position controls in column layout

    I have a problem to align and position one ImageButton and one textbox for searching in the site.
    I tried a thousand times and searched the forum but the solution did not succeed.
    The problems are in North panel in column panel
    I attach the code and a picture to better understand:

    
    <ext:Viewport ID="ViewportSancar" runat="server" Layout="border"><Items>
            
    <%--PANNELLO NORTH--%>
    <ext:Panel ID="PanelNorthSanca" 
               runat="server"
               Collapsible="True" 
               Height="200"
               MinHeight="200"
               MaxHeight="200"
               Region="North"
               Split="True" >
               <LayoutConfig>
                    <ext:ColumnLayoutConfig FitHeight="false"  />
               </LayoutConfig>
            <Items>
                    
    <ext:ColumnLayout ID="columnLayoutNorth" runat="server" Split="false">
                       
       <Columns>
    
    
            <ext:LayoutColumn>
                <ext:Panel ID="PanelColonnaSinistra" 
                           runat="server" 
                           Width="300"
                           BodyBorder="false" 
                           Border="false" 
                           HideBorders="true"
                           BodyCssClass="SfondoColonnaSinistra"
                           Header="false">
                    <Content>
                         <div>
                            
                         </div>
                    </Content>
                </ext:Panel>
            </ext:LayoutColumn>
    
    
    <ext:LayoutColumn>
        <ext:Panel ID="PanelColonnaCentro" 
                   Height="173"
                   BodyBorder="false"
                   Border="false"
                   HideBorders="true"
                   Width="900"
                   BodyCssClass="SfondoColonnaCentro"
                   Header="false" 
                   runat="server">
            <Content>
                 <div>
                   
                 </div>
            </Content>      
        </ext:Panel>
    </ext:LayoutColumn>
    
    
    <ext:LayoutColumn ColumnWidth="0.9">
    
    
            <ext:Panel 
                ID="PanelCerca" 
                runat="server" 
                Border="false"
                Header="false"
                HideBorders="true"
                BodyBorder="false"
                BodyCssClass="SfondoColonnaDestra"
                Height="173"
                Layout="Form">
                <Items>
                    <ext:TextField ID="TextFieldCerca" 
                                   Width="150" 
                                   AllowBlank="false" 
                                   EmptyText="Cerca Nel Sito"   
                                   Cls="txtCerca" runat="server" />
                    <ext:ImageButton ID="ImageButtonCerca" 
                                     runat="server" 
                                     ImageUrl="Immagini/search.png" 
                                     OverImageUrl="Immagini/search.png">
                    </ext:ImageButton>
                </Items>
            </ext:Panel>
    </ext:LayoutColumn>
    
    
               </Columns>
            </ext:ColumnLayout>
        </Items>
    </ext:Panel>
    
    
    <%--PANNELLO WEST--%>
    <ext:Panel ID="PanelWestSanca" 
               runat="server" 
               Collapsible="true" 
               Layout="accordion" 
               Region="West" 
               Split="true" 
               MaxWidth="400"
               MinWidth="225" 
               Width="225">
        <Items>
            <ext:Panel ID="Panel7" runat="server" Border="false" Collapsed="True" Icon="FolderGo"
                Title="Item 1">
                <Items>
                </Items>
            </ext:Panel>
            <ext:Panel ID="Panel8" runat="server" Border="false" Collapsed="true" Icon="FolderWrench"
                Title="Item 2">
                <Items>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Panel>
    
    
      <%--PANNELLO CENTER--%>
    <ext:Panel ID="PanelCenterSanca" 
               runat="server" 
               Layout="Fit" 
               Region="Center">
        <Items>
            <ext:TabPanel ID="TabPanelSanca" runat="server" ActiveTabIndex="0" Border="false">
                <Items>
    
    
                    <ext:Panel ID="PanelHomePage" runat="server" Title="Home Page">
                        <AutoLoad Url="HomePageSanca.aspx" ShowMask="true" Mode="IFrame"></AutoLoad>
                    </ext:Panel>
    
    
                    <ext:Panel ID="PanelRegistrazione" runat="server" Title="Registrati">
                        <Content>
                         
                        </Content>
                    </ext:Panel>
                    <ext:Panel ID="PanelOffriPassaggio" runat="server" Title="Offri Passaggio">
                        <Content>
                        
                        </Content> 
                    </ext:Panel>
                    <ext:Panel ID="PanelTrovaPassaggio" runat="server" Title="Trova Passaggio">
                        <Content>
                        
                        </Content>
                    </ext:Panel>
                    <ext:Panel ID="PanelComeFunziona" runat="server" Title="Come Funziona">
                        <Content>
                        
                        </Content>
                    </ext:Panel>
                </Items>
            </ext:TabPanel>
        </Items>
    </ext:Panel>
    
    
    <%--PANNELLO SOUTH--%>
    <ext:Panel ID="PanelSouthSanca" 
               runat="server" 
               Collapsible="true" 
               Height="100"
               MaxHeight="100"
               Region="South" 
               Split="true">
        <Items>
        </Items>
    </ext:Panel>
    
    
    </Items>
    </ext:Viewport>

    Click image for larger version. 

Name:	column.jpg 
Views:	97 
Size:	69.7 KB 
ID:	3464


    As you can see in the image of the problem is in the right column in ColumnLayout
    In fact I found it very difficult to position and align objects in this layout, because it surely does not know him well.
    Please can you help me?

    Thanks to all
    Fabrizio
    Last edited by Fabrizio; Nov 20, 2011 at 10:20 AM.
  2. #2
    Hi,

    When I run that code I can't see the issue you demonstrated with the screen-shot.

Similar Threads

  1. Replies: 5
    Last Post: May 05, 2011, 7:05 PM
  2. Replies: 3
    Last Post: Sep 13, 2010, 4:13 PM
  3. [CLOSED] Page layout using layout controls.
    By SymSure in forum 1.x Premium Help
    Replies: 5
    Last Post: Mar 23, 2010, 12:08 PM
  4. Column Layout auto width problem in IE
    By sz_146 in forum 1.x Help
    Replies: 0
    Last Post: Jan 05, 2009, 10:59 AM
  5. AnchorLayout.Controls position bug
    By Kalitte in forum 1.x Help
    Replies: 1
    Last Post: Jan 03, 2009, 5:54 AM

Tags for this Thread

Posting Permissions