Fomantic-ui: Height difference b/w label and basic label

Created on 21 Apr 2020  路  3Comments  路  Source: fomantic/Fomantic-UI

Bug Report

The heght of the <a class="ui label">Testing</a> is 26px whereas <a class="ui basic label">Basic</a> has a height of 28px

Expected result

Both labels should have the same height. Since the size is mentioned using a different property.
Is it intentional? Shouldn't be they have the same height?

Testcase

https://codesandbox.io/s/quiet-surf-w7upu?file=/index.html

Screenshot (if possible)

https://imgur.com/ZYS6Wt1

Version

2.8.4

lancss typbug

Most helpful comment

A label does not have a height property. It's height is calculated by the used font size.
Infact both label variants have the same/no height and the same padding. However, basic labels have a border, which adds 2 pixel to the overall height.
That's intentional for the default theme.

You can of course override this behavior for example by the following

.ui.basic.label {
    padding-top: calc(.5833em - 1px);
    padding-bottom: calc(.5833em - 1px);
}

All 3 comments

A label does not have a height property. It's height is calculated by the used font size.
Infact both label variants have the same/no height and the same padding. However, basic labels have a border, which adds 2 pixel to the overall height.
That's intentional for the default theme.

You can of course override this behavior for example by the following

.ui.basic.label {
    padding-top: calc(.5833em - 1px);
    padding-bottom: calc(.5833em - 1px);
}

I thought a long time about this again and finally decided its more a bug than an intentional feature.
That said, #1507 will fix this

Thanks

Was this page helpful?
0 / 5 - 0 ratings

Related issues

neokio picture neokio  路  4Comments

loweoj picture loweoj  路  3Comments

GammaGames picture GammaGames  路  4Comments

PhilippGrashoff picture PhilippGrashoff  路  3Comments

hajanajubudeen88 picture hajanajubudeen88  路  4Comments