Bulma: Flexible Widths of field-label and field-body with Horizontal Form Fields

[MannikJ]

This is about Bulma v0.7.1
If it's already there, then help me how to do it, otherwise consider it as a feature request
I am sure this issue is not a duplicate? I hope so

Description

I really like the idea of having build-in (horizontal) form elements, but I think the current implementation is not flexible enough for many use cases. I don't want to exclude that I just missed how it is supposed to be customized, so if it is already possible please tell me how to do it. There are actually two parts of the question, but I think they are related close enough to discuss them in the same issue.

1. Customize Label/Body Ratio

I don't like that the proportion of field-label and field-body is fixed. I would like to be able to change the width ratio of label and body flexibly without using custom css. You can see an example in the first part of the jsfiddle. Adding grow-[factor] classes is just ONE simple example of how you could add a way to customize the width ratio.

2. Consistent Alignment of Multiple Horizontal Fields in one Row

This thing is quite tricky because of the nature of flex container and how flex-grow works, but it is often the case that I start building a simple form with the build-in field and control classes and then realize that I want to have two fields next to each other in one row. In that case the layout breaks, because the width of the flex containers is only half and the content grows less then if the base container covers full width.
Is there a neat way to align the input label and body properly without the need to discard the horizontal field syntax completely? I know I could do it with columns and column, but in this case I would need to replace all horizontal fields to keep the layout consistent.
You can see an example of the problem in the second part of the jsfiddle.

Example

https://jsfiddle.net/9cs1q1L0/

[pre-martin]

I fully agree. Especially item (2) breaks the layout of the labels and controls. If you escape to columns and column, you don't get nicely aligned labels when the display size is shrinking.

[mila76]

I fixed the 2 with this... right now i need simple inline form like this:

<div class"field form-inline">
<label>Label</label><input type="text">
<label>Label</label><input type="text">
</div>

(i dont think work with help or other things)

.form-inline .input,
.form-inline .select {
    display: inline-block;
    vertical-align: middle;
    width: auto;
}
.form-inline .label { display: inline-flex; }

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.