EasyUI Forum

General Category => Bug Report => Topic started by: mshaffer on November 18, 2016, 10:36:56 AM



Title: For easyui-tabs, fit: true (full-height) breaks tabPosition:left
Post by: mshaffer on November 18, 2016, 10:36:56 AM
tabPosition:'left' and fit: true ...

These two options don't seem to work well together.  It breaks...

I want width and height to fill the space, but with tabPosition: left, no workee.

On another topic, "justified" as true or false doesn't work as expected.

If I set tabWidth to numeric values, can I say "full-justified" or "centered" ... fix the width and add space between tabs (pills) based on some computation ... or centered, where the added space is equally distributed to the right/left of the list of tabs...


My tab environment is inside a layout (east/center/west)...

Code:
<div id="wizard-layout" class="easyui-layout" data-options="fit:true"
...
<div id="wizard-east"
data-options="region:'east',
split:true,
hideCollapsedContent:false,
collapsed:true"
title="My Reports" style="width:75%;">
...
<div id="history-tabs" class="easyui-tabs" data-options="tabPosition:'left', pill: true, border: false, fit: true">





If I change fit: true to height: 400, it works as expected ...


Title: Re: For easyui-tabs, fit: true (full-height) breaks tabPosition:left
Post by: jarry on November 18, 2016, 06:03:13 PM
The 'fit:true' property does work on tabs component. Please look at this example. It works fine.
http://code.reloado.com/udacek3/2/edit#preview


Title: Re: For easyui-tabs, fit: true (full-height) breaks tabPosition:left
Post by: mshaffer on November 19, 2016, 03:29:56 AM
The 'fit:true' property does work on tabs component. Please look at this example. It works fine.
http://code.reloado.com/udacek3/2/edit#preview

You say it works in one instance of a mockup.

It does not work in a full nested layout (east/center/west/north/south).

Still in DEV, but see:

https://wizard.mypatentideas.com/

Specifically, look east "My Reports"... it currently works as expected...

Code:
<div id="history-tabs" class="easyui-tabs" data-options="tabPosition:'left', pill: true, border: false, height: 400">

If I were to replace "height: 400" to "fit: true", it breaks.

Hence the bug report...

(you can save page as, save local, make the change to see the "broken" form....)



Title: Re: For easyui-tabs, fit: true (full-height) breaks tabPosition:left
Post by: mshaffer on November 19, 2016, 03:48:42 AM
Code:
<div id="history-tabs" class="easyui-tabs" data-options="tabPosition:'left', pill: true, border: false, height: 400">

Works as expected...

(https://1828.mshaffer.com/images/fiddle/wizard-works.png)

Code:
<div id="history-tabs" class="easyui-tabs" data-options="tabPosition:'left', pill: true, border: false, fit: true">

Doesn't work ...

(https://1828.mshaffer.com/images/fiddle/wizard-broken.png)


Title: Re: For easyui-tabs, fit: true (full-height) breaks tabPosition:left
Post by: jarry on November 19, 2016, 05:26:27 AM
In your link https://wizard.mypatentideas.com/, you haven't define any tabs component in your west region. Your code is too complext to find out what problem may be. So please look at this example http://code.reloado.com/udacek3/3/edit#preview. It have similar layout as yours and it works fine.


Title: Re: For easyui-tabs, fit: true (full-height) breaks tabPosition:left
Post by: mshaffer on November 19, 2016, 07:48:06 AM
In your link https://wizard.mypatentideas.com/, you haven't define any tabs component in your west region. Your code is too complext to find out what problem may be. So please look at this example http://code.reloado.com/udacek3/3/edit#preview. It have similar layout as yours and it works fine.

I am not following you on what you mean:  "you haven't define any tabs component in your west region."

I do have the entire "account.tpl" file in the wizard-west... (if logged in), if not, it is the entire "login.tpl" file in the west ...  If not logged in, you are correct, there are no tabs to the "west" ...

I am placing additional divs inside the "west-region"...

In the example, I change one parameter, and easyui breaks.  Is that not the definition of a bug?  No error is being reported.

yes it is complicated, but isn't that the purpose of using easyui to build a nice web app.

My only thought is I may be missing a closing </div> tag or something...

I am struggling to understand how to control certain elements within easyui features... such as "center"



Title: Re: For easyui-tabs, fit: true (full-height) breaks tabPosition:left
Post by: jarry on November 19, 2016, 08:07:57 PM
Your link page has more than 2000 lines and it is hard to read. So please simplify your code and show a live example on reloado to demonstrate your issue.


Title: Re: For easyui-tabs, fit: true (full-height) breaks tabPosition:left
Post by: mshaffer on November 24, 2016, 03:08:36 AM
No thanks.