Tagged: , ,

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • April 18, 2017 at 3:33 pm #779379
    danldurall

    I’m working with the Tab Section and am using 12 tabs. At first, any tabs that extended beyond the browser edges (or on mobile) could be reached simply by clicking on a tab near the edge and the whole row would slide left or right to reveal said tabs. That’s perfect. But now, my 12th tab is being dropped to a second row by itself. Why isn’t this 12th tab behaving like the other 11 tabs on the far left or right on the first row?

    Is there a way to fix this so that all tabs are on the same row?

    April 18, 2017 at 4:07 pm #779426
    Andy

    Hey danldurall,

    Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)

    Best regards,
    Andy

    April 18, 2017 at 4:28 pm #779456
    danldurall

    Hi Andy,

    It’s just a staging site that mostly uses the Demo. Scroll to the bottom and you’ll see 12 tabs with icons. The “Strip / Rope” tab is the one that drops to a new row when you make the browser window smaller (or on mobile).

    • This reply was modified 7 years, 7 months ago by danldurall.
    April 19, 2017 at 4:36 pm #780047
    danldurall

    #

    • This reply was modified 7 years, 7 months ago by danldurall.
    April 20, 2017 at 7:59 am #780365
    Ismael

    Hi,

    Could you please provide a screenshot of the issue? The last item doesn’t drop to a new row on smaller screens, at least on my end.

    // http://i.imgur.com/fw8bs3D.png

    Best regards,
    Ismael

    April 20, 2017 at 1:22 pm #780517
    danldurall

    Hi Ismael,

    Smaller browser on desktop // http://i.imgur.com/AEROnfh.png
    Mobile // http://i.imgur.com/LYiqtZQ.png

    I am using an up to date version of Safari on a Mac Book Pro, also with an up to date OS.

    • This reply was modified 7 years, 7 months ago by danldurall.
    April 21, 2017 at 6:50 am #780988
    Ismael

    Hey!

    I will have to ask somebody else to check the issue because I can’t reproduce it on my end. Please wait for their response.

    Regards,
    Ismael

    April 21, 2017 at 7:01 am #780992
    Rikard

    Hi,

    I can’t reproduce the error on my end either using OSX/Safari/Chrome. This is what I’m seeing in Safari: http://imgur.com/a/bKcK0

    Thanks,
    Rikard

    April 21, 2017 at 3:37 pm #781262
    danldurall

    Hi Rikard,

    You have to size the browser down before it happens. Or look on a mobile device. The two screenshots I shared above were from a browser (Safari) that was made smaller. When I have the browser at full size (or large) there is no problem. The error happens when the tabs extend beyond the browser edges.

    • This reply was modified 7 years, 7 months ago by danldurall.
    April 24, 2017 at 5:55 am #782150
    Rikard

    Hi,

    Yes, that’s what I did but I still can’t reproduce the results you are getting. I’ll ask the rest of the team to have a look.

    Best regards,
    Rikard

    April 24, 2017 at 7:46 am #782179
    Sarah

    Hey danldurall,

    I see that you have the div set to have a minimum width of 1306px. When I changed the min-width to 1310px, the section extends, and none of the icons drop. Can you try changing the min-width of your Tab Section and let us know what happens?

    Best regards,
    Sarah

    April 24, 2017 at 3:24 pm #782338
    danldurall

    Hi Sarah,

    How do I change the div min width from within the Avia Layout Builder? I’m not seeing any options for this on the Tab Section.

    April 24, 2017 at 3:53 pm #782372
    Sarah

    Hi danldurall,

    Can you try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    .av-tab-section-tab-title-container { min-width: 1310px; }

    I’ll also see if we can fix this bug. But for now, can you try that?

    Best regards,
    Sarah

    April 24, 2017 at 4:00 pm #782380
    danldurall

    Sarah,

    Thanks for your responsiveness. Unfortunately, I’m still getting the same bug. Just to make sure, see custom CSS screenshot below.

    View post on imgur.com

    April 25, 2017 at 5:11 am #782625
    Ismael

    Hi!

    Please try to add the !important rule to the min-width property. 

    .av-tab-section-tab-title-container { min-width: 1310px !important; }

    Best regards,
    Ismael

    April 25, 2017 at 10:43 pm #783154
    danldurall

    Hi Ismael,

    This did the trick! Thanks!

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Tab Section Width Limit?’ is closed to new replies.