PDA

View Full Version : [CLOSED] Control alignment



cwolcott
Sep 07, 2012, 3:29 PM
I am trying to center a ComboBox and it's label within a window. I am wrapping the ComboxBox in a container and the label is centered, but the ComboBox itself is not. What am I missing?



<%@ 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 id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<div>
<ext:Window runat="server" Closable="true" Title="Sample Layout" Constrain="true"
Width="250" Resizable="false" BodyStyle="height: auto;" BodyPadding="5" XHeight="undefined"
Border="false" Y="20" Modal="true">
<Items>
<ext:Container runat="server" StyleSpec="text-align: center">
<Items>
<ext:ComboBox ID="ComboBox1" runat="server" FieldLabel="Label" EmptyText="Select option..."
TypeAhead="true" AllowBlank="false" LabelAlign="Top" LabelStyle="font-size: 8pt"
PaddingSpec="10;0;0;0">
<Items>
<ext:ListItem Text="Option 1" />
<ext:ListItem Text="Option 2" />
<ext:ListItem Text="Option 3" />
</Items>
</ext:ComboBox>
</Items>
</ext:Container>
<ext:FieldSet runat="server" Title="General" Collapsible="true" Collapsed="true">
<Items>
<ext:TextArea runat="server" FieldLabel="Text Area" LabelAlign="Top" />
</Items>
</ext:FieldSet>
</Items>
</ext:Window>
</div>
</form>
</body>
</html>

Daniil
Sep 07, 2012, 4:58 PM
Hi,

Nice to see you again on the forums!

I would recommend the following.

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>
<ext:ResourceManager runat="server" />

<ext:Window
runat="server"
Width="250"
BodyPadding="20">
<Items>
<ext:Container runat="server" Layout="HBoxLayout">
<LayoutConfig>
<ext:HBoxLayoutConfig Pack="Center" />
</LayoutConfig>
<Items>
<ext:ComboBox
runat="server"
FieldLabel="Label"
LabelAlign="Top"
LabelStyle="text-align: center;" />
</Items>
</ext:Container>
<ext:FieldSet
runat="server"
Title="General"
Collapsible="true"
Collapsed="true"
MarginSpec="20 0 0">
<Items>
<ext:TextArea runat="server" FieldLabel="Text Area" LabelAlign="Top" />
</Items>
</ext:FieldSet>
</Items>
</ext:Window>
</body>
</html>

It works well with the last sources. You might need to set

BodyStyle="height: auto;" XHeight="undefined"
to get auto height working.

cwolcott
Sep 07, 2012, 5:14 PM
Nice to be back. Hopefully I can concentrate more on development rather than managing my team. I think I will have about a month of pure coding.

The suggestion looks good when the window first comes up, but when I expand the fieldset "General" everything shifts back to the left.

I am still working with a revision from July 27. Plan to upgrade this weekend to the latest SVN.

Daniil
Sep 07, 2012, 5:20 PM
Nice to be back. Hopefully I can concentrate more on development rather than managing my team. I think I will have about a month of pure coding.

Good news! Hope you will enjoy codding!



The suggestion looks good when the window first comes up, but when I expand the fieldset "General" everything shifts back to the left.


I am unable to reproduce. Could you test it with the 2.1 branch on your side? Is it still reproducible?



I am still working with a revision from July 27. Plan to upgrade this weekend to the latest SVN.

Good point! There is already a lot of improvements (mainly, MVC support) and bug fixes!

cwolcott
Sep 07, 2012, 5:45 PM
I am still having an issue running against Revision 4334 of Ext.Net 2.1.

It looks great when it is drawn the first time, but when I expand the fieldset the combobox and label are shifted back to left alignment.

cwolcott
Sep 07, 2012, 6:18 PM
I found something. Once I defined the width attribute on the combobox everything was OK. Not sure why.

Vladimir
Sep 07, 2012, 6:20 PM
If you add the following properties to the window then does the issue gone?


Layout="Anchor"
DefaultAnchor="100%"

cwolcott
Sep 07, 2012, 6:36 PM
If you add the following properties to the window then does the issue gone?


Layout="Anchor"
DefaultAnchor="100%"


No. If I remove the width attribute from the combobox, that I stated in thread #6, and add the above to my Window the combobox still bounces back to the left if I select an item or expand the fieldset.

Daniil
Sep 07, 2012, 6:41 PM
I am still having an issue running against Revision 4334 of Ext.Net 2.1.

It looks great when it is drawn the first time, but when I expand the fieldset the combobox and label are shifted back to left alignment.

What browser do you reproduce it with? I am running the page under FireFox and unable to reproduce.

cwolcott
Sep 07, 2012, 6:46 PM
What browser do you reproduce it with? I am running the page under FireFox and unable to reproduce.

I am using Chrome 11. I will test under firefox here and try some more test cases at home this weekend.

Daniil
Sep 07, 2012, 6:48 PM
Thank you, it is reproducible with Chrome on my side as well!

cwolcott
Sep 07, 2012, 6:52 PM
Thank you, it is reproducible with Chrome on my side as well!

When I tested it under Firefox everything worked. I fun looking into why Chrome 11 is causing an issue. I will make sure to note my browser in future threads.

Daniil
Sep 07, 2012, 6:54 PM
I think setting some explicit Width is a good solution, auto-sizing doesn't work well in all cases.

Though, maybe it is a bug, not sure yet.

What do you think, @Vladimir?

Daniil
Sep 07, 2012, 6:57 PM
I will make sure to note my browser in future threads.

Yes, it often helps to save your and out time.

Generally, this

using Chrome 11 (unless noted)
in your signature is enough. The revision in the signature is also helpful. Good point!

Vladimir
Sep 07, 2012, 6:59 PM
Good pratice for HBox layout items to set Flex or Width properties. It helps to avoid many troubles

cwolcott
Sep 07, 2012, 7:39 PM
Thanks gents. Please close the thread.