Certainly another bug with semantic ui size

[batata004]

After @Banandrew taught me a lot of good things now I am starting to understand semantic ui. But some bugs are still on my way.

@Banandrew gave me lots of advices and even after using his advices 2 bugs are still annoying me. Please open the link below in your browser. It's a pretty minimalistic code with only the basic to reproduce the bug.

https://www.quemfazsite.com.br/temp/teste123456.php

To me it's clear at least 2 bugs:

1) I made everything exactly as @Banandrew said (and exactly as documentation says) and the button is still a little bit bigger than the rest of the elements. Actually it's exactly 2 pixels short! See the zoomed print screen below where I added a black rectangle to evidence the problem:

2) I removed all unecessary styles and kept ONLY the float:right in my 3 elements cause I need it and semantic ui cant demand user not to use it. You can see that the float:right is not working, the elements are just like "float:none" despite float:right being explicitly said. The button, for example, is the first element with float:right and it still shows up in the left!

Do you have any suggestion? This bug is affecting clearly this website https://www.frasesparavida.com.br where sizes are not consistent and if I try to use float:right (as I really need) it does not work at all.

[awgv]

@batata004 float has no effect on elements using Flexbox. .ui.input uses display: inline-flex;, so change it to something else, and it will start working.

[batata004]

UHULLLLLLLL!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT GREAT

You hitted the spot my friend @Banandrew!!!!!!!!!!!!!!!!!!!!! ALL THE PROBLEMS I WAS HAVING WITH SEMANTIC UI WAS in the fact that:

1) the parent of my inputs/buttons was not being set to inline-flex or 2) the element itself was not being set to inline-flex

Sometimes jquery uses effects like fade or slideUp that make the final display be blocked and when it comes back it gets BLOCK or INLINE-BLOCK!!!

Now that I manually set the inline-flex in all my effects, overriding jquery it worked perfectly! ALL THE SIZES ARE WORKING FINE.

I have no idea how you could be so patient with me but after I think 6 useless threads of me I finally got it with your 100% help! You helped me a lot my friend!

BUT I STRONGLY ADVISE that the documentation should be muuuuch better descriptive. You should say in capital letters at the top "IF YOU WANNA HAVE CONSISTENT SIZES ACCROSS YOUR ELEMENTS YOU MUST USE DISPLAY INLINE-FLEX". This should be said with big highlight...

You see my friend, after problems after problems.... the solution was a simply inline-flex and it solved everything!!!

Thanks anyway and I think that now I will take long time before come here complaining of anything, now that this problem is solved I have lots of work to do fixing this css in a handfull of websites! thanks my dear friend!!