0

Quiero hacer que el botón de la imagen del clip se coloque a un lado de la caja de texto cuando se visualice en una pantalla chica

tengo este codigo css:

<style>
.adjuntar
{
    width: 34px;
    height: 27px;
    background-image: url(../img/adjuntar.png);
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-size: 30px 20px;
    background-color: transparent;
}

.boton
{
    left: 36%;
    top: 25%;
    position: fixed;
}

@media only screen and (max-width: 480px){
    .boton
    {
     left: 500%;
     top: 80%;
     position: fixed;
    }   
}
</style> 

Tengo este codigo html:

<form class="form-inline" id="form-registro">            
  <div class="form-group" style="width: 45%;">
   <label style="margin-right: 4px;">Parcial:</label>
   <input type="text" class="form-control" name="parcialVal" id="parcialVal">
  </div>
  <input type="button" id="boton" class="btn adjuntar boton" data-toggle="modal" data-target="#modal-archivos" disabled>
</form>

El problema es que cuando hago la pantalla chica no se mueve ese botón (el de la imagen del clip) y cuando la pantalla esta grande si se acomoda bien, ¿cual es el problema?

Asi se ve ahorita en pantalla chica y el botón del clip esta mal acomodado

introducir la descripción de la imagen aquí

1 respuesta 1

0

Primer paso: Agrega la siguiente propiedad a la clase form-group.

.form-group {
   display:flex;
}

Segundo Paso: Incluye el botón dentro del DIV form-group.

<div class="form-group" style="width: 45%;">
   <label style="margin-right: 4px;">Parcial:</label>
   <input type="text" class="form-control" name="parcialVal" id="parcialVal">
   <input type="button" id="boton" class="btn adjuntar boton" data-toggle="modal" data-target="#modal-archivos" disabled>
</div>

Tercer Paso: Elimina o comenta la posición fija que tiene la clase boton.

/* position: fixed; */
3
  • no funciona como me lo estas diciendo
    – user77138
    Commented el 14 jun. 2018 a las 18:40
  • Asegúrate de comentar todos los position: fixed Commented el 14 jun. 2018 a las 18:46
  • Ya comente todos los position: fixed y nada ahora el botón lo pone debajo de la caja de texto y lo que quiero es que lo ponga a un lado de la caja de texto
    – user77138
    Commented el 14 jun. 2018 a las 18:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.