Restricting image inside div and arrange those div inside a div

105
March 28, 2018, at 6:56 PM

I am using Gridster for webpage.The widgets have images on it.These images can be added and deleted with + and X button.

On clicking +, a modal opens and displays images which I retrieve from server dynamically

The modal is the <div1 class="modal-body">.In that I want <div2 class="outerdiv">.

In a single row in div1 there should be an equal number of div2 is what I want.Entire div1 should have div2 which are separated properly from each other and same in number on each row.

Then comes <div3 class="innerdiv"> which will be inside each div2.Thediv3` will contain my image which should fit properly within that div only.

Overall, when I open my modal the images should symmetrically and properly placed from each other

The CSS which I tried

.modal-body {
  width: 100%;
  position: relative;
  text-align:center;
}
.outerdiv {
  height: 90px;
  width: 90px;
  display:inline-block;
  margin: 10px;
}

.innerdiv{
max-height:95%;
max-width:95%;

}

My actual code for server

<div class="modal-body">
            {% for file in brands %}
            {% load static %}
            <div class="outerdiv"><div class="innerdiv"><img src="{% get_static_prefix %}images/brands/{{file}}"></div></div>
            {% endfor %}      
    </div>

My representational image:

<div class="outerdiv"><div class="innerdiv"><img src="https://cdnd.icons8.com/wp-content/uploads/2015/07/Run-Command-100.png"></div></div>

I dont know if what I did is right or not because when I when I do inspect element in browser I see that image is coming out of the div also sometimes the images almost overlap each other

Jquery function which applies preset class to clicked image.I want it to be applied to innverdiv

var parentLI;
$(document).on("click", ".addmorebrands", function() {
                parentLI = $(this).closest('li');
        $('#exampleModalCenter').modal('show');
            $('#exampleModalCenter img').click(function(){
        $(this).addClass('preselect');
        $(this).siblings().removeClass('preselect');
        selectedImageSRC = $(this).attr('src');
      })
    });

Fiddle

Answer 1

Move the preselect class to the innerdiv.

Make some of these css modifications:

img {
  width: 100%;
  height: 100%;
}
.preselect{
  background: lightgreen;
  border: 1px solid black;
}

checkout fiddle

READ ALSO
disable sumbit NOT re-enabling on mobile browers (iOS)

disable sumbit NOT re-enabling on mobile browers (iOS)

I have built a Javascript/jQuery program that disbales the submit button until criteria are metThe user must say yes to two questions, radiobox options

114
Keep kendo grid non-editable but still add rows

Keep kendo grid non-editable but still add rows

Here I want the Grid to work in such way that,I can't edit the value of Student's ID but while Adding ID has to be editableI can use model

121
Refresh my mobile page when someone hits back button or do back swipe

Refresh my mobile page when someone hits back button or do back swipe

This code forwards when hitting back button:

101