Tabs full width

edited January 2018 in DJ-Tabs
Hi, thank you for this great component. I would like to ask how I can achieve the tabs to be extended in full width of the template. I have tried to set in the theme .dj-custom-blue .djtabs-title class the width to 1/(No of tabs), e.g. in case of 4 tabs I set the width to 25%. However, this CSS has no effect since I found an inline rule for the width property (width:304px) which is eventually applied to the tabs, as you can see from the attached screenshot. Do you have to propose a solution? Sorry, if I miss something.

Thank you in advance!


  • Does anyone have any idea about?

    Thank you!
  • Hi,

    The script for automatic tabs' width calculation is leaving some white blank area, but it should not take more than a couple of pixels:

    Please contact us on helpdesk, providing Joomla! admin & FTP access to the site - we will check why it's not functioning the way it should on your site.

  • edited January 2018
    Hi, after the update to the last version of dj-tabs the problem returned

    Also, now the tabs have the nice property of responsiveness as shown in figure 2 (they are shown vertically in small screens)

    How can I have both of them? A) To remove the blank are from the right and B) Show the tabs vertically for small screens.

    From previous communications and fixes I think that the css must be affected after the update.

    Thank you in advance!
    1.png 518.3K
    2.png 43.3K
  • Hi. If the custom changes were made in the .css files of the DJ-Tabs component, those get overriden during update. Please try to re-apply the custom css changes and contact us on helpdesk in case of further problems.
  • edited January 2018
    Hi, I have already sent a message to helpdesk as you proposed. Can you please provide some assistance?

    Thank you!
  • hi, thanks, but I cannot find the ticket, did you use the same e-mail address you have used to register to this community forum?
  • edited January 2018
    Hi, thank you for the interest! I have absolutely used the registered e-mail, however I understand that it might be is OK though! - Unfortunately, I have tried by myself and I have also re-applied the old .css files but with no effect! Can you provide some assistance for this? It's a little bit urgent!
    11.png 172.4K
  • hi!
    we never ignore any ticket, just cannot find it, not sure why, anyway, I have just made the ticket manually for you and the developer will get back to you there! cheers
  • Hi, I am sorry for raising this issue again but I urgently need, after customer demand, to obtain full functionality of DJ Tabs.

    1) I need the tabs to be full width in large screens, i.e. to remove a small space at the right side (1.png). This is nicely fixed as you proposed by adding the following css :

    .djtabs .djtabs-title{
    width: 25% !important;
    box-sizing: border-box !important;

    2) Retain the nice property of DJ Tabs responsiveness, i.e. to show the tabs vertically for small screens (2.png). Unfortunately my first need affects the 2nd one, since the rule width: 25% !important; prevents the resize of the tabs.

    How can I have both 1 and 2? I really need this!

    Thank you in advance for the support!
  • Hello. The following css can be additionally added, to make the 25% rule only for widths greater than 480px:

    @media (max-width: 480px){
    body .djtabs .djtabs-title{
    width: 100% !important;

    Hope that helps.
  • Thank you very much, professional support as always!
Sign In or Register to comment.