All geek questions in one place

How to set the initial height of N children to parent max-height jQuery or CSS (preferred)?

I have dynamically added divs ( .class-row-notification) to another div ( ). Now I want to set the first 5 the divs height to your parent (including , , , etc.) ..). .class-append-con
max-heightmarginpaddingbottom-border

UPDATE

Adding the first five div class ( .class-row-notification) ( children div ) == class ( ) ( parent div ) max-height .class-append-con

How to do it? If through CSS it should be a cross browser.
I tried it through jQuery, but every time it gives me the same for height as 11px div.class-row-notification

EDIT : -
I deleted the commented code from the fragment and tried again, it works here , but not in my project, why ?

I have the following html -

var notificationData = '[{"notificationObjectId":null,"notificationId":null,"notifierId":null,"actorId":null,"entityId":null,"entityTypeId":null,"notifierName":null,"actorName":null,"message":"<b>Shantaram : </b> Hello World !!!","notificationLink":"#","createdOn":1512640448139},{"notificationObjectId":null,"notificationId":null,"notifierId":null,"actorId":null,"entityId":null,"entityTypeId":null,"notifierName":null,"actorName":null,"message":"<b>Spring : </b>How are you, <b>Shantaram</b> ? !!!","notificationLink":"#","createdOn":1512640449140},{"notificationObjectId":null,"notificationId":null,"notifierId":null,"actorId":null,"entityId":null,"entityTypeId":null,"notifierName":null,"actorName":null,"message":"<b>Suyog : </b> Hello World !!!","notificationLink":"#","createdOn":1512640449140},{"notificationObjectId":null,"notificationId":null,"notifierId":null,"actorId":null,"entityId":null,"entityTypeId":null,"notifierName":null,"actorName":null,"message":"<b>Balasaheb : </b> Hello World !!!","notificationLink":"#","createdOn":1512640449140},{"notificationObjectId":null,"notificationId":null,"notifierId":null,"actorId":null,"entityId":null,"entityTypeId":null,"notifierName":null,"actorName":null,"message":"<b>Ravi : </b> Hello World !!!","notificationLink":"#","createdOn":1512640449140},{"notificationObjectId":null,"notificationId":null,"notifierId":null,"actorId":null,"entityId":null,"entityTypeId":null,"notifierName":null,"actorName":null,"message":"<b>Nilesh : </b> Hello World !!! Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!","notificationLink":"#","createdOn":1512640449140}]';
      
      
     
  
  notificationData = JSON.parse(notificationData);
//  console.log(notificationData);
//  console.log(notificationData.length);
  var len = notificationData.length - 5 ;
  var heightCon = 0;
  for( var i = 0; i < notificationData.length; ++i ) {
    contentText = jQuery(".class-notification-struct").clone(true);
    contentText.removeClass('class-notification-struct');
    /*contentText.find(".class-face-noti img").attr('src', notificationData.image);*/
    /*contentText.find(".class-name").html(notificationData[i].name);*/
    /*contentText.find(".class-notification-link").prop('href',notificationData[i].notificationLink);
    contentText.find(".class-notification-message").append(notificationData[i].message);
    var created_on_date = new  Date( notificationData[i].createdOn );
    contentText.find(".class-notification-time").append( created_on_date.toDateString() +" at "+created_on_date.toLocaleTimeString());
    */
     
    var created_on_date = new Date( notificationData[i].createdOn );
    var row_div =  "<div class='class-row-notification'>"
                    +"<a href='"+notificationData[i].notificationLink+"' class='class-notification-link' target='mainfrm' >"
                      +"<span class='class-notification-message'>"
                        +notificationData[i].message
                      +"</span>"
                      +"<span class='class-notification-time'>"
                        +created_on_date.toDateString() +" at "+created_on_date.toLocaleTimeString()
                      +"</span>"
                    +"</a>"
                  +"</div>";
    jQuery(row_div).prependTo('.class-append-con');
   
//  if( len <= i ) {
//    heightCon += contentText.outerHeight( true );
//    alert(heightCon +" : "+contentText.outerHeight( true ));
//  }
   
    
}
  calculate_height();
function calculate_height(){
var h = 0;
    $('.class-append-con > .class-row-notification:lt(5)').each( function( i ){
      h += $(this).outerHeight( true );
      alert( "Height of "+(i+1)+" div     :-  " +$(this).outerHeight( true )+" \nHeight Addition   :-  "+ h );
    });
    $('.class-append-con').css('max-height', h);
}
.class-append-con {
  /* overflow: hidden; */
  overflow-y: auto;
}

.class-row-notification {
  padding: 5px 0px 5px 15px;
  background-color: #F0F0F0;
  border-bottom: 1px solid #C2D0DB;
  position: relative;
}

.class-notification-link {
  text-decoration: none;
}

.class-notification-message {
  width: 100%;
  display: block;
  font-size: 13px;
  /* margin-left: 9px; */
  vertical-align: top;
  color: #3F4B57;
  line-height: 15px;
  max-height: 30px;
  overflow: hidden;
}

