Buefy: Correct way to group Input/Autocomplete and Switch

[kaeltis]

Overview of the problem

Buefy version: 0.5.3
Vuejs version: 2.4.4
OS/Browser: Linux/Chrome 61.0.3163.100

Description

I'm trying to correctly group an input and an autocomplete with a switch in the same line, however I cant manage to find the correct way to combine those.

Steps to reproduce

                <b-field grouped group-multiline>
                    <b-field expanded>
                        <b-input
                                type="text"
                                v-model="modelData.title"
                                placeholder="Titel"
                                required>
                        </b-input>
                    </b-field>

                    <div class="control is-flex">
                        <b-switch v-model="modelData.priority">Priorität</b-switch>
                    </div>
                </b-field>

Displays like this:

As you can see, the spacing between the Input and the button is not correct.

                <b-field grouped group-multiline>
                    <div class="control is-flex">
                        <b-switch v-model="modelData.approved">Genehmigt</b-switch>
                    </div>

                    <b-field expanded>
                        <b-autocomplete
                                placeholder="Verantwortlich"
                                field="name">
                        </b-autocomplete>
                    </b-field>
                </b-field>

Displays like this:

As you can see, the button is not centered.

Expected behavior

Have correct spacing

Actual behavior

Has wrong spacing

[jtommy]

@Kaeltis You have to remove div wrapper from bSwitch.
For example (first case):

 <b-field grouped group-multiline>
     <b-field expanded>
           <b-input
                  type="text"
                  v-model="modelData.title"
                  placeholder="Titel"
                  required>
            </b-input>
     </b-field>
     <b-switch class="switch-right" v-model="modelData.priority">Priorität</b-switch>
</b-field>

<style>
.switch-right {
    margin-left: 0.75rem;
    margin-bottom: 0.75rem;
}
</style>

For example (second case):

<b-field grouped group-multiline>
     <b-switch class="switch-left" v-model="modelData.approved">Genehmigt</b-switch>
     <b-field expanded>
        <b-autocomplete
             placeholder="Verantwortlich"
             field="name">
        </b-autocomplete>
     </b-field>
</b-field>

<style>
.switch-left {
    margin-left: 0.75rem;
}
</style>

[kaeltis]

Thanks, it's working! However if the b-field shows a validation error, the switch isn't in the correct height anymore.

[jtommy]

@Kaeltis It was an example. You have to play with the styles or show error in an other way.