Normally in bulma.css if you add multiple 'fields' to a 'field-body' these fields become equally spaced on the same line (see the first name and last name fields in my example). If you add a select field, by default this field is narrow but the documentation says you can make it fullwidth with "is-fullwidth". This does not result in equal spacing of the 2 fields however, it becomes something like 60-40%. Why is this happening? I'd like the spacing of the select field to behave as the other fields.
(Run the snippet on full page width to see the problem)
<script src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet"/>
<div class="column is-half-widescreen">
<div class="box">
<form action="." method="post">
<div class="field">
<label class="label">Name</label>
<div class="field-body">
<div class="field">
<p class="control has-icons-left is-expanded">
<input class="input" type="text" placeholder="First Name">
<span class="icon is-small"><i class="fa fa-user"></i></span>
</p>
</div>
<div class="field">
<p class="control has-icons-left is-expanded">
<input class="input" type="text" placeholder="Last Name">
<span class="icon is-small"><i class="fa fa-user"></i></span>
</p>
</div>
</div>
</div>
<div class="field">
<label class="label">Company</label>
<div class="field-body">
<div class="field">
<p class="control has-icons-left is-expanded">
<input class="input" type="text" placeholder="Company">
<span class="icon is-small"><i class="far fa-building"></i></span>
</p>
</div>
<div class="field">
<p class="control has-icons-left is-expanded">
<span class="select">
<select>
<option>dropdown</option>
<option>options 1</option>
</select>
</span>
<span class="icon is-small is-left"><i class="far fa-building"></i></span>
</p>
</div>
</div>
</div>
<div class="field">
<label class="label">Company</label>
<div class="field-body">
<div class="field">
<p class="control has-icons-left is-expanded">
<input class="input" type="text" placeholder="Company">
<span class="icon is-small"><i class="far fa-building"></i></span>
</p>
</div>
<div class="field">
<p class="control has-icons-left is-expanded">
<span class="select is-fullwidth">
<select>
<option>dropdown</option>
<option>options 1</option>
</select>
</span>
<span class="icon is-small is-left"><i class="far fa-building"></i></span>
</p>
</div>
</div>
</div>
</form>
</div>
</div>
Make these changes
1. Add class <span class="select is-fullwidth">
2. Add following css
@media screen and (min-width: 769px), print
.field-body > .field:not(.is-narrow) {box-flex: 1; flex-grow: 1;}
.field-body>.field{ flex:1;}
}
3. If icons alignment not corrected than use this code
.control.has-icons-left .icon{ left:0 !important;}