Print Page - center a panel in a layout region

I'm trying to get a panel centered inside a layout. this was first try:

Code:

<div data-options="region:'center'">
    <div class="easyui-panel" title="Login" style="width:400px;margin:0 auto">some content</div>
</div>

using Chrome's inspector I see this gets parsed out to:

Code:

<div class="panel" style="display: block; width: 400px;">
    <div class="panel-header" style="width: 388px;">
        <div class="panel-title">Login</div>
        <div class="panel-tool"></div>
    </div>
    <div class="easyui-panel panel-body" title="" style="width: 398px; margin: 0px auto; height: auto;">
some content</div>
</div>

putting the style on the panel-body and not copying it to the panel where it will actually do something.

I also tried these:

Code:

data-options="style:{margin: 0 auto}"
data-options="style:{margin: 0px auto}"
data-options="style:{margin-top: 0;margin-right: auto}"

these all generate parsing errors on the console and leave me with only the original code rendered.

this one does not error, and puts the margin in the panel where it should be

Code:

data-options="style:{margin: 0}"

but since it's missing the margin-right, it doesn't do what I want.

before I attempt fixing the style parser, should I be doing this a different way?

EasyUI Forum

General Category => General Discussion => Topic started by: chrwei on August 15, 2013, 02:03:05 PM