[CLOSED] Toolbar misaligned

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Toolbar misaligned

    I wish that the pagingtoolbar gridpanel and Bottombar of formpanel were aligned.
    The Bottombar shifted a few pixels down than the pagingtoolbar of gridpanel.
    The appearance of the borders are slightly different.
    The Bottombar of formpanel should not have the side borders. and must have the upper edge. I have to do with CSS?

    <%@ Page Language="C#" AutoEventWireup="true"  %>
    <%@ 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>Flotte</title> 
         <link rel="stylesheet" type="text/css"  href="../Css/Stylesheet.css" />
        <script type="text/javascript" src="../Js/JScript.js"></script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />  
            <ext:Viewport ID="Viewport1" runat="server" Layout="border">
                <Items>   
                    <ext:GridPanel ID="GridPanel1"
                        runat="server"
                        Title="Flotte"
                        Margins="0 0 5 5"
                        Icon="Folder"
                        Region="Center"
                        AutoExpandColumn="Name"
                        Frame="true">
                        <Store>
                            <ext:Store
                                ID="Store1"
                                runat="server" >
                                <Reader>
                                    <ext:JsonReader IDProperty="ID">
                                        <Fields>
                                            <ext:RecordField Name="Name" />                                      
                                        </Fields>
                                    </ext:JsonReader>
                                </Reader>
                            </ext:Store>
                        </Store>
                        <ColumnModel ID="ColumnModelFlotte" runat="server">
                            <Columns>
                                <ext:Column Header="Nome" DataIndex="Name" />                                                                                 
                            </Columns>
                        </ColumnModel>                     
                        <BottomBar>
                            <ext:PagingToolbar ID="PagingToolbar1" runat="server" />
                        </BottomBar>
                        <LoadMask ShowMask="true" />
                    </ext:GridPanel>
                    <ext:FormPanel
                        ID="FormPanel1"
                        runat="server"
                        Region="East"
                        Width="400"
                        Split="true"
                        Margins="0 0 5 5"
                        Frame="true"
                        Title="Dettaglio Flotta"                   
                        Icon="Lock"
                        DefaultAnchor="100%">
                        <TopBar>
                        <ext:Toolbar ID="StatusBar1"  runat="server" Flat="true" ClassicButtonStyle="true" Height="40">
                            <Items>                
                            </Items>
                            </ext:Toolbar>                   
                        </TopBar>           
                        <Items>        
                            <ext:TextField ID="TextFieldNome" runat="server" FieldLabel="Nome" DataIndex="Name" Disabled="true" />
                        </Items>                    
                        <BottomBar>
                            <ext:StatusBar ID="StatusBar2" runat="server" Text="Bottom bar" />
                        </BottomBar>
                        <Listeners>
                            <ClientValidation Handler="el.getBottomToolbar().setStatus({text : valid ? 'Form is valid' : 'Form is invalid', iconCls: valid ? 'icon-accept' : 'icon-exclamation'});" />
                        </Listeners>                 
                    </ext:FormPanel>                 
                </Items>
            </ext:Viewport>         
        </form>
    </body>
    </html>
    Attached Thumbnails Click image for larger version. 

Name:	Screen.JPG 
Views:	82 
Size:	84.9 KB 
ID:	1708  
    Last edited by Daniil; Oct 13, 2010 at 12:15 PM. Reason: [CLOSED]
  2. #2
    Hi,

    To fix height issue I would suggest to use the Height property.
    To set borders, yes, use css rules.

    Example
    <style type="text/css">
        .myClass {
            border-top: 1px solid !important;
            border-top-color: #99bbe8 !important;
            border-bottom: 1px solid !important;
            border-bottom-color: #99bbe8 !important;
            border-left: 0px !important;
            border-right: 0px !important;
        }
    </style>
    ...
    <ext:StatusBar ID="StatusBar2" runat="server" Text="Bottom bar" Height="27" Cls="myClass" />
  3. #3
    ok thanks I almost reached my result.
    There are no problems.
    the board has some padding.
    see attached image
    Attached Thumbnails Click image for larger version. 

Name:	Cattura.JPG 
Views:	65 
Size:	42.9 KB 
ID:	1709  
  4. #4
    Do you mean texts are misaligned?

    To fix you could use this css rule in addition to the previous ones.

    .myClass .x-status-text {
        padding-top: 4px !important;
    }
  5. #5
    between the top edge and the edge of the panel form there are spaces.
    see attached image
    Attached Thumbnails Click image for larger version. 

