To make html elements closer to each other

Question

I have this long form for users with several html elements. I used Materialize framework for it. Here's the collpsible link.

The form is getting too long.

How to remove some space between elements and make it all narrower so I don't need to scroll down?

I didn't find it in framework options.

Here's the html code for the elements:

<div class="container">

  <div class="row">
    <div class="input-field col s12">
      <i class="material-icons prefix">add</i>
      <input id="stat" type="text" class="validate">
      <label for="stat">Добавить новую статистику</label>
    </div>
  </div>

  <div class="row">
    <div class="input-field col s12">
      <i class="material-icons prefix">assignment</i>
      <input id="des" type="text" class="validate">
      <label for="des">Добавить описание статистики</label>
    </div>
  </div>

  <div class="row">
    <div class="input-field col s1">
      <i class="material-icons prefix">trending_down</i>
    </div>
    <div class="input-field col s8">
      <h6>
        Добавить минимальное значение
      </h6>
    </div>
    <div class="input-field col s3">
      <input id="des" type="text" class="validate">
    </div>
  </div>

  <div class="row">
    <div class="input-field col s1">
      <i class="material-icons prefix">trending_up</i>
    </div>
    <div class="input-field col s8">
      <h6>
        Добавить максимальное значение
      </h6>
    </div>
    <div class="input-field col s3">
      <input id="des" type="text" class="validate">
    </div>
  </div>

  <a class="waves-effect waves-light btn-small #039be5 light-blue darken-1" id="btn"><i class="material-icons right">send</i>Добавить</a>
  <p> </p>
  <ul class="collapsible">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>Добавить данные в статистики:</div>
      <div class="collapsible-body">
        <span>
      
   <div class="row">   
   <div class="input-field col s1">
   <p>
  <i class="material-icons prefix">wb_sunny</i>
  </p>
   </div>   
   <div class="input-field col s7">  
  <select class="icons browser-default" id="weeksSel2" onChange ="getWeekText2();">  
  <option value="" disabled selected>Выберите неделю</option>
  </select>
  </div> 
  </div>          
      
    </span>
      </div>
    </li>
  </ul>

</div>
<!-- end of container -->

I recommend reducing/removing padding and margins with in line style. If your inline styles are being overwritten then try adding !important to your styles so they don't get over written. — M4rk, Jun 23 '19 at 21:01
That's margin and padding issue. Before you using "!important" ensure that your overriding styles are included after the framework styles... you would not need !important as css works with _last in, first out_ — Mosia Thabo, Jun 23 '19 at 21:08
Guys, thanks. How to override framework styles, what you usually do for that? — kiki, Jun 23 '19 at 21:27

score 1 · Answer 1 · answered Jun 23 '19 at 20:58

I'm not very much hands on the materializecss, but I found the same problem somebody is facing, have a look this might can help you out.

As per below link you need to consolidate all the col element in the single row.

Spacing Between Rows with Materialize CSS

score 1 · Answer 2 · answered Jun 24 '19 at 01:03

You might want to remove margin-bottom from .row.

<div class="row">

Add another class to your div with class row, say custom-row

<div class="row custom-row">

and add style:

.custom-row {
  margin-bottom: 0 !important; /*this will override margin-bottom:10px from '.row'
}

This will keep all the styles from .row but override the margin-bottom

Hope it helps!

To make html elements closer to each other

2 Answers2