Hello everyone, the problem is as follows:
1) 900px parent block, the children contain pictures, at this stage the height of the parent block became 900px .
2) After loading the pictures, the child blocks are aligned in a special way using jquery-ui.position () . The child elements lay as it should, tightly, but the height of the parent unit is still 900px , although the child elements take 2 times less space.
3) I came to the conclusion that this is due to the fact that the children, after alignment with jquery-ui.position (), get the properties left and top . If you remove disable positioning, then the parent resizes as needed.
How to make the height of the block rubber in relation to the content, if the child blocks are built using the properties of left / top ?
<div class='content'> <div class='item'></div> <div class='item'></div> <div class='item'></div> <div class='item'></div> </div> Styles:
.content{ overflow: hidden; width: 100%; position:relative; display: block; height: auto; padding: 0; } .item{ position: relative; display: inline-block; } Code:
SFW.prototype._fillCollection = function(way){ var _this = this; /*ΡΠΎΡ ΡΠ°ΠΌΡΠΉ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ ΡΠ΅ΡΠ°ΠΉΠ·ΠΈΡΡΡ*/ var content = $('<div class="content"></div>') .appendTo(this.viewBlock) .data('count', 0); var items = this._data[way.firstLevel].items[way.secondLevel].items; var elements = []; /*Π΄Π΅ΡΠΈ*/ for(var k = 0; k < items.length; k+=1) { var wrapItem = $('<div class="item"></div>') .appendTo(content) .data('data', items[k]); var item = $("<img>") .data('data', items[k]) .attr("src", items[k].PICTURE_FACE) .appendTo(wrapItem) .load(function(){ _this._waitAllImg(content); }); elements.push(wrapItem); } content.data('elements', elements); }; /*ΠΆΠ΄ΡΠΌ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ*/ SFW.prototype._waitAllImg = function(content){ content.data('count', content.data('count') + 1); if(content.data('count') === content.data('elements').length){ this._regularizeImg(content); } }; /*ΡΠΏΠΎΡΡΠ΄ΠΎΡΠΈΠ²Π°Π½ΠΈΠ΅ Π΄Π΅ΡΠ΅ΠΉ*/ SFW.prototype._regularizeImg = function(content){ var elements = content.data('elements'); for(var i = 0; i < elements.length; i +=1){ var of, my, at, elem, data; elem = elements[i]; data = elem.data('data'); of = data.of; my = data.my; at = data.at; /*ΠΡΠ»ΠΈ Π·Π°ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΡΠΎΡΠΊΡ Π½ΠΈΠΆΠ΅,ΡΠΎ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ Π½Π΅ ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π½Π°Π΄ΠΎ, Π·Π°ΡΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΠΎΠ΄ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅*/ elements[i].position({my: my, at: at, of: of}); } }; PS I need this in order for my parents to line up one after another, in a list, and it turns out that at the end of each new parent there is an empty space.
