From b54d5499596c054e60d28ca4d04c26e39d5b4472 Mon Sep 17 00:00:00 2001
From: Sean Landsman <sean@thelandsmans.com>
Date: Wed, 14 Jun 2017 15:32:09 +0100
Subject: [PATCH] AG-528 Document and use in examples overriding of style in
 child (react component) divs

---
 .../GroupedRowInnerRendererComponentExample.css               | 3 ---
 .../GroupedRowInnerRendererComponentExample.jsx               | 2 --
 src/groupedRowInnerRendererExample/MedalRenderer.jsx          | 3 +++
 src/masterDetailExample/DetailPanelComponent.css              | 4 ----
 src/masterDetailExample/DetailPanelComponent.jsx              | 3 +++
 src/richGridExample/RichGridExample.css                       | 4 ----
 6 files changed, 6 insertions(+), 13 deletions(-)
 delete mode 100644 src/groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample.css

diff --git a/src/groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample.css b/src/groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample.css
deleted file mode 100644
index 82da466..0000000
--- a/src/groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.ag-group-value .ag-react-container {
-    display: inline-block;
-}
diff --git a/src/groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample.jsx b/src/groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample.jsx
index 3f665d7..c44f410 100644
--- a/src/groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample.jsx
+++ b/src/groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample.jsx
@@ -3,8 +3,6 @@ import React, {Component} from "react";
 import {AgGridReact} from "ag-grid-react";
 import MedalRenderer from "./MedalRenderer";
 
-import "./GroupedRowInnerRendererComponentExample.css";
-
 import "ag-grid-enterprise";
 
 export default class GroupedRowInnerRendererComponentExample extends Component {
diff --git a/src/groupedRowInnerRendererExample/MedalRenderer.jsx b/src/groupedRowInnerRendererExample/MedalRenderer.jsx
index d021849..8d3f1b9 100644
--- a/src/groupedRowInnerRendererExample/MedalRenderer.jsx
+++ b/src/groupedRowInnerRendererExample/MedalRenderer.jsx
@@ -8,6 +8,9 @@ export default class MedalRenderer extends Component {
         this.gold = this.props.data.gold;
         this.silver = this.props.data.silver;
         this.bronze = this.props.data.bronze;
+
+        // override the containing div so that the +/- and label are inline
+        this.props.reactContainer.style.display = "inline-block";
     }
 
     render() {
diff --git a/src/masterDetailExample/DetailPanelComponent.css b/src/masterDetailExample/DetailPanelComponent.css
index 9ba19f0..424f4a8 100644
--- a/src/masterDetailExample/DetailPanelComponent.css
+++ b/src/masterDetailExample/DetailPanelComponent.css
@@ -1,7 +1,3 @@
-.ag-full-width-row .ag-react-container {
-    height: 100%
-}
-
 .full-width-panel {
     position: relative;
     background: #fafafa;
diff --git a/src/masterDetailExample/DetailPanelComponent.jsx b/src/masterDetailExample/DetailPanelComponent.jsx
index 7691f0a..801b508 100644
--- a/src/masterDetailExample/DetailPanelComponent.jsx
+++ b/src/masterDetailExample/DetailPanelComponent.jsx
@@ -16,6 +16,9 @@ export default class DetailPanelComponent extends Component {
 
         this.onGridReady = this.onGridReady.bind(this);
         this.onSearchTextChange = this.onSearchTextChange.bind(this);
+
+        // override the containing div so that the child grid fills the row height
+        this.props.reactContainer.style.height = "100%";
     }
 
     onGridReady(params) {
diff --git a/src/richGridExample/RichGridExample.css b/src/richGridExample/RichGridExample.css
index 0cc69a8..e3bdaf9 100644
--- a/src/richGridExample/RichGridExample.css
+++ b/src/richGridExample/RichGridExample.css
@@ -1,7 +1,3 @@
-.ag-react-container {
-    display: block;
-}
-
 .ag-cell {
     padding-top: 2px !important;
     padding-bottom: 2px !important;