[CLOSED] Form Layout Spacing in IIS

**CMA** · Oct 08, 2010, 1:08 PM

If you take a look at the overlapped windows in the attached picture. Both windows are the same but to one on the left is in IIS and the one on the right in in the Development environment.

It seems IIS is spacing out the controls more than the environments runtime, meaning it's pushing my buttons off the bottom of the window, but I cant see this until I roll it out to IIS. Is this meant to happen? Is there something I can do to stop this?

The controls are in a form layout.

Dev is VStudio 2008 SP1
IIS is on Windows Server 2003

Cheers

Rob

**Vladimir** · Oct 08, 2010, 3:06 PM

Hi,

IIS cannot be the issue reason because brIIS is out of generating/rendering process
It should be another issue. Did you test that page under same IE with same OS?

**geoffrey.mcgill** · Oct 08, 2010, 3:37 PM

My guess is there's some css (inline or linked) that is being rendered differently to the page by something else on the page (not ext.net).

Maybe you are linking to a .css which is resolving correctly on the remote server, but not pointing to the correct location locally.

**geoffrey.mcgill** · Oct 08, 2010, 4:05 PM

My second guess is these browser windows are not being run under the *exact* same conditions. Maybe one is being run in compat mode.

This screen capture details a couple of the differences.

**CMA** · Oct 11, 2010, 11:08 AM

Thanks for the replies.

There is no external CSS being referenced.
Both windows were displayed on the same PC and the version of the browser and OS are exactly the same.

It is not being run in Compat mode. Its just a fresh browser that doesnt show the compat button when VS starts the local host browser it shows the Compat button. IE itself is deciding to show the Compat button once it knows its looking at localhost.

My IE version is 8.0.6001.18702. To me the only difference is the serving of the pages which could cause the extra pixles to be inserted

The 4 and 6px difference you spotted is not a deliberate change in code, both browsers are using the exact same code just one is published to IIS and the other is running through the VS environment.

Is there anything I can provide that might make it easier for you to find out whats causing this?

**CMA** · Oct 13, 2010, 12:23 PM

I've done a little more digging.

This screenshot is a page hosted on my Windows XP desktop and viewed in Firefox on the left and IE8 on the right. This shows it is not IIS at fault but its the way IE deals with a page from IIS at a guess as it doesnt do it while running through Visual Studio.

My version of IE is 8.0.6001.18702 if that helps.

This is the sample page for you to try it for yourself and see what can be done.

