AG-528 Document and use in examples overriding of style in child (react component) divs

src/groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample.css

@@ -1,3 +0,0 @@
-.ag-group-value .ag-react-container {
-    display: inline-block;
-}

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 {

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() {

src/masterDetailExample/DetailPanelComponent.css

@@ -1,7 +1,3 @@
-.ag-full-width-row .ag-react-container {
-    height: 100%
-}
-
 .full-width-panel {
     position: relative;
     background: #fafafa;

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) {

src/richGridExample/RichGridExample.css

@@ -1,7 +1,3 @@
-.ag-react-container {
-    display: block;
-}
-
 .ag-cell {
     padding-top: 2px !important;
     padding-bottom: 2px !important;