Embedding a tableau dashboard into react messes up the formatting of the dashboard

Question

I have a tableau dashboard that I am trying to embed into a react website using the tableau-api npm package. Although it looks fine on tableau public, the layout changes when I embed it. How do I ensure that the layout stays the same when I embed it in react?

Edit: here is my code. I used this answer as reference

import React, { Component } from 'react';
import tableau from 'tableau-api';
 
class Visualization extends Component {
  componentDidMount() {
    this.initTableau()
  }
 
  initTableau() {
    const vizUrl = 'url';
    const vizContainer = this.vizContainer;
    let viz = new window.tableau.Viz(vizContainer, vizUrl)
  }
 
  render() {
    return (
      <div ref={(div) => { this.vizContainer = div }}>
      </div>
    )
  }
}
 
export default Visualization;

Answer 1

There are a couple of options you should take a look at

1. Change the size of your dashboard from automatic to fixed (reference here). This will help if you have floating elements in your dashboard
2. Add your preferred device to the dashboard panel

3. Change the fit option to entire view

If none of these options work, I would recommend you share a photo of your dashboard and your code to be able to debug