I'm currently utilizing react-twitter-widgets to incorporate a Twitter timeline within my application. While everything is rendering correctly, the height of the timeline extends down the entire page. Is there a way to adjust the widget's height so that it only occupies the available viewport height? https://i.sstatic.net/KXZJ2.png
The main dashboard has the following DOM structure:
<div className="col-md-9 ml-sm-auto col-lg-10 pt-2 px-3">
<div className="row">
<div className="col">
<TitleBar title={this.props.ticker} status={this.props.status}/>
</div>
</div>
<div className="row">
<div className="col-lg-8">
<div className="row">
<div className="col-lg-12 mb-2">
<div className="card border-0">
<div className="card-body">
<Chart chart={this.props.predictionChart} />
</div>
</div>
</div>
<div className="col-lg-6">
<div className="card border-0">
<div className="card-body">
<Chart chart={this.props.errorChart}/>
</div>
</div>
</div>
<div className="col-lg-6">
<div className="card border-0">
<div className="card-body">
<Chart chart={this.props.volumeChart} />
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-4">
<TwitterCard href={this.props.twitter} ticker={this.props.ticker}/>
</div>
</div>
</div>
Here's an example format for the TwitterCard component:
import React from "react";
import { Timeline } from 'react-twitter-widgets';
export class TwitterCard extends React.Component{
constructor(props){
super();
this.state = {
ticker: props.ticker,
href: props.href
}
}
render() {
return (
<Timeline dataSource={{sourceType: 'URL', url: this.props.href}}/>
)
}
}
The primary CSS file looks like this:
body {
font-size: .875rem;
background-color: #f7f7f7;
}
/* Remaining stylesheet omitted for brevity */