Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How can I make these panels fluid with 100% height without giving fixed height

Tags:

html

jquery

css

twitter-bootstrap

internet-explorer-8

I am trying to make these panels take full length of container they are in, without providing fixed height, initially I want them to take all of the height of the page,

Fiddle - https://jsfiddle.net/0fgnu99o/10/

HTML

<div class="container">
  <div class="row">
    <div class="column">
      <h3 style="display: inline-block;">{{vm.Title}}</h3>
      <h4 class="pull-right" style="margin-top: 20px;">Back</h4>
    </div>
  </div>
  <div class="row">
    <div class="panel-group" id="accordion">
      <div class="panel panel-default" id="panel1">
        <div class="panel-heading" data-toggle="collapse" data-target="#collapseOne">
          <h4 class="panel-title">Panel 1</h4>

        </div>
        <div id="collapseOne" data-parent="#accordion" class="panel-collapse collapse in">
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>

        </div>
      </div>
      <div class="panel panel-default" id="panel2">
        <div class="panel-heading" data-toggle="collapse" data-target="#collapseTwo">
          <h4 class="panel-title">Panel 2</h4>

        </div>
        <div id="collapseTwo" data-parent="#accordion" class="panel-collapse collapse">
          <div class="panel-body">
            <ul class="list-group">
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.panel-heading a:after {
  font-family: 'Glyphicons Halflings';
  content: "\e114";
  float: right;
}

.panel-heading a.collapsed:after {
  content: "\e080";
}

#collapseOne,
#collapseTwo {
  height: 200px;
  max-height: 200px;
  overflow-y: auto;
}

I don't want to provide this,

height: 200px;
  max-height: 200px;
like image 511
Mathematics Avatar asked Feb 12 '16 09:02

Mathematics

1 Answers

I would recommend to use % in css for width and height from root element to all child elements while working on fluid layout, anyways here is a small jQuery tweak to achieve what you have asked, i hope this helps..:)

$(document).ready(function() {


  var $offHeight = 0

  function updateHeight() {
    var $tempHeight = 0;
    var $wrapper = $('.mainContainer');
    $tempHeight += $('.row').not('.mainRow').outerHeight();
    $tempHeight += $('#panel1').find('.panel-heading').outerHeight();
    $tempHeight += $('#panel2').find('.panel-heading').outerHeight() + 5 + 4; // +5 for margin-top of panel 2 header and +4 for adjustment 
    $offHeight = $wrapper.height() - $tempHeight;
    $('#collapseOne').css({

      'max-height': $offHeight
    });
    $('#collapseTwo').css({

      'max-height': $offHeight
    });



  }

  updateHeight();


  $('.panel-heading').on('click', function() {

    updateHeight();



  });

  $(window).resize(function() {


    updateHeight();

  });


});
/*make parent of "container" fixed width and height*/

body,
html {
  width: 100%;
  height: 100%
}
/*fill "container" to its parent width and height*/

.mainContainer {
  width: 100%;
  height: 100%
}
/*extra margin-bottom fix*/

#accordion {
  margin: 0
}
.panel-heading a:after {
  font-family: 'Glyphicons Halflings';
  content: "\e114";
  float: right;
}
.panel-heading a.collapsed:after {
  content: "\e080";
}
#collapseOne,
#collapseTwo {
  overflow-y: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.css" rel="stylesheet" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container mainContainer">
  <div class="row">
    <div class="column">
      <h3 style="display: inline-block;">{{vm.Title}}</h3>
      <h4 class="pull-right" style="margin-top: 20px;">Back</h4>
    </div>
  </div>
  <div class="row mainRow">
    <div class="panel-group" id="accordion">
      <div class="panel panel-default" id="panel1">
        <div class="panel-heading" data-toggle="collapse" data-target="#collapseOne">
          <h4 class="panel-title">Panel 1</h4>

        </div>
        <div id="collapseOne" data-parent="#accordion" class="panel-collapse collapse in">
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i>
          </li>
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i>
          </li>
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i>
          </li>
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i>
          </li>
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i>
          </li>
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i>
          </li>
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i>
          </li>
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i>
          </li>
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i>
          </li>
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i>
          </li>
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i>
          </li>
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i>
          </li>
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i>
          </li>
          <li class="list-group-item">Panel 1<i class="pull-right">Delete</i>
          </li>

        </div>
      </div>
      <div class="panel panel-default" id="panel2">
        <div class="panel-heading" data-toggle="collapse" data-target="#collapseTwo">
          <h4 class="panel-title">Panel 2</h4>

        </div>
        <div id="collapseTwo" data-parent="#accordion" class="panel-collapse collapse">
          <div class="panel-body">
            <ul class="list-group">
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i>
              </li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i>
              </li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i>
              </li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i>
              </li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i>
              </li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i>
              </li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i>
              </li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i>
              </li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i>
              </li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i>
              </li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i>
              </li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i>
              </li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i>
              </li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i>
              </li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i>
              </li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i>
              </li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i>
              </li>
              <li class="list-group-item">Panel 2<i class="pull-right">Delete</i>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/ajrycq33/1/

like image 151
mike tracker Avatar answered Nov 08 '22 10:11

mike tracker
Sign in to Comment

Related questions

Tomcat CORS filter and Spring Security
Google reCaptcha 2 TypeError: a is null after calling grecaptcha.reset
Slick carousel in Center Mode causes SlidesToscroll does not work as it should be

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!