jhon.smith
Reputation: 2043
huge gap between two forms in bulma
I have a Bulma CSS form and i want to eliminate the gap between two forms. Is there a way that this Bulma css can be modified possibly without adding custom css.
<section class="section">
<div class="container">
<form class="control">
<div class="columns is-multiline">
<div class="column is-2">
<div class="box">
<h1 class="subtitle">Form Part 1</h1>
<div class="field">
<label class="label">col1</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col1">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
<div class="field">
<label class="label">col2</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col2 ">
<i class="fas fa-percentage"></i>
</div>
</div>
<div class="field">
<label class="label">col3</label>
<div class="control">
<div class="select is-fullwidth">
<select>
<option>drop1</option>
<option>drop2</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="label">col3</label>
<div class="control">
<div class="select is-fullwidth">
<select>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</div>
</div>
</div>
<a class="button is-primary">Next</a>
</div>
</div>
<div class="column is-10">
<div class="box">
<h1 class="subtitle">form2</h1>
<div class="columns ">
<div class="column is-2">
<div class="field">
<label class="label">col1</label>
<div class="control">
<input class="input" type="text" placeholder="col1">
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col2</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col2">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col3</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col3">
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col4</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col4">
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col5</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col5">
</div>
</div>
</div>
</div>
<a class="button is-primary">Next</a>
</div>
</div>
<div class="column is-10 is-offset-2">
<div class="box">
<h1 class="subtitle">form3</h1>
<div class="columns">
<div class="column is-3">
<div class="field">
<label class="label">col1</label>
<div class="control">
<input class="input" type="text" placeholder="col1">
</div>
</div>
</div>
<div class="column is-1">
<div class="field">
<label class="label">col2 </label>
<div class="control">
<input class="input" type="text" placeholder="col2">
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col3 </label>
<div class="control">
<input class="input" type="text" placeholder="col3">
</div>
</div>
</div>
</div>
<a class="button is-primary">Next</a>
</div>
</div>
</div>
</form>
</div>
</section>
When you post this code on https://codepen.io/JMSmith/pen/yZKxOp
you will notice there is huge gap between Form2 and Form3.
My question is how do i eliminate this gap ?
I am new to Bulma and a novice at css still.
Upvotes: 0
Views: 876
Answers (2)
Dan Oswalt
Reputation: 2189
Take a look at my pen. 2 changes: The main issue was to wrap the second and third forms all in one column, so the left side is its own column, and then the right side contains the other two forms.
Then you need to remove the offset-2 class from in the col-is-10 above form3, since this whole right column is only 10 wide.
https://codepen.io/DanOswalt/pen/qgoMNv?editors=1000
<section class="section">
<div class="container">
<form class="control">
<div class="columns is-multiline">
<div class="column is-2">
<div class="box">
<h1 class="subtitle">Form Part 1</h1>
<div class="field">
<label class="label">col1</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col1">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
<div class="field">
<label class="label">col2</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col2 ">
<i class="fas fa-percentage"></i>
</div>
</div>
<div class="field">
<label class="label">col3</label>
<div class="control">
<div class="select is-fullwidth">
<select>
<option>drop1</option>
<option>drop2</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="label">col3</label>
<div class="control">
<div class="select is-fullwidth">
<select>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</div>
</div>
</div>
<a class="button is-primary">Next</a>
</div>
</div>
<div class="column is-10">
<div class="box">
<h1 class="subtitle">form2</h1>
<div class="columns ">
<div class="column is-2">
<div class="field">
<label class="label">col1</label>
<div class="control">
<input class="input" type="text" placeholder="col1">
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col2</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col2">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col3</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col3">
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col4</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col4">
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col5</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col5">
</div>
</div>
</div>
</div>
<a class="button is-primary">Next</a>
</div>
<div class="column is-10">
<div class="box">
<h1 class="subtitle">form3</h1>
<div class="columns">
<div class="column is-3">
<div class="field">
<label class="label">col1</label>
<div class="control">
<input class="input" type="text" placeholder="col1">
</div>
</div>
</div>
<div class="column is-1">
<div class="field">
<label class="label">col2 </label>
<div class="control">
<input class="input" type="text" placeholder="col2">
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col3 </label>
<div class="control">
<input class="input" type="text" placeholder="col3">
</div>
</div>
</div>
</div>
<a class="button is-primary">Next</a>
</div>
</div>
</div>
</form>
</div>
</div>
</section>
Upvotes: 1
user11043051
Reputation:
you can delete the in line 96 then delete is-offset-2 in line 97 which will be the below code i helped to modify.
Hope it helps you.
<section class="section">
<div class="container">
<form class="control">
<div class="columns is-multiline">
<div class="column is-2">
<div class="box">
<h1 class="subtitle">Form Part 1</h1>
<div class="field">
<label class="label">col1</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col1">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
<div class="field">
<label class="label">col2</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col2 ">
<i class="fas fa-percentage"></i>
</div>
</div>
<div class="field">
<label class="label">col3</label>
<div class="control">
<div class="select is-fullwidth">
<select>
<option>drop1</option>
<option>drop2</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="label">col3</label>
<div class="control">
<div class="select is-fullwidth">
<select>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</div>
</div>
</div>
<a class="button is-primary">Next</a>
</div>
</div>
<div class="column is-10">
<div class="box">
<h1 class="subtitle">form2</h1>
<div class="columns ">
<div class="column is-2">
<div class="field">
<label class="label">col1</label>
<div class="control">
<input class="input" type="text" placeholder="col1">
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col2</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col2">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col3</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col3">
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col4</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col4">
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col5</label>
<div class="control has-icons-right">
<input class="input" type="text" placeholder="col5">
</div>
</div>
</div>
</div>
<a class="button is-primary">Next</a>
</div>
<div class="column is-10 is-offset-2">
<div class="box">
<h1 class="subtitle">form3</h1>
<div class="columns">
<div class="column is-3">
<div class="field">
<label class="label">col1</label>
<div class="control">
<input class="input" type="text" placeholder="col1">
</div>
</div>
</div>
<div class="column is-1">
<div class="field">
<label class="label">col2 </label>
<div class="control">
<input class="input" type="text" placeholder="col2">
</div>
</div>
</div>
<div class="column is-2">
<div class="field">
<label class="label">col3 </label>
<div class="control">
<input class="input" type="text" placeholder="col3">
</div>
</div>
</div>
</div>
<a class="button is-primary">Next</a>
</div>
</div>
</div>
</form>
</div>
</section>
Upvotes: 0
Related Questions
- Bulma modal spacing on mobile
- Why is the Bulma left margin (padding ) not displaying correctly
- how to align text in two columns in bulma?
- What's the best way to put two inputs side by side in a form using Bulma CSS?
- Bulma overlapping items
- Make column fill vertical space in Bulma?
- How to change gap between columns in bulma?
- Bulma select field unequal spacing
- bulma: horizontal form controls not expanded correctly
- Bulma form control width inhibited when wrapped in form tag