EasyUI Forum
June 20, 2024, 06:11:17 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1] 2
  Print  
Author Topic: [SOLVED] Tabs (special case)  (Read 16034 times)
sky-t
Full Member
***
Posts: 145


View Profile
« 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?
« Last Edit: September 01, 2019, 10:37:12 AM by sky-t » Logged
sky-t
Full Member
***
Posts: 145


View Profile
« Reply #1 on: August 29, 2019, 04:13:12 AM »

Nobody an idea?
Logged
jahangir
Jr. Member
**
Posts: 51



View Profile Email
« Reply #2 on: August 29, 2019, 05:39:37 AM »

Set "justified" property of the tab to true


Code:

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

Logged
sky-t
Full Member
***
Posts: 145


View Profile
« Reply #3 on: August 29, 2019, 07:00:33 AM »

Hi jahangir,

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


Logged
jahangir
Jr. Member
**
Posts: 51



View Profile Email
« Reply #4 on: August 29, 2019, 08:50:01 PM »

Can you share your code.
Logged
sky-t
Full Member
***
Posts: 145


View Profile
« Reply #5 on: August 29, 2019, 10:49:26 PM »

Code:
    $('#div_tabs_notification_east').tabs({
        border: false,
        narrow: true,
        justified: true,
        tabPosition: 'left',
    });

results in

Logged
jahangir
Jr. Member
**
Posts: 51



View Profile Email
« Reply #6 on: August 29, 2019, 11:44:50 PM »

Please refer to following example.

http://code.reloado.com/jbhatti/18/edit
Logged
sky-t
Full Member
***
Posts: 145


View Profile
« Reply #7 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
Logged
worm6666
Newbie
*
Posts: 8



View Profile Email
« Reply #8 on: August 30, 2019, 05:20:35 AM »

draw the layout by hand - it is not clear how it should look from the image...
Logged
sky-t
Full Member
***
Posts: 145


View Profile
« Reply #9 on: August 30, 2019, 07:07:03 AM »

Hi worm6666,

pleasy see attached image
Logged
worm6666
Newbie
*
Posts: 8



View Profile Email
« Reply #10 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
Logged
worm6666
Newbie
*
Posts: 8



View Profile Email
« Reply #11 on: August 31, 2019, 01:59:18 AM »

something like this ? :

https://jsbin.com/bimeki/edit?output
Logged
sky-t
Full Member
***
Posts: 145


View Profile
« Reply #12 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.
Logged
sky-t
Full Member
***
Posts: 145


View Profile
« Reply #13 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.
Logged
worm6666
Newbie
*
Posts: 8



View Profile Email
« Reply #14 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. Smiley

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 Smiley
Logged
Pages: [1] 2
  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!