Name:	Cattura.jpg 
Views:	62 
Size:	34.0 KB 
ID:	1710  
  6. #6
    I can't see this difference on my side.

    Maybe the matter is in Stylesheet.css file.

    Could you provide this?
    And what browser do you use to test?
  7. #7
    I think the task is to set css rules correctly in according to your requirements.
    FF's Firebug or IE's Developer tools would greatly help you to achieve a view what you need.
    Last edited by Daniil; Oct 11, 2010 at 6:41 PM.
  8. #8
    the problem is on all browsers.
    I tried with firefox and the result does not change.
    The problem occurs with Frame = "true". See attached image (firefox). I have highlighted in yellow spaces that should not be present.
    I found x-toolbar-text div.xtb with firebug, but the result does not change
    Can you try this simple code?

    <%@ Page Language="C#" AutoEventWireup="true"  %>
    <%@ 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>Flotte</title> </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" /> 
            <center><br />
            <ext:FormPanel 
                ID="FormPanel1" 
                runat="server" 
                Region="East"
                Width="400"
                Split="true"
                Margins="0 0 0 0"
                Frame="true" 
                Title="FormPanel with"                    
                Icon="Lock"
                DefaultAnchor="100%">           
                <Items>         
                    <ext:TextField ID="TextFieldNome" runat="server" FieldLabel="Nome" DataIndex="Name" Disabled="true" />
                     <ext:TextField ID="TextField1" runat="server" FieldLabel="Nome" DataIndex="Name" Disabled="true" />
                 </Items>                    
                <BottomBar>
                    <ext:StatusBar ID="StatusBar2" runat="server" Height="30" Cls="bottomf2" Text="pppppppp"/>
                </BottomBar>
                </ext:FormPanel>
                <br />
                
            <ext:FormPanel 
                ID="FormPanel2" 
                runat="server" 
                Region="East"
                Width="400"
                Split="true"
                Margins="0 0 0 0"
                Frame="false" 
                Title="FormPanel no frame"                    
                Icon="Lock"
                DefaultAnchor="100%">           
                <Items>         
                    <ext:TextField ID="TextField2" runat="server" FieldLabel="Nome" DataIndex="Name" Disabled="true" />
                    <ext:TextField ID="TextField3" runat="server" FieldLabel="Nome" DataIndex="Name" Disabled="true" />
                </Items>                    
                <BottomBar>
                    <ext:StatusBar ID="StatusBar1" runat="server" Height="30" Cls="bottomf2" Text="pppppppp"/>
                </BottomBar> 
            </ext:FormPanel>
            </center>                
        </form>
    </body>
    </html>
    Attached Thumbnails Click image for larger version. 

Name:	Cattura.JPG 
Views:	70 
Size:	22.4 KB 
ID:	1711  
  9. #9
    Hi,

    When the Frame is true there are many wrapper elements to get custom rounded corners.
    I can suggest you these css rules.

    Example
    <style type="text/css">
        .myClass div.x-panel-ml {
            padding-left: 0px;
        }
        .myClass div.x-panel-mr {
            padding-right: 0px;
        }
    </style>
    
    ...
    
    <ext:FormPanel
                ID="FormPanel1"
                runat="server"
                Frame="true"
                Cls="myClass"
                ...>
    Please clarify what's the reason to use Frame?
  10. #10

    Bottombar with white background

    Ok I got what I wanted. (See attached picture)
    I worked in the style of my formpanel
     BodyStyle="background-color:#ffffff; padding:10px; border: 1px solid #99bbe8;"
    Attached Thumbnails Click image for larger version. 

Name:	Cattura.jpg 
Views:	65 
Size:	98.5 KB 
ID:	1712  
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 7
    Last Post: May 25, 2011, 9:35 AM
  2. Replies: 3
    Last Post: Apr 06, 2011, 6:27 PM
  3. Replies: 1
    Last Post: Mar 07, 2011, 9:39 AM
  4. Replies: 0
    Last Post: Feb 01, 2010, 5:44 AM
  5. ComboBox misaligned in Toolbar
    By dbassett74 in forum 1.x Help
    Replies: 1
    Last Post: Jun 05, 2009, 3:59 PM

Posting Permissions