<ul dir="auto">
<li>[x ] I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">I think there is no actual page behind the component demo's and the link should probably just open the sub navigation</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">As there is no actual page for the sub menu header, the link results in a 404.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>Navigate to <a href="https://material-ui-1dab0.firebaseapp.com/getting-started/usage/" rel="nofollow">https://material-ui-1dab0.firebaseapp.com/getting-started/usage/</a></li>
<li>In the bottom paragraph there is a link to the components demo's</li>
<li><a href="https://material-ui-1dab0.firebaseapp.com/component-demos" rel="nofollow">https://material-ui-1dab0.firebaseapp.com/component-demos</a></li>
<li>404</li>
</ol>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">That the Popover content will adjust to the dynamically loaded/delayed content</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">The popover initially loads. You see a tiny little div because the data has not yet loaded in. Once it does come in, half of the div is now off screen.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/19170080/34237467-d295d5fa-e5ca-11e7-97a2-58866662f53c.gif"><img src="https://user-images.githubusercontent.com/19170080/34237467-d295d5fa-e5ca-11e7-97a2-58866662f53c.gif" alt="popover-notworking" data-animated-image="" style="max-width: 100%;"></a></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>Create a simple component that has a delayed render like so</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
class DelayedComponent extends React.Component {

  state = {
    isSet: false
  };

  componentDidMount() {
    setTimeout(() =&gt; {
      this.setState({
        isSet: true
      });
    }, 1000);

  }

  render() {
    if (!this.state.isSet)
      return &lt;div&gt;&lt;/div&gt;
    else
      return (
        &lt;div&gt;
          this is some really long text to test the Popover component with
          &lt;FormControl component=&quot;fieldset&quot;&gt;
              &lt;FormLabel component=&quot;legend&quot;&gt;anchorReference&lt;/FormLabel&gt;
              &lt;RadioGroup
                row
                aria-label=&quot;anchorReference&quot;
                name=&quot;anchorReference&quot;
                value={this.state.anchorReference}
              &gt;
                &lt;FormControlLabel value=&quot;anchorEl&quot; control={&lt;Radio /&gt;} label=&quot;anchorEl&quot; /&gt;
                &lt;FormControlLabel
                  value=&quot;anchorPosition&quot;
                  control={&lt;Radio /&gt;}
                  label=&quot;anchorPosition&quot;
                /&gt;
              &lt;/RadioGroup&gt;
            &lt;/FormControl&gt;
        &lt;/div&gt;
      );
  }
}"><pre class="notranslate"><code class="notranslate">
class DelayedComponent extends React.Component {

  state = {
    isSet: false
  };

  componentDidMount() {
    setTimeout(() =&gt; {
      this.setState({
        isSet: true
      });
    }, 1000);

  }

  render() {
    if (!this.state.isSet)
      return &lt;div&gt;&lt;/div&gt;
    else
      return (
        &lt;div&gt;
          this is some really long text to test the Popover component with
          &lt;FormControl component="fieldset"&gt;
              &lt;FormLabel component="legend"&gt;anchorReference&lt;/FormLabel&gt;
              &lt;RadioGroup
                row
                aria-label="anchorReference"
                name="anchorReference"
                value={this.state.anchorReference}
              &gt;
                &lt;FormControlLabel value="anchorEl" control={&lt;Radio /&gt;} label="anchorEl" /&gt;
                &lt;FormControlLabel
                  value="anchorPosition"
                  control={&lt;Radio /&gt;}
                  label="anchorPosition"
                /&gt;
              &lt;/RadioGroup&gt;
            &lt;/FormControl&gt;
        &lt;/div&gt;
      );
  }
}
</code></pre></div>
<p dir="auto">And use the Popover like so:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="render() {
...
        &lt;Popover
          open={open}
          anchorEl={anchorEl}
          anchorReference={anchorReference}
          anchorPosition={{ top: positionTop, left: positionLeft }}
          onClose={this.handleClose}
          anchorOrigin={{
            vertical: anchorOriginVertical,
            horizontal: anchorOriginHorizontal,
          }}
          transformOrigin={{
            vertical: transformOriginVertical,
            horizontal: transformOriginHorizontal,
          }}
        &gt;
          &lt;DelayedComponent /&gt;
        &lt;/Popover&gt;
...
}"><pre class="notranslate"><code class="notranslate">render() {
...
        &lt;Popover
          open={open}
          anchorEl={anchorEl}
          anchorReference={anchorReference}
          anchorPosition={{ top: positionTop, left: positionLeft }}
          onClose={this.handleClose}
          anchorOrigin={{
            vertical: anchorOriginVertical,
            horizontal: anchorOriginHorizontal,
          }}
          transformOrigin={{
            vertical: transformOriginVertical,
            horizontal: transformOriginHorizontal,
          }}
        &gt;
          &lt;DelayedComponent /&gt;
        &lt;/Popover&gt;
...
}
</code></pre></div>
<ol start="2" dir="auto">
<li>Position a button to trigger the Popover flush right</li>
<li>Open the popover</li>
</ol>
<h2 dir="auto">Context</h2>

<p dir="auto">When using Popover with content that could load in delayed I would hope the Popover could adjust for the change or a method could be provided.  If there were access to the positioning method used inside Popover then it would allow for updating of delayed content. From what I see that would be setPositioningStyles() inside of Popover.</p>
<p dir="auto">With that access provided I can then fire off that setPositioningStyles from outside the Popover and give it the proper positioning.  If this were approved I would not mind taking on the work.</p>
<p dir="auto">Thanks</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>1.0.0-beta.23</td>
</tr>
<tr>
<td>React</td>
<td>16</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>