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
Best answer by mathio-tf
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>
+5Hi 
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.
+5Hello
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.
Hi
Thank you for your reply and suggested CSS additions. I have two questions.
Thank you,
John
+5No, 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>
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,
+5It worked for my example. Play around with the value of bottom to make sure it fits.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
