<ul dir="auto">
<li>[x ] 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">I basically expect to be able to have a "placeholder" in the input if the <code class="notranslate">value</code> is empty.  I've accomplished this by setting the <code class="notranslate">floatingLabelText</code> dynamically. I also want the input to honor the width of said placeholder.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">The input doesn't honor the width of the <code class="notranslate">label</code> for the floating text because it's set to <code class="notranslate">position:absolute</code>.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li><a href="https://codesandbox.io/s/q8n5k5r319" rel="nofollow">https://codesandbox.io/s/q8n5k5r319</a></li>
</ol>
<h2 dir="auto">Context</h2>

<p dir="auto">How does one accomplish this w/ MUI? I don't see how this is possible?  Am I going about this the wrong way?</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>0.20.0</td>
</tr>
<tr>
<td>React</td>
<td>16.0.0</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto">In my code I added</p>
<p dir="auto">import {DatePicker} from 'material-ui';<br>
</p>
<p dir="auto">Then i've got error<br>
ReferenceError: document is not defined<br>
at [object Object].componentWillMount (~/node_modules/material-ui/lib/overlay.js:64:34)</p>
<p dir="auto">I also change my import to<br>
const DatePicker = require('material-ui/lib/date-picker/date-picker');</p>
<p dir="auto">Still no luck</p>