• Creator
    Topic
  • #8304

    Rose Deyo
    Spectator
    Been thanked: 0 times

    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

Viewing 9 replies - 1 through 9 (of 9 total)
Replies
  • Roman
    Keymaster
    Post count: 2538
    Been thanked: 29 times
    #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
    Post count: 5
    Been thanked: 0 times
    #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
    Keymaster
    Post count: 2538
    Been thanked: 29 times
    #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
    Post count: 5
    Been thanked: 0 times
    #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
    Keymaster
    Post count: 2538
    Been thanked: 29 times
    #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
    Post count: 5
    Been thanked: 0 times
    #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
    Keymaster
    Post count: 2538
    Been thanked: 29 times
    #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
    Post count: 5
    Been thanked: 0 times
    #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
    Keymaster
    Post count: 2538
    Been thanked: 29 times
    #9281 |

    sorry,this is not possible for now

Viewing 9 replies - 1 through 9 (of 9 total)
You must be logged in to reply to this topic.