PDA

View Full Version : [CLOSED] ext:Image margin doesn't work in StyleSpec ?



ontiv
Mar 14, 2013, 11:25 AM
Hi @all,

i have the following code



<ext:Panel runat="server" ID="p_footer" Height="45" BodyStyle="border-left:#000000;border-right:#000000;border-top:#000000"
Layout="HBoxLayout">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Middle" Padding="0">
</ext:HBoxLayoutConfig>
</LayoutConfig>
<Items>
<ext:Image ID="i_handup" StyleSpec="cursor:pointer;margin-top:5px" runat="server" ImageUrl="/Resources/handup_gray_light16.png" Height="16" Width="16">
</ext:Image>
</Items>
</ext:Panel>


The "margin-top" doesn't work...

Any idea ??

Thanks

Daniil
Mar 14, 2013, 3:29 PM
Hi @ontiv,

I think it works, just its effect invisible in your sample. Probably, because of the Align="Middle" setting.

HBoxLayout logic transforms margins to absolute positions. So, "margin-top: 5px" becomes "top: 5px;".

Please run this example. The two same images except the StyleSpec setting. And the Image with this setting is shifted down.

Example

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Panel runat="server" Height="50" Layout="HBoxLayout">
<Items>
<ext:Image
runat="server"
ImageUrl="/resources/images/test.png" />
<ext:Image
runat="server"
ImageUrl="/resources/images/test.png"
StyleSpec="margin-top: 5px;" />
</Items>
</ext:Panel>
</form>
</body>
</html>


There is also the Margins property.

Example

<ext:Image
runat="server"
ImageUrl="/resources/images/test.png"
Margins="5 0 0 0" />

ontiv
Mar 18, 2013, 12:54 PM
Hi Daniil,

thanks for reply! This helps me...