Geek Answers Handbook

Allow dynamic window resizing after transition

Here's the problem:

We can resize the window to fit the content, but when you resize the window, the height does not change dynamically, either leaving a ton of space below or hiding the content behind the rest of the page.

Here is the code:

HTML:

<div class="panel-container" style="height: 706px;">
   <div class="control-panel create-job flexible">
     <div class="column-container">

JSX:

  resizePanel: function (height) {
   this.refs.panel.style.height = height + 'px';
  },
  getPanelContainerStyle: function (controlPanel) {
    if (this.state.isPanelOpen && _.isObject(controlPanel)) {
      var height = controlPanel.type.prototype.height;
      if (_.isNumber(height)) {
       return {height: height};
      } else return {height: 100};
    } else return {};
  },

CSS

 .panel-container
   height 0
   transition height 0.3s
   margin-top bump-lg px
   margin-bottom bump-lg px

Any help is much appreciated!

+6
source share
1 answer

Have you tried using view units? you can find more information here https://teamtreehouse.com/community/resizing-div-automatically-depending-on-screen-size

0
source

More articles:


All Articles