How to change the height and width of Sidetab? | Community
Skip to main content
Answered

How to change the height and width of Sidetab?

  • September 10, 2021
  • 3 replies
  • 503 views
T

Hello Everyone,

 

I want to know how to change height and width of the Sidetab.

And one more question when I click on the Sidetab, it shows a white outline around it, how should I remove it.

I am using @typeform/embed-react npm package.

 

This is my code 

import React from 'react'
import { Sidetab } from '@typeform/embed-react'

const Feedback = () => {
    return (
        <div>
            <Sidetab id="<form-id>" className=" " buttonText="Feedback" autoClose="2000" buttonColor="#3B82F6" height="100px" />
        </div>
    )
}

 

Best answer by Liz

Hi @thefierycoder Thank you! This helped a lot. It looks like your site has some overriding CSS that’s adding a border to the button from the Main CSS file. You’ll want to either remove the border option in that file or adjust the code to prevent it from overriding all of the CSS styles on your site. 


As for changing the height/width - I apologize because I realize I read your initial message incorrectly. You can change the height/width of the form itself, but it’s not possible to adjust the button height/width yet. 

 

I hope this helps!

View original

3 replies

Liz
Community Team
Forum|alt.badge.img+5
  • Liz
  • Tech Community Advocate
  • 15024 replies
  • September 10, 2021

Hi @thefierycoder Happy Fri-yay! Would you mind sending the URL where you have the form embedded so we can see where the white space is coming from? 

You should be able to specify the height and width in the options of your code per the instructions here.

Tagging @picsoung just in case I’m reading this incorrectly! 

Life is a series of awkward moments separated by snacks.
john.desborough
1 person likes this
  • john.desborough
    john.desborough
T
  • thefierycoder
  • Author
  • Explorer
  • 1 reply
  • September 11, 2021

Hello Liz,

 

Here is the url: https://www.codingspace.codes/

When you click on the sidetab, it shows a white outline around it.

How to get rid of this white outline?

 

I tried to specify height and width but It changes the height of typeform that is inside the button but not the height and width of the sidetab button itself.

<Sidetab id="<form-id>" className=" " buttonText="Feedback" autoClose="2000" buttonColor="#3B82F6" height="100px" />

Please help me with both of these issue.

Liz
Community Team
Forum|alt.badge.img+5
  • Liz
  • Tech Community Advocate
  • 15024 replies
  • Answer
  • September 13, 2021

Hi @thefierycoder Thank you! This helped a lot. It looks like your site has some overriding CSS that’s adding a border to the button from the Main CSS file. You’ll want to either remove the border option in that file or adjust the code to prevent it from overriding all of the CSS styles on your site. 


As for changing the height/width - I apologize because I realize I read your initial message incorrectly. You can change the height/width of the form itself, but it’s not possible to adjust the button height/width yet. 

 

I hope this helps!

Life is a series of awkward moments separated by snacks.
Gabi Amaral
1 person likes this
  • Gabi Amaral
    Gabi Amaral

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs