This is about the Bulma CSS framework
I'm using Bulma version 0.6.0
My browser is Chrome Version 61.0.3163.100
I believe I've encountered an inconsistency with the way labels are positioned for form elements with the field and has-addons classes. There is no example for form addons in the docs that include a label, but every other example has the <label> inside of the <div class="field"> and the label will be positioned above the form element unless using is-horizontal and field-label. If I follow that convention, the label for the has-addons element is awkwardly positioned to the side of the form element and without any spacing. If I put the <label> before the <div class="field has-addons"> then it displays the way I want it too, but this doesn't seem correct to me.
Here is an example of how the label displays incorrectly, and how it can be made the way I expect by moving the <label> outside of the <div class="field has-addons">: https://jsfiddle.net/sangaman/gr5r0eL6/
I expect it to look like the bottom form element in the fiddle above, with the label above the form element.
I get what looks like the top form element in the fiddle above, with the label to the left of the form element and without any spacing.
I would be happy to take a shot at fixing this myself, if someone can confirm that this is in fact unintended behavior.
That is the intended behaviour. The field has-addons is meant to combine several control elements together. The label is not considered a control.
Consider has-addons as a special case where the label has to be outside.
this should be added to the docs though.
That is the intended behaviour. The
field has-addonsis meant to combine severalcontrolelements together. Thelabelis not considered acontrol.Consider
has-addonsas a special case where the label has to be outside.
I'm sorry but I find this to be an odd choice... unless there's a technical limitation making us go this way?
Most helpful comment
this should be added to the docs though.