Labels dont have same vertical size as buttons, inputs, selects...

[batata004]

One thing that I really link on FUI is that you can trust in the size (medium, big, large...) and apply it to buttons, inputs, selects (dropdown)... and they will look identical in vertical size and in many case they share the same padding, margin... However with labels, that is not the case. For example: the medium size is the default for buttons, inputs... and their vertical height is the same and if I place a <div class="ui label"> at the side of those elements, the vertical size of the label will be much much smaller. Ok, no big deal, I tried applying the big and large class to the label, however there is no good fit (not even close), the large is noticeably smaller and the big is noticeacly bigger.

So I cant even find a defined size for the label that matches the same size of a medium button, input, dropdown... Or am I doing something wrong?

Also notice that the margin is different, the label is not with equal distance from the other buttons itself.

[lubber-de]

That's intention and should not be considered a bug.
Labels are meant to be in flow with a Textline, that's why their equal size name is overall smaller than buttons or inputs, and to visually differ between them.

To get a better idea of why that matters, look at Horizontal labels, Pointing labels , Floating Labels or Labels inside Inputs for example in the Multiple Selection Dropdown

However, there exists adjustmensts already to match the same size/margin/padding when used in labeled input or labeled button

Of course you can adjust the values for padding/margin in label.less according to your needs, but we should not change the default theme

[batata004]

Thank you and I totally agree with you. However, sometimes I just want some label alongside buttons to display some information (like in the print above) and the labeled button are not a great idea because they allow user to interact with it (hovering the mouse, changes its color, the default cursor is pointer, clicking down the mouse also change the color of the button...) and the user may think that the button is broken if nothing happens when they click the button (and nothing should happen since it's supposed to be a label and not a button).

I know I can override most settings in custom css files but in many projects I import FUI from CDN so I need to add the changes inline to the elements or override styles on a separated stylecheet.

Anyway, if there is no way I can at least style the label to the same size as button (even using a different name) I will stick with a <div style="height:30px; border-radius:5px; border:1px solid grey; color:grey; padding:7px;">My Label</div> - it's ugly but gets the job done :)

[lubber-de]

Instead of inline styling (each label) for your usecase, i suggest to override it at a central place , if you want it for all your labels. From what i see, only the padding for a large label needs adjustments, so it will
look just like a button in size.

.ui.large.label {
 padding: 0.78571429em 1.5em; 
}

See https://jsfiddle.net/lubber/bze3r1uL/11/

[batata004]

Hi my friend, I had indeed realized that I should only change the padding (I even changed it inline, inside the style attr because I have only 3 labels on my app) but also the margin-right to set it to 3.5px which is the same of the buttons (the label has 2px of margin). But I still think the padding value is still wrong, it should be a bit smaller, check print below (I took it from your jsfiddle at https://jsfiddle.net/lubber/bze3r1uL/11/ ). The strange thing is that on my own app the size is perfect with the numbers you gave me, only on your jsfiddle the vertical size looks a little bit off. In my app it's perfect.

I think that at least the spacing (margin) of labels and buttons should default to the same value since I believe it is pretty common to people use buttons/inputs/dropdowns and labels alongside. I think that even the sizing (medium, small, large...) should be exactly the same to all the components, but I am pretty sure you already know much better use cases that maybe the sizes should not match.

On of the things I loved since the beginning with SUI (and later with FUI) was consistensy: 99% of elements align "just right", no hacks, no fixes... 99% of elements have a really similar aesthetic, spacing, border, light/dark/pastel colors... when you use same sizes or colors. Actually this is the first time I have to deal with a component not behaving as expected (label), but everything else is pretty easy and intuitive!

[ko2in]

The fiddle from @lubber-de looks OK to me. The label and buttons have the same height (36px) on Microsoft Edge, Chrome.

On my Firefox, the label's height is slightly different (36.5px) but not easy to catch by my eye and totally looks the same. Here's from Firefox.

[batata004]

@ko2in Since you told me on your computer everything looked perfectly, I spent almost 30 minutes investigating why my latest Chrome, on my Windows 10 (with latest update) was showing difference in margin-right and height of the label and the buttons alongside (and in your Chrome you reported everything is ok). I discovered the reason and I have no idea if there is a way to fix it.

Please, check the first 2 images (the first is the print and the second is the zoom of a particular area of the print) and check the second 2 images.

FIRST 2 IMAGES

SECOND 2 IMAGES

By default, my windows laptop came with 125% zoom on display and I use it like that since I bought it and after investigating the "inner working" of my laptop, I tried switching the display zoom to 100% and the height problem disappeared BUT the margin problem still remains. In both zooms above you can see the spacing between elements is different.

Anyway, I am not "pedant" and I am not "complaining" (I am not in the position to complain about anything, you guys are doing an awesome job) but I just reported this information back to you if you want to use it for solve something. It would be nice to have an app/website that works pixel perfect accross devices with different zoom situations but I know that maybe this is a "subpixel" problem and every device/browser may implement a different code to make a subpixel bigger or smaller!

If you want, I will close this, ok?

[ko2in]

@batata004 The right margin is correct as you mentioned. The label has less margin value (.14285714em) than the button (.25em) by design. But, I don't see any problem with the height as you mentioned with padding issue in @lubber-de fiddle.

Even I zoom my browser to 400%, I don't see significant result like your screenshot. Just let you know that I can't reproduce though. I am testing on my Ubuntu machine. Maybe, I'll check on my Windows 10 PC and see if there's any difference like your screenshots.

[batata004]

@ko2in Thanks my friend for your answer. I dont recommend you using the in-browser zoom feature because it does not keep things proportional, the subpixel will certainly happens! The zoom of browsers is not reliable in order to keep things in relative proportion. When I talked to you about the zoom issue I am having, is about the scaling/zoom that Windows 10 itself applies to the whole OS. The strange is that on FF, even with the Windows 10 zoom, everything works the same, but on Chrome it only works when I set 100% scale/zoom in the windows 10 whole system.

Anyway, I dont know if this is easy to fix (or even possible to fix) because it probably varies a lot how each system/browser deals with subpixel when there is zoom applied (wheter in the OS or in the browser, but in the browseer it's expected that the relative sizes of things are not kept exactly right, because of the subpixl problem).

[ko2in]

Well. I can't reproduce on my Windows machine either. I changed my display setting to 150% scale and everything look the same.

[batata004]

Mine I was using 125% do reproduce the problem. Anyway, this is not a big deal :) What would be nice is that buttons/labels share the same sizing/color scheme, but I understand if this is not possible. I am closing this issue, have a nice christmas for all of you!