<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/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">When a Select is opened with a long list of items, the top of the dropdown should be visible and the dropdown should be scrollable.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Dropdown's top is set to a negative value and it clips the top part of it and makes it unscrollable on Chrome. And it's max height should be set to 100%</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>Add a select with about 50 items</li>
<li>Try to open it</li>
</ol>
<p dir="auto">** I traced this issue to the getPositioningStyle in popover.js. I found that modifying the code like below fixes it.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" // Check if the horizontal axis needs shifting
      if (left &lt; this.marginThreshold) {
        var _diff2 = left - this.marginThreshold;
        left -= _diff2;
        transformOrigin.horizontal += _diff2;
      } else if (right &gt; widthThreshold) {
        var _diff3 = right - widthThreshold;
        left -= _diff3;
        transformOrigin.horizontal += _diff3;
      }"><pre class="notranslate"><code class="notranslate"> // Check if the horizontal axis needs shifting
      if (left &lt; this.marginThreshold) {
        var _diff2 = left - this.marginThreshold;
        left -= _diff2;
        transformOrigin.horizontal += _diff2;
      } else if (right &gt; widthThreshold) {
        var _diff3 = right - widthThreshold;
        left -= _diff3;
        transformOrigin.horizontal += _diff3;
      }
</code></pre></div>
<h2 dir="auto">Context</h2>
    
