Answered

How to move popup side tab to lower part of page?

  • 16 November 2021
  • 6 replies
  • 276 views

Userlevel 2
Badge

I would like to lower the sidetab to the lower portion of the page as the middle part of the page has text, mega menu items, etc. covered by it. This is especially true on mobile devices. See image below.

Is there a way to specify where the tab shows up? 

Thanks,

John

 

icon

Best answer by mathio 17 November 2021, 21:18

View original

6 replies

Userlevel 7
Badge +5

Hi @John F. Kennedy Happy Tuesday! Look at all those pups!! :heart_eyes: With our standard code, we don’t have an option to move the popup. You may be able to do this with custom code, though this is something you’d need to develop. 

@mathio or @picsoung do either of you have any workarounds/examples of moving this tab? 

Userlevel 7
Badge +5

Hello @John F. Kennedy and @Liz 

you can set top CSS property for .typeform-sidetab class to override the default position of your sidetab embed.

For example to align it (typeform when opened, not the button) to the very top of your website:

.typeform-sidetab {
top: 200px !important;
}

Or if you want to align it from the bottom of your page:

.typeform-sidetab {
top: auto !important;
bottom: -200px;
}

You can play around with those numbers to achieve ideal position.

Userlevel 2
Badge

Hi @mathio,

Thank you for your reply and suggested CSS additions. I have two questions.

  1. Can I add these CSS terms in the style attribute of the <div> element as below?
    1. <div data-tf-sidetab="xxxxx" data-tf-width="640" data-tf-height="800" data-tf-hide-headers data-tf-hide-footer data-tf-custom-icon="https://images.typeform.com/images/2Kh8HCsWgUUx" data-tf-open="scroll" data-tf-open-value="40" data-tf-button-color="#0487AF" data-tf-button-text="SAVE 10-15%" data-tf-hidden="species=none,page={{request.path}},existingemail=xxxxx" style="all:unset; top: 200px !important; bottom: -200px;"></div>
  2. We are wanting the sidetab to move down (as illustrated in picture below) vs the survey window to move down. Is this what the CSS provided do?

Thank you,

John

Userlevel 7
Badge +5

No, you can not place it into a style attribute. You will need to put it into a separate CSS file or between <style> tags.

Sorry I had an error in the CSS for moving the button downwards, it should use top: auto !important; (I updated the original snippet in my previous post).

In your case I think you can do this to move the button as much down as possible without hiding part of your typeform out of the viewport:

<div data-tf-sidetab="xxxxx" ...></div>
<style>
.typeform-sidetab {
top: auto !important;
bottom: -200px;
}
</style>

 

Userlevel 2
Badge

@mathio

I selected Answer too soon. I modified the code to get it the position dialed in on both mobile and desktop screens. Yay! When the survey pops up on mobile it looks good. On desktop, the lower portion of the survey gets cut off. See two images below. First one is of the side tab location, second is survey open being cut off.

Can you recommend the CSS to keep the survey in full view?

Thanks,

sidetab low on screen. Yay!
 
Survey popout is cut off.

 

Userlevel 7
Badge +5

It worked for my example. Play around with the value of bottom to make sure it fits.

Reply