1

I have a search input and then an html table like this:

<form action="/providers/search" method="get">
    <div class="field has-addons">
        <div class="control">
            <input class="input" name="q" type="text" placeholder="Search for every columns">
        </div>
        <div class="control">
            <button type="submit" class="button is-primary">Search</button>
        </div>
    </div>
</form>

<table class="table is-bordered is-striped is-narrow is-fullwidth" >
    <thead> 
        <tr>        
            <th>Name</th>
            <th>Website</th>
            <th>Login</th>
            <th>Password</th>
            <th>Email</th>
            <th>Description</th>
            <th></th>       
        </tr>   
    </thead>
    ...
</table>

the problem is the search input is stack directly on the html table, i think the .field class doesn't create the margin between input and table.

here is what i'm getting:

enter image description here

is there something wrong?

YouneL
  • 8,152
  • 2
  • 28
  • 50

1 Answers1

0

Are you perhaps using float on the elements inside the form? That could be the reason why the form/container element isn't having the correct height.

  • Quickfix is using overflow: hidden on the form/container element.
  • Cleaner fix is using clearfix see What is a clearfix?
  • Other option is to use flexbox instead of float elements depending on your which browser you need to support.

If I'm going to the wrong direction please provide the CSS you use.

Nick Van Loocke
  • 488
  • 2
  • 12
  • I'm using bulma css framework, here is the link http://bulma.io/. I realized when I remove the form tag it works perfectly. – YouneL Aug 10 '17 at 09:38
  • Ok I've checked the SASS from bulma. I can see this code: .field:not(:last-child) { margin-bottom: 0.75rem; } so in your example it is the last child and so you don't have a margin-bottom on it. Also I can't find any margin on the form element. Could it be there isn't just any margin-bottom there? Also if possible do you have perhaps an url where we can test this example of yours? – Nick Van Loocke Aug 10 '17 at 09:55