How to remove the spaces between divs and inputs?

Question

How to remove the spaces between divs and inputs?

Navigation

#1 by (0 votes)

0

I have the following problem, I can not eliminate the spaces I have between two divs and inputs

I am using bootstrap the code for inputs is as follows:

<input class="form-control form-control-sm col-sm-2 col-2 col-md-1 m-0" title="pendiente">

The intention is to make these inputs look like a table

 <div class="container-with-scroll-horizontal square-corners no-shadow" id="tablePresupuestos">
    <div class="row-with-scroll-horizontal">
        <div class="col-3 p-1">Desarrollo / Ubicación</div>
        <div class="col-3 p-1">Insumos</div>
        <div class="col-sm-8 col-8 col-md-4 p-1">Enero</div>
        <div class="row-with-scroll-horizontal">
            <div class="col-sm-2 col-2 col-md-1 p-1">Sem - 1</div>
            <div class="col-sm-2 col-2 col-md-1 p-1">Sem - 2</div>
            <div class="col-sm-2 col-2 col-md-1 p-1">Sem - 3</div>
            <div class="col-sm-2 col-2 col-md-1 p-1">Sem - 4</div>
        </div>
    </div>
    <div class="row-with-scroll-horizontal">
        <div class="autocomplete p-0 col-3" style="display: block;">
            <input class="form-control form-control-sm name-development" title="Desarrollo o ubicación">
            <div id="autocomplete-items1" class="autocomplete-items autocomple-items-1"></div>
        </div>
        <div class="autocomplete col-3 p-0">
            <input class="form-control form-control-sm name-insumos" id="myInput" title="nombre de los insumos">
            <div id="autocomplete-items2" class="autocomplete-items"></div>
        </div>
        <input class="form-control form-control-sm col-sm-2 col-2 col-md-1 m-0" title="pendiente">
        <input class="form-control form-control-sm col-sm-2 col-2 col-md-1 m-0" title="pendiente">
        <input class="form-control form-control-sm col-sm-2 col-2 col-md-1 m-0" title="pendiente">
        <input class="form-control form-control-sm col-sm-2 col-2 col-md-1 m-0" title="pendiente">
    </div>
    <div id="finTabla"></div><br><br><br><br><br><br></div>
</div>

This the css

 .square-corners input{
    border-radius: 0!important;
    }

.no-shadow input:focus {
    box-shadow: none;
}

.container-with-scroll-horizontal {
    overflow-x: auto;
    white-space: nowrap;
}

.row-with-scroll-horizontal > * {
    display: inline-block!important;
    float: none;
}

The problem is that of the following route link

css bootstrap

asked by Epifanio Pérez Ramírez 05.12.2018 в 19:39

source

1 answer

LARAVEL Multitouch auth recognition to access Home IMPLEMENT AJAX IN ARCHITECTURE MVC php

score 0 · Accepted Answer

It could help you something like this:

input {
  display: block !important; 
  padding: 0 !important; 
  margin: 0 !important;  
  width: 100% !important; 
  border-radius: 0 !important; 
  line-height: 1 !important;
}

td {
  margin: 0 !important; 
  padding: 0 !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container mt-3">
  <table style="border:none;">
    <thead>
      <tr>
        <th>Desarrollo / Ubicación</th>
        <th>Insumos</th>
        <th>Enero</th>
        <th>Sem - 1</th>
        <th>Sem - 2</th>
        <th>Sem - 3</th>
        <th>Sem - 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" class="form-control" /></td>
        <td><input type="text" class="form-control" /></td>
        <td><input type="text" class="form-control" /></td>
        <td><input type="text" class="form-control" /></td>
        <td><input type="text" class="form-control" /></td>
        <td><input type="text" class="form-control" /></td>
        <td><input type="text" class="form-control" /></td>
      </tr>
    </tbody>
  </table>
</div>

Although, I had to add other styles, it is a bit closer to what you might need.

You tell us