Alignment of images with inputs

Question

Alignment of images with inputs

Navigation

#1 by (0 votes)

1

I'm trying to align the input below each image after having uploaded using file reader. Follow the screen print and the codes:

JS:

$(function(){varimagesPreview=function(input,placeToInsertImagePreview){if(input.files){varfilesAmount=input.files.length;for(i=0;i<filesAmount;i++){varreader=newFileReader();reader.onload=function(event){$($.parseHTML('<imgclass="img-galeria  img-thumbnail img-galeria" >')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                    $($.parseHTML('<input class="form-control painel-input-galeria" type="text" name="titulo-img" placeholder="título da imagem">')).appendTo(placeToInsertImagePreview);

                },
                reader.readAsDataURL(input.files[i]);
            }
        }
    };
    $('#imagem').on('change', function() {
        imagesPreview(this, 'div.galeria');
    });

});

HTML

CSS already tried several alternatives and I could not.

javascript css

asked by anonymous 16.06.2017 / 22:51

1 answer

Check if a date is valid or not in C? How to get only one Json value using request.get_data () Flask Python

score 0 · Answer 1

Creates an element around these two and then inside that element uses display: block; or width: 100%; in input and img .

var imagens = [
  'https://madeby.google.com/static/images/google_g_logo.svg',
  'https://upload.wikimedia.org/wikipedia/en/thumb/c/c8/Yahoo_Y.svg/300px-Yahoo_Y.svg.png'
];

var placeToInsertImagePreview = $('.galeria');

imagens.forEach(function(img) {
  var contentor = $('<div class="contentor"/>').appendTo(placeToInsertImagePreview);
  contentor.html('<img class="img-galeria  img-thumbnail img-galeria" src="' + img + '">');
  contentor.append('<input class="form-control painel-input-galeria" type="text" name="titulo-img" placeholder="título da imagem">');
});

.contentor {
  width: 25%;
  display: inline-block;
  margin: 10px;
}

.contentor>* {
  width: 100%;
  display: block;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="galeria"></div>