How to make chart fit the react-tabs inside React-Grid-Layout?

Offen

#280 erstellt am 04.3.2019 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit: 4/5
Geschätzter Aufwand: 3-5 Tage
Anfängerfreundlichkeit: 20/100

Issue-Typ: Bug
Klarheit: Muss geklärt werden
Aktivitätsstatus: Veraltet
Tech-Stack: javascript, react
Bereich: frontend

Rechercherichtung

Es ist keine Repository-Datei und kein Test angegeben. Beginne damit, das im Issue beschriebene verschachtelte Layout aus React-Grid-Layout, react-tabs und TVChartContainer zu reproduzieren, und untersuche anschließend, wie Höhe und Breite durch die Tab-Panels weitergegeben werden. Die Aufgabe ist erledigt, wenn entweder ein Fix auf Repository-Ebene identifiziert oder das erforderliche Größenverhalten mit einem Regressionstest dokumentiert wurde, sofern das Projekt dies unterstützt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

Hi @danez
Please help. I want put the chart in a tab of a grid. I have successfully put the chart in the grid (React Grid Layout) and the chart size fits the grid, but when i put tab (React-Tab) in a grid and then the chart inside the tab. The chart wont fit anymore. How to solve?

class TvChart extends React.Component {
  render() {
    return (
      <div>
        <Tabs style={this.props.style}>
          <TabList>
            <Tab>Chart</Tab>
            <Tab>Depth</Tab>
          </TabList>
          <TabPanel>
            <Card>
              <TVChartContainer />
            </Card>
          </TabPanel>
          <TabPanel>
            <h5>Depth</h5>
          </TabPanel>
        </Tabs>
      </div>
    );
  }
}

this is the css

.TVChartContainer {
    height: 100%;
    width: 100%;
}

and this is the parent style

const styles = {
  main: {
    backgroundColor: "#ffffff",
    fontSize: "10px",
    height: "inherit"
  },
  orderbook: {
    minHeight: "220px",
    minWidth: "100px"
  },
  ask: {
    width: "50%"
  },
  bid: {
    width: "50%",
    borderRight: "1px solid #151d2b"
  }
};

but this one works, the chart fits the grid completely.

class TvChart extends React.Component {
  render() {
    return (
      <Card style={this.props.style.main}>
        <TVChartContainer />
      </Card>
    );
  }
}

I appreciate if you can help.

Regards,

Ian

Vorherrschende Sprache: JavaScript
Sterne: 3.1k
Forks: 455
Ø Merge: 5 Std. 9 Min.
Gemergte PRs (30 T.): 2

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Erste Schritte

Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
Forken Sie das Repository und arbeiten Sie in einem Branch.
Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus reactjs/react-tabs

Tab not updating properly when state changes dynamically Offen

Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 25/100

reactjs/react-tabs#584 · Erstellt am 27.7.2025
className default is lost when props.className is undefined in UncontrolledTabs Offen

Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 45/100

reactjs/react-tabs#581 · 3 Kommentare · Erstellt am 28.5.2025
Can I get the width of the dom of the first selected tab? Offen

Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 35/100

reactjs/react-tabs#571 · Erstellt am 19.12.2024
Support hiding of all TabPanels Offen

Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 35/100

reactjs/react-tabs#525 · 1 Kommentar · 1 Reaktion · Erstellt am 22.7.2023
Disabled tabs should remain keyboard focusable as per W3C WAI ARIA guidelines Offen

Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 35/100

reactjs/react-tabs#521 · 3 Kommentare · Erstellt am 07.6.2023

Alle Issues in reactjs/react-tabs