• Closed
  • Rose Deyo
    Spectator
    March 14, 2014 at 8:50 pm #8304

    I am using the tabs shortcode for horizontal tabs, and instead of wrapping words and making the tab height larger, the words are just getting cut off to fit inside of the predefined height. I tried to use some css like “word-break: break-all;” but while the words aren’t cut off, they don’t break/wrap either.

    if I change to vertical tabs, the words wrap properly, but the vertical tabs take up too much room so I don’t want to use them. Also, the wrapper of the vertical tabs has a border around it and I can’t seem to find the css to turn that off.

    How can I get the words to wrap in horizontal tabs?

    Rose

    Roman
    Spectator
    Posts: 3147
    March 15, 2014 at 10:34 am #9268

    try insert this in the Custom CSS field:

    Code:
    .tab-holder .tabs , .tab-holder .tabs li, .tab-holder .tabs li a , .tab-holder .tabs li.active a{height: auto!important;line-height:2em!important;}
    .tab-holder .tabs li a {padding:0px!important;}
    .shortcode-tabs .tab-hold .tabs li a {padding:10px!important;text-indent: 0px !important;}
    Rose Deyo
    Spectator
    Posts: 5
    March 15, 2014 at 2:29 pm #9270

    Thanks. That does wrap the words. But now only the tabs that are too long to fit into the predefined width have increased height. Is there anyway to now get ALL of the tabs to be the same height?

    Rose

    Roman
    Spectator
    Posts: 3147
    March 15, 2014 at 2:45 pm #9271

    yes, you can try to play with this value:

    Code:
    .tab-holder .tabs , .tab-holder .tabs li, .tab-holder .tabs li a , .tab-holder .tabs li.active a{height: 80px!important;}

    modify per your needs

    Rose Deyo
    Spectator
    Posts: 5
    March 16, 2014 at 4:14 am #9272

    Thanks, that did the trick for height. Most words are now wrapping, but in a couple of tabs, 1 or 2 letters at the end of the last word are being hidden by the beginning of the next tab. How can I adjust the width of each tab container? Is there a way for the name of each tab to fit inside of containers that adjust their size depending on the length of the word? I don’t understand why the words aren’t breaking at the space and why the last 1-2 letters are being hidden.

    Rose

    Roman
    Spectator
    Posts: 3147
    March 16, 2014 at 11:25 am #9274

    try use this code, however it will make padding 0px on the sides of the tab:

    Code:
    .shortcode-tabs .tab-hold .tabs li a {padding:10px 0!important;text-indent: 0px !important;}
    Rose Deyo
    Spectator
    Posts: 5
    March 16, 2014 at 12:11 pm #9276

    Thanks. So it looks like there’s no way for each tab “pill” to adjust to the size of the text? Instead of evenly dividing the number of tabs into the overall width, I would like each section/tab wording to adjust. So, short tab titles would have a smaller container. Anyway to do that? I have installed Easy Responsive Tabs and those tab title containers are fluid based on the tab title.

    Rose

    Roman
    Spectator
    Posts: 3147
    March 16, 2014 at 2:57 pm #9277

    the tabs width is also responsive, but when changing its value or height value manually can causes issues which you’re experiencing now

    Rose Deyo
    Spectator
    Posts: 5
    March 17, 2014 at 2:12 am #9280

    Hi,
    Each tab container is the exact same width regardless of the tab title. And the entire tab container is 100% of the content width. So, if I when I have two tabs, each tab container/pill is 1/2 of the content width. Is there anyway to make it responsive based on the size of the word(s) ?

    Here is my tab set up:

    I’d like tab 5 (Judges) to be a smaller width than the others, but it’s not – they are all the same width.

    Is this possible?

    Rose

    Roman
    Spectator
    Posts: 3147
    March 17, 2014 at 9:35 am #9281

    sorry,this is not possible for now