Width of accordion tab

andy1
Jul 19, 2016 05:21 AM 4 Answers General
Member Since Jul 2016
Subscribed Subscribe Not subscribe
Flag(0)
I display an accordion as a line of horizontal tabs and I have noticed that the final tab on the line is always slightly wider than the others. This only becomes a problem if the tabs spread to a second line. In this case, the final tab can extend beyond the width of the web page. You can see this at http://waibopscd.org.nz/?page_id=2226 if you display the page full-width so that 'Tauranga' is the final entry on the first line, the tab extends beyond the page header. Is it possible to ensure the final tab does not have the extra padding on the right? Regards Andy  

Warning: count(): Parameter must be an array or an object that implements Countable in /home/pickplugins/public_html/wp-content/plugins/question-answer/templates/single-question/subscriber.php on line 17
1 Subscribers
Submit Answer
Please login to submit answer.

4 Answers
Sort By:
Best Answer
0
andy1
Jul 20, 2016
Flag(0)

Hi
One more thought. If I change the CSS as below, removing the left/right padding and adding a width, then all the tabs have the same width and fit exactly into the space available. No extension of the final tab on the line.Of course, if I reduce the size of the window, then there is usually some white space to the left. It also looks a lot neater as the tabs are lined up vertically

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {

    float: left;
    padding: 0.5em 0em;
    text-decoration: none;

    width: 165px;
}

 
Are there any reasons why I should avoid this solution?
Regards
Andy

Sign in to Reply
Replying as Submit
Best Answer
0
andy1
Jul 20, 2016
Flag(0)

Hi
I have done some more experiments with firebug on my test site with the padding below:
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {

    float: left;
    padding-bottom: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.5em;
    text-decoration-color: -moz-use-text-color;
    text-decoration-line: none;
    text-decoration-style: solid;

}

 
If I disable both left and right padding, all the tabs are reduced to their minimum width with no padding on either side.
If I then re-enable left padding, all the tabs include left padding and zero right padding except for the final tab in the line which gets additional padding on the right (which is what I am trying to avoid).
 
Any ideas?
Regards
Andy
 
I don’t like playing around with things I don’t understand so would really appreciate your comments on this (and any other advice you have).

Sign in to Reply
Replying as Submit
Best Answer
0
andy1
Jul 19, 2016
Flag(0)

Thanks for your quick response and I can see that you have displayed the tabs exactly as I would like. That is, the last tab on the line does extend beyond the page boundary.

To answer your question about the CSS, (width 800px; margin 0 auto) was left in by mistake after trying to resolve it myself. It has been removed, but I still get the same result at http://waibopscd.org.nz/?page_id=2226.

I am now testing it on my test site where I am using the basic coraline theme (so no customisations at all). It obviously looks a bit different,
but you can see that the problem is still there at http://test.pat.gen.nz/tabs/
Regards
Andy

Flag (0)
0

Sorry about the password.
I am now running test.pat.gen.nz with all other plugins deactivated. It is also running the Coraline theme (rather than the child), so it is now down to the bare minimum.
You no longer need a password to access test.pat.gen.nz which has two menu items.
TABS illustrates the problem with the ‘Rotorua’ tab extending beyond the content box.
I included ACCORDIONS because I specify #accordions-358{width: 800px; margin: 0 auto} so that it appears with less width in the centre of the page (is there a better way?)

Thanks for taking the trouble to help sort this out.

Andy

Flag (0)
0

Sorry to say i can’t access http://test.pat.gen.nz/tabs/ its need password ,
Although i can still see the CSS i mentioned please see the screenshot http://i.imgur.com/to9unw2.png
i have debug with firebug when i turned off “width: 100%;” its working fine. http://i.imgur.com/Mt3tYjT.png

Regards

Sign in to Reply
Replying as Submit
Best Answer
0
PickPlugins
Jul 19, 2016
Flag(0)

Welcome to our forum,
 
I have checked your page, i can see the reason for that, you are using custom CSS following in your theme CSS

.accordions-tabs .ui-tabs-nav li a {
  width: 100%;
}

When i turned it off all working fine , please see the screenshot

View post on imgur.com


 
Can you please explain why you are using that ? might solve another way.
 
Regards
 

Sign in to Reply
Replying as Submit

Please use https://imgur.com/upload to upload your screenshot and share url here.
You can't upload any files or attachment to our server directly for security reason, you can use 3rd party website and share file url here. here is the top file sharing website you can use.

Please login to see your tickets