Автоматическое изменение размера контейнера, если внутренние элементы слишком малы

Question

Автоматическое изменение размера контейнера, если внутренние элементы слишком малы

0

У меня есть контейнер, который является повторно значимым и содержит внутренние элементы <div>, которые могут быть размещены в любом порядке, и я могу добавить их в контейнер любой суммы, когда количество их растет, становится меньше. Моя цель заключается в том, когда внутренние height или width 100px, становится меньше, чем 100px затем автоматически 100px контейнер.

Может быть более одного элемента меньше 100 100px. При изменении размеров контейнера все элементы становятся больше в зависимости от процента их width.

Проблема: когда имеется более одного небольшого элемента, они отправляют много событий в контейнер, я хочу отправить один запрос в контейнер, чтобы изменить размер, если есть вероятность, что этого достаточно, чтобы сделать весь элемент достаточным размером.

Я пытался watch ширину, но она посылает на многие запросы.

             scope.$watch(function () {
                return element.width();
            }, function (oldval, newval) {
                clearTimeout(containerCtrl.resizedFinished);
                containerCtrl.resizedFinished = setTimeout(function () {
                    console.log("New Value=" + newval);
                    if (newval < 100)
                        scope.resizeContainer(element.width());
                }, 100);
            });

Может быть, кто-то может дать мне какие-нибудь предложения? Я использую Angular, jquery base module, js.

Edgar 29 сен. 2015, в 20:56

Источник

Теги:

javascript

jquery

html

angularjs

css

1 ответ

Ещё вопросы

wintvelt · Answer 1 · 2015-09-29T17-25-00.000Z

Я думаю, вы пытаетесь достичь:

перетаскиваемые компоненты должны быть не менее 100 пикселей
когда вы перетаскиваете компонент в контейнер, все компоненты должны сжиматься, чтобы они помещались внутри контейнера
когда компоненты не могут быть меньше, контейнер должен расти (с 100px для каждого добавленного компонента)

Похоже, вы можете получить стиль, сделанный с помощью flexbox в css:

.container {
    display: inline-flex;
    flex-direction: row;
    padding: 2px;
    min-width: 500px;
    height: 120px;
    background-color: yellow;
}
.component {
    background-color: grey;
    flex: 0 1 200px;
    min-width: 100px;
    height: 50px;
    margin: 2px;
}

Таким образом, вам не нужно наблюдать за компонентами через jQuery. Если компоненты также должны иметь переменную высоту, а контейнер может иметь несколько строк, все становится сложнее. Тогда вам нужно быть более конкретными в отношении ограничений.

EDIT: Если вы не можете использовать flexbox для IE9, попробуйте:

добавить прослушиватель событий к компоненту, отбрасываемому внутри контейнера (не при изменении размера отдельных компонентов)
проверьте (прочитайте из DOM), сколько компонентов находится в контейнере
if (ширина контейнера - (ширина компонента * старое количество компонентов)) <100
то сокращение не допускается, поэтому расширьте контейнер
еще
петля над каждым компонентом, чтобы сжать их

Вы правы в том, что я хочу сделать. не пробовал ваше решение, я не могу использовать flex layout, потому что нужна совместимость с IE9.