Okay
  Public Ticket #1286963
Tabs Element Glitchy
Closed

Comments

  • jensdes started the conversation

    HI I have incorporated the "tabs" element into my page. I am using the Salient theme - I originally imported the demo "Landing Service", but when I imported it, it imported as a bunch of code, there were no background placeholders for me to replace and after a day of messing with it I deleted all those pages and started fresh with just the sample page that comes with a clean install. 

    Related to the tabs, the functionality of it seems glitchy to me... I have taken a short video of what it's doing. When viewing the page live, I have that content centered in my screen. When I click on a tab, the whole section shifts up on it's own, hiding the tabs altogether and justifying the tab text below the tab at the top of the page. So every time I want to click a new tab, I have to scroll back down to get to them. I really like the tabs but this operation isn't smooth. Is this normal? If you're unable to view the .swf file I've included screenshots. The first is the space before I click the tab, and the second is what happes after I click one of the tabs. They all respond this way.

    The only other major plug in I have installed is Visual Composer. Are you aware of any issues with compatibility with VC? The problems I experienced with "Landing Service" demo occurred before I had installed VC. Any help is appreciated otherwise I will have to take this element out and use something I like less. Thanks

  •  2,744
    Andrew replied

    Hi jensdes,

    That is not supposed to happen but it would have been best if we had a direct link to the page in question to see if we can narrow down the cause of the issue.

    Could you give us a link to the page please.

    Could you try and make sure you have disabled full width rows on that page?
    Maybe try and create the tabs on a different page with default settings and see if the issue happens again.

    Thanks.

  • jensdes replied

    HI Andrew, 

    I'm sorry; the site is currently on my local machine in development. I actually need the full width option for several aspects on the page.... whats the point of having that option if you're not able to use it? :-P 

    I created a new page and put the tab element on the page. When the tab element is at the top and all the text for each tab is an equal amount, there is no bounce effect. However, when I place other random items before it on the page - such as an image, when I click on the tabs they move up and down based on the amount of text in their tab field. What that tells me is that the css for this element is set to center vertically. If it were changed to top justification vertically, then they page would extend down when more text is revealed per tab rather than the entire thing moving up and down.

    Is there not a setting that I can change on my end to help out with this? I certainly would be willing to do a screen share or something - that may be out of the scope of this service. But my website is local right now, not online. 

    I also imported in another demo to try to take benefit of some of the elements in those. I brought in the Frostweave one. It did the same as the other one I mentioned  - each section was filled with the Nectar shortcode - there was no ability to edit it with design view in visual composer. Are you aware of any incompatibilities with VC? Because at this point, I have messed with many of the elements that come with your theme - the accordion, hover box, masonry media grid, master slider - none of these work as expected within this theme. While I am pretty new to WordPress (beginning of this year) I have worked on and experimented in multiple themes now (because the company I work for has multiple WP sites) and I've not experienced the challenges in designing that I have on this one. 

    Specifically, the hover box... if I don't choose full width option, it cuts off the logos. Even with the stretch row and contents option on, if the browser window isn't full width, it still cuts them off some.  

    Would there be a refund or exchange available for this theme should I not be able to resolve the issues I'm having? I just purchased it last week. 

    Thanks in advance for your help. 

  • jensdes replied

    Here are some screenshots of glitches. Thanks Jen

  •  2,744
    Andrew replied

    Hi jensdes,

    When we replicate that on our end i.e. add some stuff before the tabs, clicking on the tab with more content to reveal just moves the other elements below the tab lower to expose the extra content. 

    That's the default behaviour when the tab contains significant amount of content. On shorter content tabs, other elements below the tabs element is moved up.

    There is not setting for this to change the behaviour.
    Refunds are handled by themeforest.net \ envato - https://help.market.envato.com/hc/en-us/articles/209980383-How-do-refunds-work-#how-do-i-request-a-refund 

    Cheers.

  • jensdes replied

    HI Andrew, thanks for your response. I'm not sure it clears up my problem as your response doesn't assure me that what I'm experiencing isn't normal. You didn't address any of the other screenshots I included, such as the hover box. 

    I'll be working today to see about getting my site online somewhere for live testing and I'll be able to send you the link. 

    Thanks, Jen

  •  2,744
    Andrew replied

    Hi jensdes,

    Apologies for the late reply.

    Also sorry for the response. We were trying to establish the default behaviour of the tabs.
    The video you short shows a smooth scroll to the content of the tab when you click on a tab.

    This is not really what the tabs do by default and there might be something else creating the scroll to effect.
    You can check your plugin by disabling all except Salient visual composer.

    Also it would be best if we get a link to this.
    Thanks.

  • jensdes replied

    HI Andrew, no worries. Alas, I have been trying to get my site server side, but our tech guy works part time out of another office so I've not yet been able to coordinate with him. But once I have it uploaded, I will respond here with a link so you can help diagnose. 

    I actually didn't know that this theme came with Visual Composer already... and I went and purchased a license for use. I wonder if this might be causing conflict? When I installed it (pre-VC) I did not see any of the VC controllers in there. Odd. Maybe that's not the culprit. I have very few plug-ins installed ..... 

    Contact Form 7, Envato Toolkit, Image Caption Hover, Master Slider (which also isn't working as normal), No Self Pings, Redirection, Slider WD, Updraft Plus, WP-Optimize, WPBakery Visual Composer and Yoast SEO. 

    Besides the tabs issue, the hover boxes aren't working normally as well. I've attached a screenshot. Basically, in the past when I've used hover box with other themes, it automatically fits the image/logo in the box space. As you can see from the screenshot, it's not doing that. I had to play around with it - I set the row to full width and that seemed to fix the issue - but when I resize the browser window at all (to simulate iPad & mobile devices), it begins to cut off the logos. 

    I realize you can't yet view the site, but if you can tell me more about VC and your theme because when I strip the theme down to bare bones it doesn't have VC in it. Thanks for your help. 

  •  2,744
    Andrew replied

    Hey there,

    Thanks for reaching in,

    Yes it would be a good a idea to strip down all the plugins in order to identify the one causing the issue and also make sure you are running our current version of the salient VC 5.2.1

    Hope to hear from you soon,

    Regards,

  • jensdes replied

    Thanks Andrew. I'm on another project today... BUT yesterday I started from scratch with your theme (I just bought it last week, or whenever I first posted to you, so I'm sure it's up to date) and I did not import the same demo "Landing Service".... but I plugged in some of the same elements... definitely less glitchy and at first I thought the tabs thing was fixed until I added more content underneath it. Absolutely maddening! Will respond when I can get my site online. Thanks 

  • jensdes replied

    HI Andrew, not sure why my ticket is closed. You didn't respond to my last inquiry. 

    Sorry for the delay but I have finally got my IT guy to set up the online serve for me. You can access it at:

    http://beta.des.direct/home/

    Please let me know what else you need to test. As you can see, the tabs group when you select one of them the whole page scrolls down in an unnatural fashion. Also, the hover boxes below it - they are cutting off the images... that is not normal. I've used hover box on other templates and it always automatically resizes the file to fit within the holder. Not sure what's going on. Also the social media links at the top - if you look at them they aren't straight... you can see some of the blue rollover cover peeking through. Thanks 

  • jensdes replied

    Screenshots.

  •  2,744
    Andrew replied

    Hi jensdes,

    Those tabs on that page are from Visual Composer and not from Salient Visual composer. Seems like we are talking of different things.

    The ones on your page seem to have an animation applied to them that scroll to the content of the tab.
    You can see if there is an option to remove the animation on those VC tabs or alternatively us the Salient Visual composer plugin's tabs.

    Hope this clears things up.

  • jensdes replied

    Thanks for your reply Andrew. I will look into that. But that still doesn't answer the other questions I've posed to you several times now. One is in relation to the hover boxes and the other is the social media icons at the top of the page. If you could please refer to the screenshots I've supplied already. Thanks Jen

  • jensdes replied

    Andrew, good morning. I had a chance to look at the panel... I've included a screenshot here. I see no other tab element available besides the one on the third row. How do I access the Salient Visual Composer? Thanks 

  • jensdes replied

    Andrew, I didn't realize the Nectar shortcode was the Salient VC (or is it?) but I went in and added a tabs secition using the Nectar shortcode. The page still moved up and down. So I duplicated the page and deleted the original tabbed section I created using VC and left the shortcode tabbed section... it still behaves the same. I've included a link to the page and a video demonstrating the behavior. 

    http://beta.des.direct/home-2

  •  2,744
    Andrew replied

    Hi jensdes,

    Apologies for this issue.
    Any chance we can get temporary admin access to the page so that we can take a look at the page code please.

    That way we could test out some stuff and see if we can establish the exact cause of this - click tab and browser scrolls to top of tab content - issue.

    Thanks.

  •   jensdes replied privately
  •  2,744
    Andrew replied

    Hi again Jen,

    Thank you for writing back to us.

    Regarding the email, you can use made up email instead such as [email protected]

    Looking forward to hearing back from you.

    Best regards.

  •   jensdes replied privately
  •  2,744
    Andrew replied

    Hi jensdes,

    We logged in and it seems you are using Visual composer for the tabs here http://beta.des.direct/home-2/.
    Please note that those tabs will work different from the tabs element in Salient Visual Composer.

    There is a difference between the two plugins and you need to understand that.
    The ones from the official VC will have the smooth scroll to content while the ones from Salient VC will not as you can see here http://beta.des.direct/test-page/ if you enable Salient VC and disable VC.

    Please confirm you understand the difference and that that is an external plugin you are asking us to support.

  • jensdes replied

    HI Andrew, thanks for your reply. I guess there was some initial confusion regarding this. When you initially told me that I'm using VC for the tabs.. I assumed you meant an element not a plugin. So if you see the difference between the home page and the home page 2 that I linked to you, you can see that the home page has the VC tab element and the home page 2 has Salient code to create the tabs. With that understanding I thought that I had done as you requested.

    If I'm understanding correctly, you are telling me I need to disable the VC plugin altogether, is that correct? If so, how then do I enable the Salient VC? Also, if I understand correctly (please correct me if I'm wrong), the only difference between VC and Salient VC is that the license agreement goes through you instead of me, but the functionality should be the same or at least similar, is this correct? 

    If you are able to help me understand my assumptions and to "turn on" Salient VC then I can begin testing to see how it performs. Thanks again for your patience and help. Jen

  •  2,744
    Andrew replied

    Hi there,

    Thanks for reaching in,

    Yes they are more or less the same but then again the Salient VC has been especially configured to run well with the theme. In order to use it go to Dashboard > Plugins > Installed Plugins and activate salient visual composer. Here you should also deactivate the generic VC. 

    Hope this helps,

  • jensdes replied

    HI Andrew. Wow. Super simple, was right there. Feel dumb. :-P

    So I have been experimenting. The tabs works fine now as you stated, thanks. However the flip box element still isn't working as expected. The front background image I'm choosing to use - the element box isn't shrinking the image to fit proportionately in the space. I have 2 different versions of that logo uploaded already - one is normal dimensions and the other is more of a box shape, and that one still isn't fitting. So the idea of me having to design every image perfectly to fit within that space seems arduous to me. Can you please take a look? Thanks so much.

  •  2,744
    Andrew replied

    Hi jensdes,

    1) Apologies for the late reply but there aren't any flip boxes on the homepage.
    Where are they so that we can better take a look at this issue.

    2) For the social icons on the top bar use this CSS to correct that slight issue:

    [class*="fa-"]{
        top: 1px;
    }
    

    Thanks.

  • jensdes replied

    HI Andrew, thanks for the code. Yeah the home page 2 I sent you a link to that has the flip box on it. Here's the link: http://beta.des.direct/home-2/

    Also, I'm curious... is there a background image showing up for you on this page before you log in? I pulled up the link to it before I logged in and the full screen background image didn't show up until after I logged in. Was that your experience too? Thanks

    UPDATE: sorry I've been playing with the page this morning... I got rid of the original home page and made home2 just the home page so here's the updated link: http://beta.des.direct/home/

  •  2,744
    Andrew replied

    Hi Jensdes,

    Could you use this CSS to fit the flip box images to the box:

    .nectar-flip-box[data-flip-direction="horizontal-to-left"] .flip-box-front{
        background-size: contain;
        background-repeat: no-repeat;
    }
    

    Hope this helps.

  • jensdes replied

    It worked. Thank you Andrew. Any idea why it requires the code? You've been amazing btw... really glad I chose this theme! Do you have any themes for creative sites with full slider background home page similar to this theme? I'm shopping for a personal theme for my portfolio website. Thanks 

    https://themeforest.net/item/coyote-a-refined-powerful-multipurpose-theme/20452207?s_rank=52 
  •  2,744
    Andrew replied

    Hi jensdes,

    1) The images are set background cover in that area that is why they were getting cut off. Its a CSS thing built into the theme. Some users will not mind but some will so we have to modify it accordingly.

    2) We only have all our efforts invested in this theme.
    There are a lot of portfolio themes on themeforest but we really do not have a recommendation for that. You can take a look around and see what works for you.

    You can also see if you can also use Salient for that portfolio site.

    Cheers.

  • jensdes replied

    Thanks Andrew. You've been amazing, while it's taken a while to find resolution to my concerns, you have been more than patient and have stuck with me the entire time. If you have a link I can click to write a review I'd be happy to. Thanks and have a blessed day. Jen

    Hey, if you don't mind.... please take a look at the footer of this page: http://beta.des.direct/

    I'm trying to use CSS to add a rollover color to the locations below (as they link to a Google map ) but my code isn't working. Do you know how I can make this happen? Thanks

  •  2,744
    Andrew replied

    Hey there,

    Thanks for reaching in,

    By rollover color, do you mean the links to change color on hover? Please elaborate. 

    Looking forward to hearing from you.

    Regards

  • jensdes replied

    Hey Andrew, yeah I want the menu items and links to behave in the footer the same way they do in the header (meaning when I mouseover, the text changes color). 

    Within my custom footer widget, I have the following code:

    <h1 style="color:#006c85;">888-792-2922</h1>
    <h2 style="color:#f02c34;">email: [email protected]</h2>
    <br>
    <h4 style="color:#c9c9c3;">LOCATIONS</h4>

    http://maps.google.com/?q=17011 Clear Creek Rd, Redding, CA 96001" target="_blank">REDDING, CA


    http://maps.google.com/?q=9861 North Vancouver Way, Portland, OR 97217" target="_blank">PORTLAND, OR


    http://maps.google.com/?q=400 S Wineville Ave, Ontario, CA 91761" target="_blank">ONTARIO, CA


    http://maps.google.com/?q=4522 Parker Ave, Suite 200.    McClellan, CA 95652" target="_blank">SACRAMENTO, CA


    http://maps.google.com/?q=19358 96th Avenue, Surrey, BC, Canada" target="_blank">VANCOUVER, BC


    http://maps.google.com/?q=1471 Doolittle Dr., San Leandro, CA 94577" target="_blank">SAN LEANDRO, CA


    But it's not working totally. I'd really like the links in this section to also be underlined so people know they are links - either that or I'd like to make them a different color - this one: color:#f02c34. Thanks

  •  2,744
    Andrew replied

    Hi again,

    Thank you for writing back to us.

    Please add the following code to enable the hover effect in the footer:

    #custom_html-4 h3 a:hover {
        color: #006c85 !important;
    }
    inspector-stylesheet:1
    #custom_html-4 h3 a {
        text-decoration: underline !important;
    }

    Hope this helps.

    Best regards.

  • jensdes replied

    Thanks Andrew, although it did give me some warnings related to the code, the mouse-over color is working but the underline is not. 

    Thanks, Jen

  •  2,744
    Andrew replied

    Hi again, 

    My apologies, please use the following code to get the locations underlined: 

    .textwidget.custom-html-widget h3 a {
        text-decoration: underline;
    }

    Please feel free to contact us if you have any further questions. 

    Best Regards.