[CLOSED] Strange Layout Problem

[Peter.Treier]

Hi all
I need to display a litte HTML Message in a Window...
This is the Window

    
      <ext:Window runat="server" ID="winLockDialog" Title="LockWarningTitle" BodyCls="lockMessage"  Width="450" Height="185" Modal="True" Closable="False" Resizable="False" Hidden="True" ButtonAlign="Center" Layout="fit">
        <Items>
          <ext:Container runat="server" ID="taMessage" Border="false" MarginSpec="10 0 10 0" />
        </Items>
        <Buttons>
          <ext:Button runat="server" ID="cmdLockCancel" Text="Cancel" Icon="Decline">
            <Listeners>
              <Click Handler="#{winLockDialog}.hide()"></Click>
            </Listeners>
          </ext:Button>
          <ext:Button runat="server" ID="cmdLockAccept" Text="OpenReadOnly>" Icon="LockGo">
          </ext:Button>
          <ext:Button runat="server" ID="cmdLockTake" Text="LockBreak" Icon="LockBreak">
          </ext:Button>

        </Buttons>
      </ext:Window>

The Message HTML looks like that

<div style="width:400px; margin:0 auto;background-color:white;">
    <table style="background-color:white">
    <tr>
        <td><div style="text-align: center"><b>Order is Locked</b><br />since<br />6/6/2016 9:04 AM<br />by</div></td>
    </tr>
    <tr>
        <td><div style="text-align: center"><b>Christina X<br /></b>Phone +41611234567</div ></td>
    </tr>
    </table>
</div>

and I use this CSS for the White Window Background

.lockMessage{
  background-color: white;
}

The Message appears not Centered -> Attached Image...

How can I center the Content in this Window ?

An Answer before Sunday would be great, because we work this Sunday...

Thanks a lot

Peter

[fabricio.murta]

Hello!

We could help you a quick response if you provided a fully runnable sample we could paste on VS & run. A code based on this example, for example, would do: Simple Ext.NET Window sample.

Anyway, we'll try to build the view like you imprinted and give you feedback about it. Keep in mind next time, fully runnable examples allows us to reproduce your issue at once and give you reply without much guesswork.

[fabricio.murta]

Hello again, Peter!

I couldn't really see a problem on Ext.NET. But CSS styling of your HTML contents.

Consider this HTML code to add into your window. Notice I added colored borders and also a width with 100% just to indicate it to use all of its surrounding free space. I am not sure this CSS will work on any browsers, but this suggests that the problem is with your HTML snippet not Ext.NET.

<div style="width:100%; margin:0 auto;background-color:white; border:1px solid red">
    <table style="background-color:white; border: 1px solid blue; width: 100%">
    <tr>
        <td><div style="text-align: center"><b>Order is Locked</b><br />since<br />6/6/2016 9:04 AM<br />by</div></td>
    </tr>
    <tr>
        <td><div style="text-align: center"><b>Christina X<br /></b>Phone +41611234567</div ></td>
    </tr>
    </table>
</div>

I hope this helps!

[Peter.Treier]

Good Morning Fabricio
I finished my one Page Example right now - but you already provided the solution !
Thanks for it...

It works in IE and that's our Target Browser.

Have a nice Weekend
Peter

[fabricio.murta]

Hello! Glad it worked for you! Thanks for letting us know it worked!