Bulma CSS - Button in Input field
11,229
Solution 1
http://bulma.io/documentation/form/general/#form-addons
If you want the button on the right but not inside the input,
you can use has-addons
class to "merge" controls (the input and the button here) like this :
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="field has-addons">
<div class="control has-icons-left">
<input type="text" class="input is-info is-large" placeholder="Input number in seconds">
<span class="icon is-medium is-left">
<i class="fa fa-futbol-o"></i>
</span>
</div>
<div class="control">
<a class="button is-info is-large">GO</a>
</div>
</div>
</div>
Solution 2
Here's how to have a search input that takes 100% of the width with a button at the right without any space (basically, answer from user404 and Sébastien mixed together)
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="field has-addons">
<div class="control has-icons-left has-icons-right is-expanded">
<input type="text" class="input is-info is-large" placeholder="Enter words to search">
<span class="icon is-medium is-left">
<i class="fa fa-pencil"></i>
</span>
</div>
<p class="control">
<a class="button is-info is-large">SEARCH</a>
</p>
</div>
Solution 3
https://bulma.io/documentation/form/general/#form-addons
Or you just have to group the filed and the button adding "is-grouped" class in the "field" element.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="field is-grouped">
<div class="control has-icons-left has-icons-right is-expanded">
<input type="text" class="input is-info is-large" placeholder="Input number in seconds">
<span class="icon is-medium is-left">
<i class="fa fa-futbol-o"></i>
</span>
</div>
<p class="control">
<a class="button is-info is-large">GO</a>
</p>
</div>
Author by
Admin
Updated on June 17, 2022Comments
-
Admin almost 2 years
Im using Bulma Framework, how move Button to the same line with input field?, it looks input field is full width
My code:
<div class="container"> <div class="field"> <div class="control has-icons-left has-icons-right"> <input type="text" class="input is-info is-large" placeholder="Input number in seconds"> <span class="icon is-medium is-left"> <i class="fa fa-futbol-o"></i> </span> </div> </div> <a class="button is-info">GO</a>
Result Result image