vbox layout is not working on image button

  1. #1

    vbox layout is not working on image button

    i trying to build to column, and in each column there are 2-3 image buttons layout vertically.

    i am using column layout first, then in each column use vbox layout to layout the button.

    it is working on normal button, but when i change to image button it is not working.

    could any one help me with this ?

    thank you very much!!

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication3._Default" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <%--<link href="/content/StyleSheet1.css" rel="stylesheet" type="text/css" />--%>
    </head>
    <body>
    <form runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport ID="Viewport1" runat="server">
            <Items>
                <ext:Panel ID="pnlNorth" runat="server" Height="80" Border="false" Header="false">
                    <Content>
                        <div id="settingsWrapper">
                            <div id="settings">
                                <ul>
                                    <li id="logo">
                                        <img src="skin/logo.gif" alt="settings" />Header</li>
                                </ul>
                            </div>
                        </div>
                    </Content>
                </ext:Panel>
                <ext:Panel ID="Panel1" runat="server" Height="1000" Layout="fit" Border="false">
                    <Items>
                        <ext:ColumnLayout ID="columnLayoutCalendar" runat="server" Split="true" FitHeight="true">
                            <Columns>
                                <ext:LayoutColumn ColumnWidth="0.5">
                                    <ext:Panel ID="Panel2" runat="server" Layout="VBoxLayout" Border="false">
                                        <Defaults>
                                            <ext:Parameter Name="margins" Value="0 0 5 0" Mode="Value" />
                                        </Defaults>
                                        <LayoutConfig>
                                            <ext:VBoxLayoutConfig Padding="5" Align="Center" />
                                        </LayoutConfig>
                                        <Items>
                                            <ext:ImageButton runat="server" ImageUrl="skin/Project Plan - Gant Chart.png" />
                                            <ext:ImageButton ID="ImageButton1" runat="server" ImageUrl="skin/Project Plan - Gant Chart.png" />
                                            <ext:ImageButton ID="ImageButton2" runat="server" ImageUrl="skin/Project Plan - Gant Chart.png" />
                                            <ext:ImageButton ID="ImageButton3" runat="server" ImageUrl="skin/Project Plan - Gant Chart.png" />
                                        </Items>
                                    </ext:Panel>
                                </ext:LayoutColumn>
                                <ext:LayoutColumn ColumnWidth="0.5">
                                    <ext:Panel ID="pnlAlignMiddle" runat="server" Layout="VBoxLayout" Border="false">
                                        <Defaults>
                                            <ext:Parameter Name="margins" Value="0 0 5 0" Mode="Value" />
                                        </Defaults>
                                        <LayoutConfig>
                                            <ext:VBoxLayoutConfig Padding="5" Align="Center" />
                                        </LayoutConfig>
                                        <Items>
                                            <%--<ext:ImageButton ID="ImageButton4" runat="server" ImageUrl="skin/Project Plan - Gant Chart.png" />--%>
                                            <ext:Button ID="Button3" runat="server" Text="Button 2" />
                                            <ext:Button ID="Button4" runat="server" Text="Button 3" />
                                            <ext:Button ID="Button5" runat="server" Text="Button 4" />
                                        </Items>
                                    </ext:Panel>
                                </ext:LayoutColumn>
                            </Columns>
                        </ext:ColumnLayout>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </form>
    </body>
    </html>
  2. #2
    Hi,

    Generally, VBoxLayout requires its items to have explicit Height or Flex properties to be set up.

    A common Button has default height (22), therefore it works, but ImageButton have no height.

    To fix please set up Height="22" for all ImageButtons.

Similar Threads

  1. Replies: 3
    Last Post: Feb 21, 2012, 7:46 AM
  2. [CLOSED] Background image style for panel is not working in chrome
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Oct 20, 2011, 7:04 AM
  3. [CLOSED] vbox layout inside column layout
    By craig2005 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 04, 2011, 2:44 PM
  4. [CLOSED] [1.0] Issue with VBox Layout in Latest SVN
    By Hari_CSC in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Jul 07, 2010, 5:07 PM
  5. Replies: 3
    Last Post: Nov 06, 2009, 10:46 AM

Posting Permissions