CODEWITHSUNDEEP
cssangularjs
sova
sova

Reputation: 5650

repeated divs loaded by angular could have different contents, how can I make them have automatically adjusted heights?

My nodejs/angularjs application auto-loads via the angular_controller and mongodb a bunch of divs.

HTML:

<div class="sunti_contain" ng-repeat="sunti in suntis track by $index">
                <div class="individual_sunti">
                    <!--needs a unique div#id via angularz-->
                    <div class="sunti_content">{{sunti.content || 'content loading...'}}</div>
                    <div class="sunti_tags">{{sunti.tags || 'tags'}}</div>
                    <div class="sunti_author">{{sunti.author || 'author-placeholder'}}</div>
                    <div class="sunti_shortid">{{sunti.shortid}}</div>
                </div>
            </div>

I have them all sharing the same class:

.individual_sunti {
    position: relative;
    margin-top: 1em;
    margin-bottom: 1em;
    border: 0.05em solid orange;
    width: 30em;
    left: 50%;
    margin-left: -15em;
    min-height: 3em;
    height: auto
    display: block;
    background-color: hsla(360, 100%, 100%, 0.95);
}

.sunti_contain {
    width: 100%;
    display: block;
}

.sunti_content {
    height: auto;
    overflow: auto;

}


.sunti_tags {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: hsla(100, 100%, 50%, 0.5);
}

.sunti_author {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: hsla(130, 100%, 50%, 0.5);
}

.sunti_shortid {
    position: absolute;
    display: block;
    bottom: 1em;
    right: 0;
}

and Angular populates them with the model binding like so, when someone posts one using a form on the page:

$scope.submit_sunti = function() {
    socket.emit('post_new_sunti', {
        content: $scope.sunti.content,
        tags: $scope.sunti.tags,
        ancestor: $scope.sunti.ancestor
    })
    $scope.sunti.content = ""
    $scope.sunti.tags = ""
    $scope.sunti.ancestor = ""
}

Basically, they all end up having the same height no matter what. Someone suggested flexbox, I'm not familiar with it enough yet to make sense of how it would work here. Angular populates the HTML with the line

ng-repeat="sunti in suntis" with the optional track by $index in case two have the same exact contents (unlikely but possible)

.sunti_content

grows because it clearly contains the text, but does this mean I need unique div ids (like in my html-comment-to-myslf-above) to make certain that every generated sunti div is its own proper height?

How can I have the angular-populated-divs scale to fit their content? Is it possible to "fix it" via CSS alone?

Thanks

Upvotes: 1

Views: 35

Answers (1)

Joey Wood
Joey Wood

Reputation: 273

You hard code the height to be

height: 12em

This means your divs won't automatically size and will just default to that height

Upvotes: 1

Related Questions