PDA

View Full Version : [CLOSED] More questions about Styles



supera
Jan 25, 2012, 5:12 PM
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!!!

Daniil
Jan 25, 2012, 10:51 PM
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...


There is the "padding-top: 3px;" CSS rule for DisplayField.



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.



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>

supera
Jan 26, 2012, 10:22 AM
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

Vladimir
Jan 26, 2012, 10:37 AM
This video shows how to find respective rules and apply own
http://www.youtube.com/watch?v=cfN9UHWzsUk&feature=results_video&playnext=1&list=PL84EA1A2064FFA15C

supera
Jan 26, 2012, 12:40 PM
Thanks a lot, Vladimir...

much easier...

Thanks again