Problem lining up select with 2 buttons

Navigation
0

I need to align a select with 2 buttons, I'm using bootsrap4 for it. 

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<form method="post">
  <input type="hidden" name="csrfmiddlewaretoken"
         value="W4MYtpavrwZOYBEQk8PhizBun6vfIFgFNAK7EqbEqGaaxMUNkxP4R3V1ZVIrwxcO">
  <fieldset>
    <legend class="m-b-15">Datos del solicitante</legend>
    <div class="row">
      <div class="col-8">
        <div class="input-group">
          <div id="div_id_solicitante" class="form-group">
            <label for="id_solicitante" class="col-form-label  requiredField">
              Solicitante<span class="asteriskField">*</span>
            </label>
            <div class="">
              <select name="solicitante" class="select form-control" required="" id="id_solicitante">
                <option value="" selected="">---------</option>
                <option value="3">11111111-1 - Facultad de química</option>
                <option value="1">22222222-2 - Clientes de prueba</option>
              </select>
            </div>
          </div>
          <span class="input-group-btn">
                  <button type="button" class="btn btn-sm btn-warning">Editar</button>
                  <button type="button" class="btn btn-sm btn-success">Agregar</button>
          </span>
        </div>
      </div>
    </div>
  </fieldset>
  <fieldset>
    <legend class="m-b-15">Datos del agricultor</legend>
    <div class="row">
      <div class="col-6">
        <div id="div_id_agricultor" class="form-group">
          <label for="id_agricultor" class="col-form-label  requiredField">
            Agricultor<span class="asteriskField">*</span>
          </label>
          <div class="">
            <select name="agricultor" class="select form-control" required="" id="id_agricultor">
              <option value="" selected="">---------</option>
              <option value="3">11111111-1 - Facultad de química</option>
              <option value="1">22222222-2 - Clientes de prueba</option>
            </select>
          </div>
        </div>
        <div id="div_id_tipo_cargo" class="form-group">
          <label for="id_tipo_cargo" class="col-form-label  requiredField">
            Tipo de cargo<span class="asteriskField">*</span>
          </label>
          <div class="">
            <select name="tipo_cargo" class="select form-control" required="" id="id_tipo_cargo">
              <option value="" selected="">---------</option>
              <option value="BO">Boleta</option>
              <option value="FA">Factura</option>
              <option value="CI">Cobro Interno</option>
              <option value="SC">Sin Cobro</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <button type="submit" class="btn btn-success">Guardar</button>
</form>
</div>

This is the link to jsfiddle

    
asked by Marcelo 19.12.2018 в 19:08
source

1 answer

0

You must put the <label> of the title of <select> out:

The .form-group is for an element with or without its title, but not those two at the same time. If you add elements with a title and other elements without a title, you can give appearance problems.

Link to the example how they are used. 

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<form method="post">
  <input type="hidden" name="csrfmiddlewaretoken"
         value="W4MYtpavrwZOYBEQk8PhizBun6vfIFgFNAK7EqbEqGaaxMUNkxP4R3V1ZVIrwxcO">
  <fieldset>
    <legend class="m-b-15">Datos del solicitante</legend>
    <div class="row">
      <div class="col-xs-12">
        <label for="id_solicitante" class="col-form-label col-xs-12"  requiredField">
            Solicitante<span class="asteriskField">*</span>
        </label>
        <div class="input-group">
          <div id="div_id_solicitante" class="form-group">   
            <div class="">
              <select name="solicitante" class="select form-control" required="" id="id_solicitante">
                <option value="" selected="">---------</option>
                <option value="3">11111111-1 - Facultad de química</option>
                <option value="1">22222222-2 - Clientes de prueba</option>
              </select>
            </div>
          </div>
          <span class="input-group-btn">
                  <button type="button" class="btn btn-sm btn-warning">Editar</button>
                  <button type="button" class="btn btn-sm btn-success">Agregar</button>
          </span>
        </div>
      </div>
    </div>
  </fieldset>
  <fieldset>
    <legend class="m-b-15">Datos del agricultor</legend>
    <div class="row">
      <div class="col-6">
        <div id="div_id_agricultor" class="form-group">
          <label for="id_agricultor" class="col-form-label  requiredField">
            Agricultor<span class="asteriskField">*</span>
          </label>
          <div class="">
            <select name="agricultor" class="select form-control" required="" id="id_agricultor">
              <option value="" selected="">---------</option>
              <option value="3">11111111-1 - Facultad de química</option>
              <option value="1">22222222-2 - Clientes de prueba</option>
            </select>
          </div>
        </div>
        <div id="div_id_tipo_cargo" class="form-group">
          <label for="id_tipo_cargo" class="col-form-label  requiredField">
            Tipo de cargo<span class="asteriskField">*</span>
          </label>
          <div class="">
            <select name="tipo_cargo" class="select form-control" required="" id="id_tipo_cargo">
              <option value="" selected="">---------</option>
              <option value="BO">Boleta</option>
              <option value="FA">Factura</option>
              <option value="CI">Cobro Interno</option>
              <option value="SC">Sin Cobro</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <button type="submit" class="btn btn-success">Guardar</button>
</form>
</div>
    
answered by 19.12.2018 / 19:20
source
change column name when exporting datagridview to excel in c # Vb6.0 Open an array of Images