[CLOSED] More questions about Styles

  1. #1

    [CLOSED] More questions about Styles

    Hi

    1 - DisplayField seems to be slightly unaligned with other components by a few pixels. Using a Absolute Layout, same X and Y position, the DisplayFields are render a lite below the Labels...

    2 - How I do the Labels, DisplayFields and TextFields follow the same styles? In my test page, the textfield got a style, but the displayField and Label, no...

    3 - When I find the documentation about the styles of ext.net 2.x? When I want to change, for example, the font of the labels of all ext.net components, which can easily find which section of the css-file change?

    I create an test aspx page for demostrate my doubts...

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Teste4.aspx.vb" Inherits="SuperaWeb.Teste4" %>
    <%@ 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></title>
        <style type="text/css">
    
           .x-form-field {
                font-size:8px !important;
                font-family: @FangSong !important;
            }
     
            .x-form-item-label {
                font-size:8px !important;
                font-family: @FangSong !important;
            }
            
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        
        <ext:ResourceManager ID="ResourceManager1" runat="server" Locale="pt-BR" />
        <ext:FieldSet runat="server" ID="fsSolicitacao" Title="Solicitação de Cotação de Preços" Layout="AbsoluteLayout" X="100" Y="100" Height="130px" Width="600px">
            <Items>
                <ext:Label runat="server" ID="lblFornecedorNome" Text="Label 01" X="5" Y="10" Width="70px" />
                <ext:Label runat="server" ID="lblFornecedorTelefone" Text="Label 02" X="5" Y="25" Width="70px" />
                <ext:Label runat="server" ID="lblFornecedorContato" Text="Label 03" X="5" Y="40" Width="70px" />
                <ext:Label runat="server" ID="lblFornecedorEmail" Text="Label 04" X="200" Y="40" Width="70px" />
                <ext:DisplayField runat="server" ID="dsFornecedorNome" Text="Display 01" X="67" Y="10" Width="150px" />
                <ext:DisplayField runat="server" ID="dsFornecedorTelefone" Text="Display 02" X="67" Y="25" Width="150px" />
                <ext:DisplayField runat="server" ID="dsFornecedorContato" Text="Display 03" X="67" Y="40" Width="150px" />
                <ext:DisplayField runat="server" ID="dsFornecedorEmail" Text="Display 04" X="250" Y="40" Width="150px" />
                <ext:TextField runat="server" ID="txtNome" FieldLabel="TextField 02 (FieldLabel)" Text="TextField 02 (Text)" X="5" Y="70" LabelWidth="110" Width="300" />
            </Items>
        </ext:FieldSet>
        </form>
    </body>
    </html>
    Thanks for any help!!!
    Last edited by Daniil; Jan 26, 2012 at 1:09 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Quote Originally Posted by supera View Post
    1 - DisplayField seems to be slightly unaligned with other components by a few pixels. Using a Absolute Layout, same X and Y position, the DisplayFields are render a lite below the Labels...
    There is the "padding-top: 3px;" CSS rule for DisplayField.

    Quote Originally Posted by supera View Post
    2 - How I do the Labels, DisplayFields and TextFields follow the same styles? In my test page, the textfield got a style, but the displayField and Label, no...
    Applying a respective CSS rule.

    Quote Originally Posted by supera View Post
    3 - When I find the documentation about the styles of ext.net 2.x? When I want to change, for example, the font of the labels of all ext.net components, which can easily find which section of the css-file change?
    Unfortunately, there is no such docs. To be honest, it would too-too big task to create such docs.

    Just inspect HTML elements using, for example, IE or Chrome Developer Tools, FireBug for FireFox, you will see its styles. You can change these styles directly in the Developer Tools or FireBug trying to get a required result. Then you can apply these new styles on a page.

    In some time you will do it faster and faster.

    I've spent a few minutes to create the following example for you. I've typed such post more time :)

    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 v2 Example</title>
    
        <style type="text/css">
            .x-label-value, .x-form-display-field, .x-form-field, .x-form-item-label {
                font-size: 8px;
                font-family: @FangSong;
            }
            
            .x-form-display-field {
                padding-top: 0px;
            }
        </style>
    </head>
    <body>
        <form runat="server">
         
        <ext:ResourceManager runat="server" />
        <ext:FieldSet 
            runat="server" 
            Height="130" 
            Width="600"
            Layout="AbsoluteLayout">
            <Items>
                <ext:Label runat="server" Text="Label 01" X="5" Y="10" Width="70" />
                <ext:Label runat="server" Text="Label 02" X="5" Y="25" Width="70" />
                <ext:Label runat="server" Text="Label 03" X="5" Y="40" Width="70" />
                <ext:Label runat="server" Text="Label 04" X="200" Y="40" Width="70" />
                <ext:DisplayField runat="server" Text="Display 01" X="67" Y="10" Width="150" />
                <ext:DisplayField runat="server" Text="Display 02" X="67" Y="25" Width="150" />
                <ext:DisplayField runat="server" Text="Display 03" X="67" Y="40" Width="150" />
                <ext:DisplayField runat="server" Text="Display 04" X="250" Y="40" Width="150" />
                <ext:TextField 
                    runat="server" 
                    FieldLabel="TextField 02 (FieldLabel)" 
                    Text="TextField 02 (Text)" 
                    X="5" 
                    Y="70" 
                    LabelWidth="110" 
                    Width="300" />
            </Items>
        </ext:FieldSet>
        </form>
    </body>
    </html>
  3. #3
    Hi Daniil...

    thank you very much, even for his time spent with me...
    I'm trying to make the most of your tips and solutions and work things out for myself...

    I think we're doing very well ... I'm willing to put my application to run, which has until now been testing, but it's getting pretty good...

    Already located in the IE Developer Tools you mentioned ... will be of great help ...

    The styles that you've put me in your example worked perfectly ... I am very grateful for them. thanks again
  4. #4
    This video shows how to find respective rules and apply own
    http://www.youtube.com/watch?v=cfN9U...EA1A2064FFA15C
    Vladimir Shcheglov
    Sr. Developer
  5. #5
    Thanks a lot, Vladimir...

    much easier...

    Thanks again

Similar Threads

  1. [CLOSED] Override styles
    By FVNoel in forum 1.x Premium Help
    Replies: 1
    Last Post: Mar 15, 2012, 4:19 PM
  2. [CLOSED] [1.0] Couple MVC questions and property questions
    By alliedwallet.com in forum 1.x Premium Help
    Replies: 5
    Last Post: Dec 28, 2010, 12:01 PM
  3. [CLOSED] [1.0] Window/Component Styles
    By GavinR in forum 1.x Premium Help
    Replies: 4
    Last Post: Nov 24, 2010, 3:38 PM
  4. [CLOSED] [1.0] MVC PartialViews and styles?
    By Timothy in forum 1.x Premium Help
    Replies: 14
    Last Post: Feb 14, 2010, 5:12 PM
  5. TabPanel Styles
    By stevenoc in forum 1.x Help
    Replies: 0
    Last Post: Aug 26, 2009, 8:15 AM

Posting Permissions