<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>v1.0.0-beta.18</td>
</tr>
<tr>
<td>React</td>
<td>16</td>
</tr>
<tr>
<td>browser</td>
<td>chrome 60</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<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/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">The <code class="notranslate">console.log(css)</code> returns some CSS as string (?)</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The <code class="notranslate">console.log(css)</code> returns empty string <code class="notranslate">""</code>. Therefore my rendered <code class="notranslate">material-ui</code> components don't have styles.</p>
<h2 dir="auto">Steps to Reproduce</h2>
<p dir="auto">I followed all steps in the official guide <a href="https://material-ui.com/guides/server-rendering/" rel="nofollow">https://material-ui.com/guides/server-rendering/</a>. And here is some sample of my code:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/* server.js */
...
import { SheetsRegistry, JssProvider } from 'react-jss';
import { create } from 'jss';
import preset from 'jss-preset-default';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import createGenerateClassName from 'material-ui/styles/createGenerateClassName';
import { red } from 'material-ui/colors';
...
app.use((req, res) =&gt; {
...
  const sheetsRegistry = new SheetsRegistry();
  const theme = createMuiTheme({
    palette: {
      primary: red,
      type: 'dark',
    },
  });
  const jss = create(preset());
  jss.options.createGenerateClassName = createGenerateClassName;

  const component = (
    &lt;Provider store={store} key=&quot;provider&quot;&gt;
      &lt;JssProvider registry={sheetsRegistry} jss={jss}&gt;
        &lt;MuiThemeProvider theme={theme} sheetsManager={new Map()}&gt;
          &lt;ReduxAsyncConnect {...renderProps} /&gt;
        &lt;/MuiThemeProvider&gt;
      &lt;/JssProvider&gt;
    &lt;/Provider&gt;
  );

  const css = sheetsRegistry.toString();
  console.log(css); // returns empty string

  res.send(`&lt;!doctype html&gt;
    ${ReactDOM.renderToString(
      &lt;Html assets={webpackIsomorphicTools.assets()} style={css} component={component} store={store} /&gt;
  )}`);
...
});"><pre class="notranslate"><span class="pl-c">/* server.js */</span>
...
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">SheetsRegistry</span><span class="pl-kos">,</span> <span class="pl-v">JssProvider</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-jss'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">create</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'jss'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s1">preset</span> <span class="pl-k">from</span> <span class="pl-s">'jss-preset-default'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">MuiThemeProvider</span><span class="pl-kos">,</span> <span class="pl-s1">createMuiTheme</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui/styles'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s1">createGenerateClassName</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui/styles/createGenerateClassName'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">red</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui/colors'</span><span class="pl-kos">;</span>
...
<span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">use</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
...
  <span class="pl-s1">const</span> <span class="pl-s1">sheetsRegistry</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">SheetsRegistry</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-s1">theme</span> <span class="pl-c1">=</span> <span class="pl-en">createMuiTheme</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">palette</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">primary</span>: <span class="pl-s1">red</span><span class="pl-kos">,</span>
      <span class="pl-c1">type</span>: <span class="pl-s">'dark'</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-s1">jss</span> <span class="pl-c1">=</span> <span class="pl-en">create</span><span class="pl-kos">(</span><span class="pl-en">preset</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-s1">jss</span><span class="pl-kos">.</span><span class="pl-c1">options</span><span class="pl-kos">.</span><span class="pl-c1">createGenerateClassName</span> <span class="pl-c1">=</span> <span class="pl-s1">createGenerateClassName</span><span class="pl-kos">;</span>

  <span class="pl-k">const</span> <span class="pl-s1">component</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">Provider</span> <span class="pl-c1">store</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">store</span><span class="pl-kos">}</span> <span class="pl-c1">key</span><span class="pl-c1">=</span><span class="pl-s">"provider"</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">JssProvider</span> <span class="pl-c1">registry</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">sheetsRegistry</span><span class="pl-kos">}</span> <span class="pl-c1">jss</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">jss</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">MuiThemeProvider</span> <span class="pl-c1">theme</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">theme</span><span class="pl-kos">}</span> <span class="pl-c1">sheetsManager</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-k">new</span> <span class="pl-v">Map</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">ReduxAsyncConnect</span> <span class="pl-kos">{</span>...<span class="pl-s1">renderProps</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">MuiThemeProvider</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">JssProvider</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Provider</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-k">const</span> <span class="pl-s1">css</span> <span class="pl-c1">=</span> <span class="pl-s1">sheetsRegistry</span><span class="pl-kos">.</span><span class="pl-en">toString</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">css</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// returns empty string</span>

  <span class="pl-s1">res</span><span class="pl-kos">.</span><span class="pl-en">send</span><span class="pl-kos">(</span><span class="pl-s">`&lt;!doctype html&gt;</span>
<span class="pl-s">    <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-v">ReactDOM</span><span class="pl-kos">.</span><span class="pl-en">renderToString</span><span class="pl-kos">(</span></span></span>
<span class="pl-s"><span class="pl-s1">      <span class="pl-c1">&lt;</span><span class="pl-ent">Html</span> <span class="pl-c1">assets</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">webpackIsomorphicTools</span><span class="pl-kos">.</span><span class="pl-en">assets</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">}</span> <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">css</span><span class="pl-kos">}</span> <span class="pl-c1">component</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">component</span><span class="pl-kos">}</span> <span class="pl-c1">store</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">store</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span></span></span>
<span class="pl-s"><span class="pl-s1">  <span class="pl-kos">)</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
...
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">The response I got from initial render is correct, for example this <code class="notranslate">AppBar</code> component</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;AppBar&gt;
  &lt;Toolbar&gt;
    &lt;IconButton color=&quot;contrast&quot; aria-label=&quot;Menu&quot; className={classes.menuButton}&gt;
      &lt;MenuIcon /&gt;
    &lt;/IconButton&gt;
    &lt;Typography type=&quot;title&quot; color=&quot;inherit&quot; className={classes.title}&gt;
      Dashboard
    &lt;/Typography&gt;
    &lt;Button color=&quot;contrast&quot;&gt;Login&lt;/Button&gt;
  &lt;/Toolbar&gt;
&lt;/AppBar&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">AppBar</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">Toolbar</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">IconButton</span> <span class="pl-c1">color</span><span class="pl-c1">=</span><span class="pl-s">"contrast"</span> <span class="pl-c1">aria-label</span><span class="pl-c1">=</span><span class="pl-s">"Menu"</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">classes</span><span class="pl-kos">.</span><span class="pl-c1">menuButton</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">MenuIcon</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">IconButton</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">Typography</span> <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"title"</span> <span class="pl-c1">color</span><span class="pl-c1">=</span><span class="pl-s">"inherit"</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">classes</span><span class="pl-kos">.</span><span class="pl-c1">title</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
      Dashboard
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Typography</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">Button</span> <span class="pl-c1">color</span><span class="pl-c1">=</span><span class="pl-s">"contrast"</span><span class="pl-c1">&gt;</span>Login<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Button</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Toolbar</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">AppBar</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">Rendered to string as</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;header class=&quot;c10 c16 c3 c4 c8 mui-fixed&quot; data-reactid=&quot;4&quot;&gt;
    &lt;div class=&quot;c37 c38&quot; data-reactid=&quot;5&quot;&gt;
        &lt;button tabindex=&quot;0&quot; class=&quot;c48 c39 c41 c2&quot; type=&quot;button&quot; role=&quot;button&quot; aria-label=&quot;Menu&quot; data-reactid=&quot;6&quot;&gt;&lt;span class=&quot;c45&quot; data-reactid=&quot;7&quot;&gt;&lt;svg class=&quot;c50 c46&quot; focusable=&quot;false&quot; viewBox=&quot;0 0 24 24&quot; aria-hidden=&quot;true&quot; data-reactid=&quot;8&quot;&gt;&lt;path d=&quot;M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z&quot; data-reactid=&quot;9&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;c51&quot; data-reactid=&quot;10&quot;&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;h2 class=&quot;c58 c64 c77 c1&quot; data-reactid=&quot;11&quot;&gt;Dashboard&lt;/h2&gt;
        &lt;button tabindex=&quot;0&quot; class=&quot;c48 c82 c87&quot; type=&quot;button&quot; role=&quot;button&quot; data-reactid=&quot;12&quot;&gt;&lt;span class=&quot;c84&quot; data-reactid=&quot;13&quot;&gt;Login&lt;/span&gt;&lt;span class=&quot;c51&quot; data-reactid=&quot;14&quot;&gt;&lt;/span&gt;
        &lt;/button&gt;
    &lt;/div&gt;
&lt;/header&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">header</span> <span class="pl-c1">class</span>="<span class="pl-s">c10 c16 c3 c4 c8 mui-fixed</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">4</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">c37 c38</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">5</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">tabindex</span>="<span class="pl-s">0</span>" <span class="pl-c1">class</span>="<span class="pl-s">c48 c39 c41 c2</span>" <span class="pl-c1">type</span>="<span class="pl-s">button</span>" <span class="pl-c1">role</span>="<span class="pl-s">button</span>" <span class="pl-c1">aria-label</span>="<span class="pl-s">Menu</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">6</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span>="<span class="pl-s">c45</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">7</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">svg</span> <span class="pl-c1">class</span>="<span class="pl-s">c50 c46</span>" <span class="pl-c1">focusable</span>="<span class="pl-s">false</span>" <span class="pl-c1">viewBox</span>="<span class="pl-s">0 0 24 24</span>" <span class="pl-c1">aria-hidden</span>="<span class="pl-s">true</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">8</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">path</span> <span class="pl-c1">d</span>="<span class="pl-s">M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">9</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">path</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">svg</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span>="<span class="pl-s">c51</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">10</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;/</span><span class="pl-ent">button</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">h2</span> <span class="pl-c1">class</span>="<span class="pl-s">c58 c64 c77 c1</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">11</span>"<span class="pl-kos">&gt;</span>Dashboard<span class="pl-kos">&lt;/</span><span class="pl-ent">h2</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">tabindex</span>="<span class="pl-s">0</span>" <span class="pl-c1">class</span>="<span class="pl-s">c48 c82 c87</span>" <span class="pl-c1">type</span>="<span class="pl-s">button</span>" <span class="pl-c1">role</span>="<span class="pl-s">button</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">12</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span>="<span class="pl-s">c84</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">13</span>"<span class="pl-kos">&gt;</span>Login<span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span>="<span class="pl-s">c51</span>" <span class="pl-c1">data-reactid</span>="<span class="pl-s">14</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;/</span><span class="pl-ent">button</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">header</span><span class="pl-kos">&gt;</span></pre></div>
<h2 dir="auto">Context</h2>
<p dir="auto">Just trying to accomplish simple SSR by following official guide.</p>
<h2 dir="auto">My 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.20</td>
</tr>
<tr>
<td>React</td>
<td>15.5.4</td>
</tr>
<tr>
<td>JSS</td>
<td>8.1.0</td>
</tr>
<tr>
<td>react-jss</td>
<td>7.2.0</td>
</tr>
</tbody>
</table>