{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react/issues/4586","labels_url":"https://api.github.com/repos/facebook/react/issues/4586/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react/issues/4586/comments","events_url":"https://api.github.com/repos/facebook/react/issues/4586/events","html_url":"https://github.com/facebook/react/issues/4586","id":99727240,"number":4586,"title":"IE error - rendering properly in chrome ","user":{"login":"ramu1224","id":13513922,"avatar_url":"https://avatars.githubusercontent.com/u/13513922?v=3","gravatar_id":"","url":"https://api.github.com/users/ramu1224","html_url":"https://github.com/ramu1224","followers_url":"https://api.github.com/users/ramu1224/followers","following_url":"https://api.github.com/users/ramu1224/following{/other_user}","gists_url":"https://api.github.com/users/ramu1224/gists{/gist_id}","starred_url":"https://api.github.com/users/ramu1224/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ramu1224/subscriptions","organizations_url":"https://api.github.com/users/ramu1224/orgs","repos_url":"https://api.github.com/users/ramu1224/repos","events_url":"https://api.github.com/users/ramu1224/events{/privacy}","received_events_url":"https://api.github.com/users/ramu1224/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-08-07T20:42:58Z","updated_at":"2015-08-07T20:44:43Z","closed_at":null,"body":" am trying to render a header into the existing header by creating a div into the table\r\n\r\nHTML Code\r\n\r\n<table\r\n<div id=\"container\"></div>\r\n<tr><th/><th/>....<th/></tr>------> deleting this row when my header is getting rendered\r\n<tr><td/><td/>....<td/></td>\r\n</table>\r\nScript\r\n\r\nvar StickyDiv = React.createClass({\r\n            mixins: [SimplePageScrollMixin, SimpleResizeMixin],\r\n            displayName:\"StickyDiv\",\r\n            propTypes:{\r\n                offsetTop: React.PropTypes.number,\r\n                zIndex: React.PropTypes.number,\r\n                className: React.PropTypes.string\r\n            },\r\n            getInitialState : function(){\r\n                return {\r\n                    fix: false,\r\n                    width: null\r\n                };\r\n            },\r\n            getDefaultProps: function() {\r\n                return {\r\n                    offsetTop: 38,\r\n                    className: '',\r\n                    zIndex: 9999\r\n                };\r\n            },\r\n            handleResize : function(){\r\n                this.checkWidth();\r\n                this.checkPositions();\r\n            },\r\n            handleScroll: function () {\r\n                this.checkWidth();\r\n                this.checkPositions();\r\n            },\r\n            checkPositions: function(){\r\n                var pos;\r\n                if('findDOMNode' in React){\r\n                    pos = util.findPosRelativeToViewport(React.findDOMNode(this));\r\n                  } else {\r\n                    pos = util.findPosRelativeToViewport(this.getDOMNode());\r\n                  }               \r\n                 if (pos[1] <=this.props.offsetTop){                    \r\n                    this.setState({fix: true});\r\n                } else {\r\n                    this.setState({fix: false});\r\n                }  \r\n            },\r\n            checkWidth: function () {\r\n                var width = null;\r\n                if (this.refs.duplicate) {\r\n                 if('findDOMNode' in React){\r\n                    width = React.findDOMNode(this.refs.duplicate).getBoundingClientRect().width;\r\n                  } else {\r\n                    width = this.refs.duplicate.getDOMNode().getBoundingClientRect().width;\r\n                  }\r\n                } else {\r\n                 if('findDOMNode' in React){\r\n                    width = React.findDOMNode(this.refs.original).getBoundingClientRect().width;\r\n                  } else {\r\n                    width = this.refs.original.getDOMNode().getBoundingClientRect().width;\r\n                  }\r\n\r\n                }\r\n                if (this.state.width !== width) {\r\n                    this.setState({\r\n                        width: width\r\n                    });\r\n                }\r\n            },\r\n            componentDidMount: function () {\r\n                this.checkWidth();\r\n            },\r\n            render: function () {\r\n                var divStyle;\r\n                if (this.state.fix) {\r\n                    divStyle = {\r\n                        display: 'block',\r\n                        position: 'fixed',\r\n                        width: this.state.width ? (this.state.width + 'px') : null,\r\n                        top: this.props.offsetTop,\r\n                        content: \"text/html\"\r\n                    };\r\n\r\n                    return (\r\n                    React.createElement(\"div\", {style: {zIndex : this.props.zIndex, position:'relative', width:'100%'}}, \r\n                        React.createElement(\"div\", {ref: \"duplicate\", key: \"duplicate\", style: {visibility:'hidden'}}, \r\n                                this.props.children\r\n                            ),     \r\n                        React.createElement(\"div\", {ref: \"original\", key: \"original\", style: divStyle}, \r\n                            this.props.children\r\n                        )\r\n                    ));\r\n                }\r\n                else {\r\n                    divStyle = {\r\n                        display: 'block',\r\n                        position: 'relative',\r\n                        width:'100%'\r\n                    };\r\n                    return (\r\n                    React.createElement(\"div\", {style: {zIndex : this.props.zIndex, position:'relative', width:'100%'}}, \r\n                        React.createElement(\"div\", {ref: \"original\", key: \"original\", style: divStyle}, \r\n                            this.props.children\r\n                        )\r\n                    ));\r\n                }\r\n            }\r\n        });\r\n\r\n        MyComponent = React.createClass({displayName: \"MyComponent\",\r\n\r\n        getInitialState: function() {\r\n            return {\r\n                isSelected: false\r\n            };\r\n        },      \r\n        render: function() {\r\n\r\n        var myVar = \"<%= request.getAttribute(\"xxxx\") %>\"\r\n             return (\r\n               React.createElement(StickyDiv, null, \r\n              React.createElement(\"table\",{className: \"\", cellSpacing: \"0\", cellPadding: \"0\", border: \"0\", width: \"100%\"},\r\n               React.createElement(\"tr\", null, \r\n               React.createElement(\"th\", {valign:'middle', align:'left', width:'3%'},React.createElement(\"img\", {src: \"<%=appRoot%>/common/images/icon_confirm.gif\", className: \"recentlyProcessedIcon\"})), \r\n               React.createElement(\"th\", {width:'23%'},React.createElement(\"span\", null,\"second coloumn\")),\r\n               React.createElement(\"th\", {width:'9%'},React.createElement(\"span\", {nowrap:true},\"third coloumn \")),\r\n               React.createElement(\"th\", {width:'12%'},React.createElement(\"span\", null,\"fourth coloumn\")),\r\n               React.createElement(\"th\", {width:'11.5%'},React.createElement(\"span\", null,\"fifith\")),\r\n               React.createElement(\"th\", {width:'10.5%'},React.createElement(\"span\",null,\"sixth\")),\r\n               React.createElement(\"th\", {width:'3%',valign:'middle'},React.createElement(\"span\", null,\"seventh\"))\r\n)  )));\r\n  }});\r\n\r\n    React.render(React.createElement(MyComponent, null),\r\n           document.getElementById('container')\r\n        );\r\n\r\n![error](https://cloud.githubusercontent.com/assets/13513922/9145554/4506487a-3d23-11e5-97f8-51997a744e18.png)\r\n"},"comment":{"url":"https://api.github.com/repos/facebook/react/issues/comments/128830438","html_url":"https://github.com/facebook/react/issues/4586#issuecomment-128830438","issue_url":"https://api.github.com/repos/facebook/react/issues/4586","id":128830438,"user":{"login":"ramu1224","id":13513922,"avatar_url":"https://avatars.githubusercontent.com/u/13513922?v=3","gravatar_id":"","url":"https://api.github.com/users/ramu1224","html_url":"https://github.com/ramu1224","followers_url":"https://api.github.com/users/ramu1224/followers","following_url":"https://api.github.com/users/ramu1224/following{/other_user}","gists_url":"https://api.github.com/users/ramu1224/gists{/gist_id}","starred_url":"https://api.github.com/users/ramu1224/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ramu1224/subscriptions","organizations_url":"https://api.github.com/users/ramu1224/orgs","repos_url":"https://api.github.com/users/ramu1224/repos","events_url":"https://api.github.com/users/ramu1224/events{/privacy}","received_events_url":"https://api.github.com/users/ramu1224/received_events","type":"User","site_admin":false},"created_at":"2015-08-07T20:44:43Z","updated_at":"2015-08-07T20:44:43Z","body":"React version v0.13.3 in the context something it says about IE 8 in the comments"}}