Bulma: Label improperly positioned for "field has-addons" ?

Created on 12 Oct 2017  路  4Comments  路  Source: jgthms/bulma

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version 0.6.0
My browser is Chrome Version 61.0.3163.100

Description

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.

Steps to Reproduce

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/

Expected behavior

I expect it to look like the bottom form element in the fiddle above, with the label above the form element.

Actual behavior

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.

Most helpful comment

this should be added to the docs though.

All 4 comments

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

I'm sorry but I find this to be an odd choice... unless there's a technical limitation making us go this way?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

leofontes picture leofontes  路  3Comments

Qard picture Qard  路  3Comments

jaredreich picture jaredreich  路  3Comments

swamikevala picture swamikevala  路  3Comments

bigZ-again picture bigZ-again  路  3Comments