Bulma CSS - Button in Input field

Tindecken picture Tindecken · Aug 25, 2017 · Viewed 9.5k times · Source

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

Answer

user404 picture user404 · Aug 25, 2017

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>