<div>
    <ext:ScriptManager ID="ResourceManager1" runat="server" />
    <ext:Panel runat="server" Height="600" Width="900" ID="Panel1">
      <Body>
 
      </Body>
    </ext:Panel>
 
 
    <ext:Window ID="wdwNewSealWindow" Height="456" Width="380" ShowOnLoad="true" runat="server" Title="Enter new seal details" Header="true" Closable="false" Resizable="false">
    <Body>
      <ext:FormPanel runat="server" ButtonAlign="Right" ID="pnlNewSealWindow" >
        <Body>
          <ext:FormLayout ID="FormLayout1" runat="server">
            <ext:Anchor>
              <ext:TextField ID="txtPropertySealNumberNEW" runat="server" FieldLabel="Seal Number"
                Width="250" AllowBlank="false" MaxLength="20">
              </ext:TextField>
            </ext:Anchor>
            <ext:Anchor>
              <ext:TextArea ID="txtDescriptionNEW" runat="server" FieldLabel="Description" Width="250"
                Height="75" AllowBlank="true" MaxLength="60">
              </ext:TextArea>
            </ext:Anchor>
            <ext:Anchor>
              <ext:TextField ID="txtReceiptNumberNEW" runat="server" FieldLabel="Receipt Number"
                Width="250" MaxLength="20" AllowBlank="false">
              </ext:TextField>
            </ext:Anchor>
            <ext:Anchor>
              <ext:DateField InvalidText="Please enter date in valid format" AltFormats="dd/MM/yyyy|d/M/yyyy|dd/M/yyyy|d/MM/yyyy|d/M/yy|dd/M/yy"
                ID="dteDateNEW" runat="server" FieldLabel="Date" Width="200" AllowBlank="false">
              </ext:DateField>
            </ext:Anchor>
            <ext:Anchor>
              <ext:ComboBox ID="cboPropertySourceNEW" runat="server" Width="200"
                Mode="Local" SelectOnFocus="true"
                FieldLabel="Property Source" EmptyText="[Source...]" LoadingText="Loading....."
                TriggerAction="All" AllowBlank="false" TypeAhead="true">
              </ext:ComboBox>
            </ext:Anchor>
            <ext:Anchor>
              <ext:ComboBox ID="cboPropertyLocationNEW" runat="server" Width="200" EmptyText="[Location...]"
                LoadingText="Loading....." FieldLabel="Property Location"
                 TriggerAction="All" Mode="Local"
                AllowBlank="false" TypeAhead="true">
 
              </ext:ComboBox>
            </ext:Anchor>
            <ext:Anchor>
              <ext:ComboBox ID="cboPropertySubLocationNEW" runat="server" Width="200" EmptyText="[Sub Location...]"
                LoadingText="Loading....." FieldLabel="Property Sub Location" 
                 TriggerAction="All" Mode="Local"
                AllowBlank="true" TypeAhead="true">
              </ext:ComboBox>
            </ext:Anchor>
            <ext:Anchor>
              <ext:Checkbox ID="chkSearchedNEW" runat="server" FieldLabel="Searched" Checked="false">
              </ext:Checkbox>
            </ext:Anchor>
            <ext:Anchor>
              <ext:NumberField ID="txtHeightNEW" runat="server" FieldLabel="Height (cm)" Width="125"
                AllowDecimals="false" AllowBlank="false" MaxLength="4">
              </ext:NumberField>
            </ext:Anchor>
            <ext:Anchor>
              <ext:NumberField ID="txtDepthNEW" runat="server" FieldLabel="Depth (cm)" Width="125"
                AllowDecimals="false" AllowBlank="false" MaxLength="4">
              </ext:NumberField>
            </ext:Anchor>
            <ext:Anchor>
              <ext:NumberField ID="txtWidthNEW" runat="server" FieldLabel="Width (cm)" Width="125"
                AllowDecimals="false" AllowBlank="false" MaxLength="4">
              </ext:NumberField>
            </ext:Anchor>
            <ext:Anchor>
              <ext:NumberField ID="txtWeightNEW" runat="server" FieldLabel="Weight (kg)" Width="125"
                AllowDecimals="true" AllowBlank="false" MaxLength="9">
              </ext:NumberField>
            </ext:Anchor>
          </ext:FormLayout>
        </Body>
        <Buttons>
          <ext:Button ID="wbCancelNewSeal" runat="server" Text="Cancel" Icon="Cross">
            <Listeners>
              <Click Handler="#{wdwNewSealWindow}.hide();" />
            </Listeners>
          </ext:Button>
          <ext:Button ID="wbSaveNewSeal" runat="server" Text="Save" Icon="Disk">
 
          </ext:Button>
        </Buttons>
      </ext:FormPanel>
    </Body>
  </ext:Window>
 
  </div>

**Vladimir** · Oct 13, 2010, 4:10 PM

Hi,

The issue is not depending from IIS. It occurs when switch IE8 to the compatibility mode only. IE7 (or IE8 Compatibility Mode) calculates height for each form item one pixel more (not sure why).

At this moment I can suggest to set another height for window if IE7 is used

protected void Page_Load(object sender, EventArgs e)
        {
            if (!Ext.IsAjaxRequest && Ext.IsIE7)
            {
                wdwNewSealWindow.Height = 470;
            }
        }

**Daniil** · Oct 13, 2010, 4:11 PM

Hi,

Using your code I have the same result both in IIS and in Dev.

Please twice ensure that you use exactly the same code, there are no any custom css rules.

At the moment I'm out of ideas...

**geoffrey.mcgill** · Oct 13, 2010, 4:31 PM

Another suggestion, you should add an <ext:FitLayout> between the Window and FormPanel. Something like the following...

Example

<ext:Window ...>
    <Body>
        <ext:FitLayout runat="server">
            <Items>
                <ext:FormPanel ...>

That probably won't solve the 1px extra spacing issue, but will improve the efficiency of the rendering.

**CMA** · Oct 14, 2010, 8:16 AM

Originally Posted by Vladimir

Hi,

The issue is not depending from IIS. It occurs when switch IE8 to the compatibility mode only. IE7 (or IE8 Compatibility Mode) calculates height for each form item one pixel more (not sure why).

[/CODE]

Vladimir, excellent! I know understand why it is doing it. Within the IE settings (Tools --> Compatibility View Settings) there is a tick box towards the bottom with the caption "Display Intranet Sites in Compatibility View" this needs to be unticked and it will not force the site into compatibilty mode.

Many thanks for your assistance.

Thread: [CLOSED] Form Layout Spacing in IIS

Thread Tools

Search Thread

Display

[CLOSED] Form Layout Spacing in IIS

Similar Threads

Form layout and Anchors

[CLOSED] Form Layout problem

MDI form and Complex Layout

[CLOSED] GridPanel in Form Layout

[CLOSED] Need help with form layout

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Form Layout Spacing in IIS

[CLOSED] Form Layout Spacing in IIS

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us