search

Semantic-Org / Semantic-UI

Semantic is a UI component framework based around useful principles from natural language.
http://www.semantic-ui.com
MIT License
51.11k stars 4.94k forks source link

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

Open brainscript opened 8 years ago

brainscript commented 8 years ago

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? :confused:

<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 ... :eyes:

Note

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

tabeth commented 8 years ago

That's not a bug:

A corner label must be positioned inside a container with position: relative to display properly. If a container is rounded you will need to add overflow:hidden to the container to produce a rounded label.

from the docs

brainscript commented 8 years ago

@tabeth 

.ui.corner.labeled.field
  position: relative
  overflow: hidden

Like this? It still looks the same ... Screenshot

brainscript commented 8 years ago

Oh, I have to add the overflow: hidden to the corner label itself.

tabeth commented 8 years ago

Yeah. I was about to create a jsfiddle, but it sounds like you got it.

brainscript commented 8 years ago

But why is this not enabled by default for all corner labels inside of input fields (They are rounded ...)?

tabeth commented 8 years ago

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

stale[bot] commented 6 years ago

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!