diff --git a/app/assets/stylesheets/layout/_page_layout.scss b/app/assets/stylesheets/layout/_page_layout.scss index 82d1f46bcd..59ae25f6c9 100644 --- a/app/assets/stylesheets/layout/_page_layout.scss +++ b/app/assets/stylesheets/layout/_page_layout.scss @@ -84,4 +84,19 @@ div.bordered-header { .table-cell{ display: table-cell; -} \ No newline at end of file +} + +.grid-content.app-tables { + box-sizing: border-box; + padding-bottom: 1.5rem; + min-height: 100%; + position: relative; +} + +.grid-content.app-tables > .content-block, .grid-content.app-tables > .content-block > .generic-bordered-box, .grid-content.app-tables > .content-block > .generic-bordered-box > .overview-tabs { + height: 100%; +} + +.grid-content.app-tables > .content-block { + margin-bottom: 0 !important; +} diff --git a/app/components/Account/AccountOverview.jsx b/app/components/Account/AccountOverview.jsx index 645af68c71..66bb88d2f2 100644 --- a/app/components/Account/AccountOverview.jsx +++ b/app/components/Account/AccountOverview.jsx @@ -32,6 +32,7 @@ import AccountOrders from "./AccountOrders"; import cnames from "classnames"; import TranslateWithLinks from "../Utility/TranslateWithLinks"; import { checkMarginStatus } from "common/accountHelper"; +import tableHeightHelper from "lib/common/tableHeightHelper"; class AccountOverview extends React.Component { @@ -59,6 +60,9 @@ class AccountOverview extends React.Component { // "OPEN.DASH" ] }; + + this.tableHeightMountInterval = tableHeightHelper.tableHeightMountInterval.bind(this); + this.adjustHeightOnChangeTab = tableHeightHelper.adjustHeightOnChangeTab.bind(this); } componentWillMount() { @@ -79,6 +83,18 @@ class AccountOverview extends React.Component { if (np.account !== this.props.account) this._checkMarginStatus(np); } + componentDidMount(){ + this.tableHeightMountIntervalInstance = this.tableHeightMountInterval(); + } + + componentWillUnmount(){ + clearInterval(this.tableHeightMountIntervalInstance); + } + + // adjustHeightOnChangeTab(){ + // this.adjustHeightOnChangeTab(); + // } + shouldComponentUpdate(nextProps, nextState) { return ( !utils.are_equal_shallow(nextProps.balanceAssets, this.props.balanceAssets) || @@ -494,10 +510,10 @@ class AccountOverview extends React.Component { const hiddenSubText = H; return ( -
+
- + {counterpart.translate("account.eq_value")} } subText={totalValue}> diff --git a/app/components/Utility/Tabs.jsx b/app/components/Utility/Tabs.jsx index 885cfa42eb..fc7f4d6e29 100644 --- a/app/components/Utility/Tabs.jsx +++ b/app/components/Utility/Tabs.jsx @@ -84,6 +84,7 @@ class Tabs extends React.Component { } _changeTab(value) { + if (value === this.state.activeTab) return; // Persist current tab if desired if (this.props.setting) { SettingsActions.changeViewSetting({ @@ -91,6 +92,8 @@ class Tabs extends React.Component { }); } this.setState({activeTab: value}); + + if(this.props.onChangeTab) this.props.onChangeTab(value); } render() { diff --git a/app/lib/common/tableHeightHelper.js b/app/lib/common/tableHeightHelper.js new file mode 100644 index 0000000000..6be0bb4696 --- /dev/null +++ b/app/lib/common/tableHeightHelper.js @@ -0,0 +1,19 @@ +export default { + tableHeightMountInterval(){ + let interval = setInterval(function(){ + let appTables = this.refs.appTables; + + if(!appTables) return; + + if(parseInt(appTables.style.height) !== appTables.clientHeight){ + appTables.style.height = `${appTables.clientHeight}px`; + } + }.bind(this), 10); + + return interval; + }, + adjustHeightOnChangeTab(){ + let appTables = this.refs.appTables; + if (appTables) this.refs.appTables.style.height = "auto"; + } +};