question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Label] Sharp edged corner labels stick out of the input field

See original GitHub issue

Screenshot As you can see on the screenshot, the corners of the ui corner label stick out of the input field. That’s hard to notice without adding a color, but if you do this really looks quite ugly …

Is this supposed to happen? Or is it my mistake? 😕

<div class="field">
  <label>Enter some random example crap ...</label>
  <div class="ui corner labeled left icon input">
    <i class="idea icon"></i>
    <input id="example" type="text" name="example" placeholder="Example">
    <div class="ui red corner label" title="Unsecure example!">
      <i class="spy icon"></i>
    </div>
  </div>
</div>

If it’s a bug, please fix it. It’s such a pain in the eye to me … 👀

Note

I figured out to do this know, but I think you should …

  • Addoverflow: hidden to all corner labels inside corner labeled input fields by default.

Issue Analytics

  • State:open
  • Created 7 years ago
  • Comments:7

github_iconTop GitHub Comments

1reaction
tabethcommented, Sep 29, 2016

That’s a good point. If no one else gets to this I’ll submit a PR for that.

0reactions
stale[bot]commented, Jun 5, 2018

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Label Placement in Forms - UXmatters
Label position—Placing a label above an input field works better in most cases, because users aren't forced to look separately at the label...
Read more >
Labeling Controls | Web Accessibility Initiative (WAI) - W3C
Provide labels to identify all form controls, including text fields, checkboxes, radio buttons, and drop-down menus. In most cases, this is done by...
Read more >
How to Label a Tapered Container or Curved Surface - Sttark
Use this step-by-step guide to ensure the taper and curves of your product label line up perfectly with your product packaging.
Read more >
How to Print Labels | Avery.com
Based on decades of label printing experience and top questions ... Bleed or print-to-the-edge area: The extra design space outside the trim ...
Read more >
How to Make Pretty Labels in Microsoft Word + FREE Printable
Draw your text box over your existing shape. Then, so the text box doesn't block the beautiful label you've made, you'll want to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found