Material-components-web: Textarea border is partially cut by the floating label

Created on 17 Nov 2017 · 7Comments · Source: material-components/material-components-web

Bugs

What MDC-Web Version are you using?

0.25.0 (except for base that is 0.24.0

What browser(s) is this bug affecting?

Chrome 62.0.3202.94 (64 bits)

What OS are you using?

MacOS 10.13.1

What are the steps to reproduce the bug?

Please write the steps which need to be taken in order to reproduce the bug. These steps should be
as detailed as possible, e.g.

Go to this url.

Start typing on the textarea

Observe the component's behavior: the top border is partially overlapped by the label.

What is the expected behavior?

The top border should stay the same

What is the actual behavior?

The top border is partially cut near the label

Any other information you believe would be useful?

screen shot 2017-11-17 at 15 37 41

backlog bug

Source

ricardobrandao

👍2

Most helpful comment

Seen on both 2017 MacBook Pro & iPhone 8+

mellogarrett on 4 Dec 2017

👍2

All 7 comments

Looks like a bug. Putting in tracker.

amsheehan on 20 Nov 2017

Textarea for Safari (Mobile & Desktop) is even worse ☹️

screen shot 2017-12-04 at 12 35 25 pm

mellogarrett on 4 Dec 2017

We have found that zoom levels and pixel densities of monitors have had a detrimental effect on these types of features. @mellogarrett Thank you for the screen shot, could you also provide the specs for the machine(s) you're using?

amsheehan on 4 Dec 2017

Seen on both 2017 MacBook Pro & iPhone 8+

mellogarrett on 4 Dec 2017

👍2

While looking at the dev tools, it seems like the and the <code>mdc-text-field</code> wrapper both have a border. The <textarea /> element does not have border-radius, and since the label is position: absolute, it overlaps the border. I also notice that the line-height for the label is slightly larger on the codepen compared to that of the demo site since the demo site uses normalize. </p> <p>Proposed solution is to remove the textarea input border, and add line-height of label to same as normalize.css (<code>line-height: 1.15</code>).</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars2.githubusercontent.com/u/579873?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="moog16 picture"> <strong>moog16</strong> <span class="text-muted ml-1">on 7 Dec 2017</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@ricardobrandao</strong> In the MDC demo normalize.css is being used, but is turned off in your codepen. I noticed that margin is added by default on both Chrome and Safari. Safari (v11.0.1) however adds by default to the textfield.</p> <pre><code class="prettyprint">margin-top: 0em; margin-bottom: 0em; margin-left: 0em; margin-right: 0em; </code></pre> <p>I noticed that this doesn't remove all margin (as seen in <strong>@mellogarrett</strong> screenshot), but by overriding this with <code>margin: 0</code> Safari actually removes the margin as expected. So seems like we stumbled upon a Safari bug. I'll be opening a PR with that change.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars2.githubusercontent.com/u/579873?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="moog16 picture"> <strong>moog16</strong> <span class="text-muted ml-1">on 12 Dec 2017</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@moog16</strong> thanks for the update 😄 Glad you've found the problem. </p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars1.githubusercontent.com/u/2292745?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="ricardobrandao picture"> <strong>ricardobrandao</strong> <span class="text-muted ml-1">on 13 Dec 2017</span> </div> <div class="col text-right"> </div> </div> </div> </div> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown text-center helpful"> <div class="title">Was this page helpful?</div> <div class="mt-1" onMouseLeave="rating(274905594, 0);"> <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(274905594, 1);" onclick="rate(274905594, 1);"></i> <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(274905594, 2);" onclick="rate(274905594, 2);"></i> <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(274905594, 3);" onclick="rate(274905594, 3);"></i> <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(274905594, 4);" onclick="rate(274905594, 4);"></i> <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(274905594, 5);" onclick="rate(274905594, 5);"></i> </div> <div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3452512275" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <div class="col-12 col-lg-4"> <div id="ph-above-related"></div> <div class="card card-custom issue-box"> <div class="card-body pt-3 pb-5"> <h2 class="mb-4">Related issues</h2> <div> <strong> <a href="/material-components-web/193618719/implement-chips-component">Implement Chips Component </a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars0.githubusercontent.com/u/1185269?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="traviskaufman picture"> <strong class="pr-1" dir="ltr">traviskaufman</strong> · <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/material-components-web/222457266/mdc-dialog-the-number-of-listeners-continuously-grows">MDC Dialog: the number of listeners continuously grows</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars0.githubusercontent.com/u/3225625?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="robzenn92 picture"> <strong class="pr-1" dir="ltr">robzenn92</strong> · <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/material-components-web/386524103/bug-mdcslider-discrete-circle-should-adapt-to-the-size-of">[Bug] MDCSlider discrete circle should adapt to the size of the number in it</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars3.githubusercontent.com/u/26075792?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="CyborgSemon picture"> <strong class="pr-1" dir="ltr">CyborgSemon</strong> · <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/material-components-web/522985607/add-dark-mode-support">Add Dark Mode support</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars3.githubusercontent.com/u/47312?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="abhiomkar picture"> <strong class="pr-1" dir="ltr">abhiomkar</strong> · <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/material-components-web/692197230/it-is-possible-to-import-for-example-tab-styles-without">It is possible to import for example tab styles without typography styles?</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars0.githubusercontent.com/u/18473137?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="7iomka picture"> <strong class="pr-1" dir="ltr">7iomka</strong> · <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> </div> </div> <div class="sticky-top pt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="ph-below-related-2" class="mt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <div class="col-12 col-lg-4"> </div> </div> <div class="skyscraper-container"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="7879185320" data-ad-format="vertical" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="mt-5 spacer"></div> <footer class="mt-5 pb-2 py-4 text-center mt-auto"> <div class="container"> <a class="navbar-brand logo mr-5" href="/"> <img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo"> bleeping<strong>coder</strong> </a> <div class="mt-4"> bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners. </div> <div> Source for this page: <a href="https://www.github.com/material-components/material-components-web/issues/1608" rel="nofollow noreferrer" target="_blank">Source</a> </div> </div> <hr class="mb-5 mt-5"> <div class="container"> <div class="row"> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular programming languages</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/python" dir="ltr">Python</a> </li> <li class="mb-2"> <a href="/javascript" dir="ltr">JavaScript</a> </li> <li class="mb-2"> <a href="/typescript" dir="ltr">TypeScript</a> </li> <li class="mb-2"> <a href="/cpp" dir="ltr">C++</a> </li> <li class="mb-2"> <a href="/csharp" dir="ltr">C#</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/microsoft/vscode" dir="ltr">vscode</a> </li> <li class="mb-2"> <a href="/numpy/numpy" dir="ltr">numpy</a> </li> <li class="mb-2"> <a href="/ant-design/ant-design" dir="ltr">ant-design</a> </li> <li class="mb-2"> <a href="/mui-org/material-ui" dir="ltr">material-ui</a> </li> <li class="mb-2"> <a href="/vercel/next-js" dir="ltr">next.js</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-0"> <strong>More GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/rust-lang/rust" dir="ltr">rust</a> </li> <li class="mb-2"> <a href="/moment/moment" dir="ltr">moment</a> </li> <li class="mb-2"> <a href="/yarnpkg/yarn" dir="ltr">yarn</a> </li> <li class="mb-2"> <a href="/mozilla/pdf-js" dir="ltr">pdf.js</a> </li> <li class="mb-2"> <a href="/JuliaLang/julia" dir="ltr">julia</a> </li> </ul> </div> </div> </div> <hr class="mb-5 mt-5"> <div class="container text-muted"> © 2026 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br /> By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>. </div> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>  <script type="text/javascript" src="/assets/js/main.js"></script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script></body> </html>