.class-notification-time {
  font-size: 11px;
  display: block;
  color: #808080;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="class-append-con">
</div>
Run codeHide result
+4
source share
2 answers

I made a jQuery script to solve a similar problem a while ago. My work was designed to work with sibling elements, but it also applies to elements of parental children.

var maxHeight = Math.max.apply(null, $(".apply-max-height").map(function () {
    return $(this).height();
}).get());
$(".apply-max-height").height(maxHeight);
$(window).resize(function() {
    $(".apply-max-height").height("auto");
    var maxHeight = Math.max.apply(null, $(".apply-max-height").map(function() {
        return $(this).height();
    }).get());
    $(".apply-max-height").height(maxHeight);
});

Updated for fields and other properties:

var maxHeight = Math.max.apply(null, $(".apply-max-height").map(function () {
    return $(this).height();
}).get());
$(".apply-max-height").height(maxHeight);
$('.children-element').css('margin', $('.parent-element').css('margin'));
$(window).resize(function() {
    $(".apply-max-height").height("auto");
    var maxHeight = Math.max.apply(null, $(".apply-max-height").map(function() {
        return $(this).height();
    }).get());
    $(".apply-max-height").height(maxHeight);
    $('.children-element').css('margin', $('.parent-element').css('margin'));
});

This also works when resizing, add the properties that you want to “copy”, just like with the brand, and you should have no problems.

"apply-max-height" , , . , !

0

, , ?

?
: -
, .class-append-con ( ) ,
height() 0 outerHeight( true ) 11px


div , .

.

var notificationData = '[{"notificationObjectId":null,"notificationId":null,"notifierId":null,"actorId":null,"entityId":null,"entityTypeId":null,"notifierName":null,"actorName":null,"message":"<b>Shantaram : </b> Hello World !!!","notificationLink":"#","createdOn":1512640448139},{"notificationObjectId":null,"notificationId":null,"notifierId":null,"actorId":null,"entityId":null,"entityTypeId":null,"notifierName":null,"actorName":null,"message":"<b>Spring : </b>How are you, <b>Shantaram</b> ? !!!","notificationLink":"#","createdOn":1512640449140},{"notificationObjectId":null,"notificationId":null,"notifierId":null,"actorId":null,"entityId":null,"entityTypeId":null,"notifierName":null,"actorName":null,"message":"<b>Suyog : </b> Hello World !!!","notificationLink":"#","createdOn":1512640449140},{"notificationObjectId":null,"notificationId":null,"notifierId":null,"actorId":null,"entityId":null,"entityTypeId":null,"notifierName":null,"actorName":null,"message":"<b>Balasaheb : </b> Hello World !!!","notificationLink":"#","createdOn":1512640449140},{"notificationObjectId":null,"notificationId":null,"notifierId":null,"actorId":null,"entityId":null,"entityTypeId":null,"notifierName":null,"actorName":null,"message":"<b>Ravi : </b> Hello World !!!","notificationLink":"#","createdOn":1512640449140},{"notificationObjectId":null,"notificationId":null,"notifierId":null,"actorId":null,"entityId":null,"entityTypeId":null,"notifierName":null,"actorName":null,"message":"<b>Nilesh : </b> Hello World !!! Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!Hello World !!!","notificationLink":"#","createdOn":1512640449140}]';
      
      
     
  
  notificationData = JSON.parse(notificationData);
//  console.log(notificationData);
//  console.log(notificationData.length);
  var len = notificationData.length - 5 ;
  var heightCon = 0;
  for( var i = 0; i < notificationData.length; ++i ) {
    contentText = jQuery(".class-notification-struct").clone(true);
    contentText.removeClass('class-notification-struct');
    /*contentText.find(".class-face-noti img").attr('src', notificationData.image);*/
    /*contentText.find(".class-name").html(notificationData[i].name);*/
    /*contentText.find(".class-notification-link").prop('href',notificationData[i].notificationLink);
    contentText.find(".class-notification-message").append(notificationData[i].message);
    var created_on_date = new  Date( notificationData[i].createdOn );
    contentText.find(".class-notification-time").append( created_on_date.toDateString() +" at "+created_on_date.toLocaleTimeString());
    */
     
    var created_on_date = new Date( notificationData[i].createdOn );
    var row_div =  "<div class='class-row-notification'>"
                    +"<a href='"+notificationData[i].notificationLink+"' class='class-notification-link' target='mainfrm' >"
                      +"<span class='class-notification-message'>"
                        +notificationData[i].message
                      +"</span>"
                      +"<span class='class-notification-time'>"
                        +created_on_date.toDateString() +" at "+created_on_date.toLocaleTimeString()
                      +"</span>"
                    +"</a>"
                  +"</div>";
    jQuery(row_div).prependTo('.class-append-con');
   
//  if( len <= i ) {
//    heightCon += contentText.outerHeight( true );
//    alert(heightCon +" : "+contentText.outerHeight( true ));
//  }
   
    
}
  calculate_height();
function calculate_height(){
var h = 0;
    $('.class-append-con > .class-row-notification:lt(5)').each( function( i ){
      h += $(this).outerHeight( true );
      alert(h +"	: "+$(this).outerHeight( true ) +" : "+i);
    });
    $('.class-append-con').css('max-height', h);
}
.class-append-con {
  /* overflow: hidden; */
  overflow-y: auto;
}

.class-row-notification {
  padding: 5px 0px 5px 15px;
  background-color: #F0F0F0;
  border-bottom: 1px solid #C2D0DB;
  position: relative;
}

.class-notification-link {
  text-decoration: none;
}

.class-notification-message {
  width: 100%;
  display: block;
  font-size: 13px;
  /* margin-left: 9px; */
  vertical-align: top;
  color: #3F4B57;
  line-height: 15px;
  max-height: 30px;
  overflow: hidden;
}

.class-notification-time {
  font-size: 11px;
  display: block;
  color: #808080;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class-append-con">
</div>
Hide result
0

Source: https://habr.com/ru/post/1690375/

More articles:


All Articles