What's New?

[CLOSED] How to set the Toolbar buttons alignment to bottom

  1. #1
    Aug 01, 2011, 6:09 PM

    [CLOSED] How to set the Toolbar buttons alignment to bottom

    Hi,

    I am trying to set a background Image and add some buttons to the right of the toolbar as showin the code below. By default the buttons are aligned to the top.

    <ext:Toolbar ID="tbLogo" runat="server" StyleSpec="height:50px; background-color: #cdcdcd; 
                     background-image: Url('/Images/Analytics_gray_glossy.png'); background-repeat:no-repeat;
                     vertical-align:middle">
                  <Items>
                     <ext:ToolbarFill />
                     <ext:ToolbarSeparator />
                     <ext:Button ID="btnLogout" runat="server" Icon="LockOpen" Text="Logout" IconAlign="Top" >
                        <DirectEvents>
                           <Click OnEvent="btnLogout_Click" />
                        </DirectEvents>
                     </ext:Button>
                  </Items>
               </ext:Toolbar>
    What i need is the buttons of toolbar should be displayed on the right bottom. How can i achive this?
    Note: The background Image is 60PX height.

    Regards,
    Manoj.
    Last edited by Daniil; Aug 02, 2011 at 1:02 PM. Reason: [CLOSED]
  2. #2
    Aug 01, 2011, 7:48 PM
    Hi,

    I can suggest you this way.

    Example
    <%@ Page Language="C#" %>

<%@ 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 runat="server">
    <title>Ext.Net Example</title>
    <style type="text/css">
        .x-toolbar.my-toolbar {
            background-image: Url('/Resources/images/60pxHeight.jpg');
            background-repeat: no-repeat;
        }
        
        .x-toolbar.my-toolbar .x-toolbar-ct {
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Panel runat="server" Width="300">
            <TopBar>
                <ext:Toolbar runat="server" Height="60" Cls="my-toolbar">
                    <Items>
                        <ext:ToolbarFill />
                        <ext:ToolbarSeparator />
                        <ext:Button runat="server" Text="Logout" />
                    </Items>
                </ext:Toolbar>
            </TopBar>
        </ext:Panel>
    </form>
</body>
</html>
  3. #3
    Aug 02, 2011, 6:39 AM
    Daniil,

    Thank you for your quick solution. I have small query.

    The below CSS

    1.
    . x-toobar
    . x-toolbar-ct

    are predefined or its just an css class name. If these are predefined wher can i find these CSS class names.

    2. If i want to move the CSS code from page and put in a common .CSS file then which property i need to set in the toolbar.

    Regards,
    Manoj
  4. #4
    Aug 02, 2011, 7:52 AM
    Quote Originally Posted by ISI View Post
    The below CSS

    1.
    . x-toobar
    . x-toolbar-ct

    are predefined or its just an css class name. If these are predefined wher can i find these CSS class names.
    Yes, these names are predefined.

    You can see all CSS resources within the ExtJS/Ext.Net sources. Most of CSS rules are placed into this folder:
    <SVN Ext.Net folder>\Ext.Net\Build\Ext.Net\extjs\resources\css\
    Quote Originally Posted by ISI View Post
    2. If i want to move the CSS code from page and put in a common .CSS file then which property i need to set in the toolbar.
    Please still use .Cls, there won't be any changes.
  5. #5
    Aug 02, 2011, 1:02 PM
    Daniil

    Thank you providing details.

    Regards,
    Manoj.

Similar Threads

  1. [CLOSED] Buttons alignment on ButtonGroup
    By softmachine2011 in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 01, 2012, 8:53 AM
  2. Gridpanel toolbar(top bar and bottom bar) not loading
    By kondareddy1984 in forum 1.x Help
    Replies: 1
    Last Post: Nov 03, 2011, 7:03 PM
  3. [CLOSED] How to reduce the padding for buttons at panel bottom?
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 08, 2011, 4:39 PM
  4. [CLOSED] TabPanel: tab buttons alignment
    By acrossdev in forum 1.x Legacy Premium Help
    Replies: 12
    Last Post: May 14, 2009, 9:25 AM
  5. [CLOSED] TabPanel buttons alignment
    By riccardosarti in forum 1.x Help
    Replies: 3
    Last Post: Sep 25, 2008, 4:28 PM

Posting Permissions