EasyUI Forum
March 28, 2024, 09:21:07 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: center a panel in a layout region  (Read 22841 times)
chrwei
Full Member
***
Posts: 219


View Profile Email
« on: August 15, 2013, 02:03:05 PM »

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?
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: August 15, 2013, 07:02:15 PM »

Try this code:
Code:
<div data-options="region:'center'">
    <div class="easyui-panel" title="Login" data-options="style:{margin:'0 auto'}" style="width:400px">some content</div>
</div>
Logged
chrwei
Full Member
***
Posts: 219


View Profile Email
« Reply #2 on: August 16, 2013, 05:50:35 AM »

there's the trick!  thanks.

so for something like margin-top:0px I'd do style:{'margin-top':0} ? 
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #3 on: August 16, 2013, 07:02:27 AM »

Code:
data-options="style:{margeTop:0}"
Logged
chrwei
Full Member
***
Posts: 219


View Profile Email
« Reply #4 on: August 16, 2013, 07:35:19 AM »

so style:{} doens't take css properties, it takes the javascript equivalent?
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!