EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: sky-t on August 26, 2019, 10:55:10 AM



Title: [SOLVED] Tabs (special case)
Post by: sky-t on August 26, 2019, 10:55:10 AM
Hi there,

we have (maybe) a special use case.
We are usring a layout. In the eas region we are using tabs. In one of the tabs we are using a nother tab, just to display and click the header (see attached file).

What we want to achive is just to display the tab headers in 100% width without showing the tab containers.

How we can achive this?


Title: Re: Tabs (special case)
Post by: sky-t on August 29, 2019, 04:13:12 AM
Nobody an idea?


Title: Re: Tabs (special case)
Post by: jahangir on August 29, 2019, 05:39:37 AM
Set "justified" property of the tab to true


Code:

$('#tt').tabs({                               
       justified: true
});



Title: Re: Tabs (special case)
Post by: sky-t on August 29, 2019, 07:00:33 AM
Hi jahangir,

thank you for your reply but your solution doesn't work.




Title: Re: Tabs (special case)
Post by: jahangir on August 29, 2019, 08:50:01 PM
Can you share your code.


Title: Re: Tabs (special case)
Post by: sky-t on August 29, 2019, 10:49:26 PM
Code:
    $('#div_tabs_notification_east').tabs({
        border: false,
        narrow: true,
        justified: true,
        tabPosition: 'left',
    });

results in



Title: Re: Tabs (special case)
Post by: jahangir on August 29, 2019, 11:44:50 PM
Please refer to following example.

http://code.reloado.com/jbhatti/18/edit


Title: Re: Tabs (special case)
Post by: sky-t on August 30, 2019, 01:17:51 AM
Hi jahangir,

thank you once again.
Your solution didn't fit to me, cause i need the tabPosition left. I need this because i want to have the tabs vertically and not horizontally.

THANK You


Title: Re: Tabs (special case)
Post by: worm6666 on August 30, 2019, 05:20:35 AM
draw the layout by hand - it is not clear how it should look from the image...


Title: Re: Tabs (special case)
Post by: sky-t on August 30, 2019, 07:07:03 AM
Hi worm6666,

pleasy see attached image


Title: Re: Tabs (special case)
Post by: worm6666 on August 31, 2019, 01:41:58 AM
is this not case for ACCORDION ?

I have made this - https://jsbin.com/nomoturiji/1/edit?output


Title: Re: Tabs (special case)
Post by: worm6666 on August 31, 2019, 01:59:18 AM
something like this ? :

https://jsbin.com/bimeki/edit?output


Title: Re: Tabs (special case)
Post by: sky-t on August 31, 2019, 08:02:22 AM
Hi worm6666,

this is a good idea - but i need just the headers to show without containers.
If i would use accordions i would ran in the problem if there are 40 or 50 items to show.


Title: Re: Tabs (special case)
Post by: sky-t on August 31, 2019, 08:31:13 AM
Hi worm6666,

i have tested it with accordions - this is not the right way.

Please see the attached image - if the div.tabs-wrap would be 100% width it would be fine.


Title: Re: Tabs (special case)
Post by: worm6666 on August 31, 2019, 01:01:14 PM
perhaps You should pack it into one "center" area of layout - I have it packed so in My code...

if I use justified:true - it has the needed efect. :)

TRUE:
https://imgur.com/H8AiSFH.jpg

FALSE:
https://i.imgur.com/JmJUvxO.jpg

...or You have broke css of easyui with self modification ?

JUSTIFIED:TRUE should be the answer - or You have one wrong container above this - take care about that...

hope You find the way - please reply how is going. thx.

or send me the code I can play with that little (html+js in one) - it is possible that You look so long on the code so You don't see where to change something so it works :)


Title: Re: Tabs (special case)
Post by: sky-t on September 01, 2019, 01:37:38 AM
Hi worm6666,

thank you so much for your time and ideas.

I have found a working solution:
Now i am using a panel (fit:true) and use the tabs (tab Position:left) inside this panel.
With panel('onResize') event i get the width of the panel and can put this current with to tab headerWidth

It's working great - like i want to have it!


But again: Thank you for your time!!!


Title: Re: Tabs (special case)
Post by: worm6666 on September 01, 2019, 02:24:15 AM
nice detour :D

hope You will have no side effect on other parts of page... even if, You know where to start now ;)

p.s. edit title to add "SOLVED" at beginning of title... :)