title: css code to fix the width and height - bootstrap
body: <p>I am using carousel on my web application. Currently I have two graphs, when user click on the next arrow second graph is shown as shown in <a href="https://plnkr.co/edit/tPKXHeN3JWyqZgOtrTTS?p=preview" rel="nofollow noreferrer">demo here.</a>
  Second graph width and height got reduced. I could not able to figure out how can I fix the width and height so that it wont get reduced when clicked on next arrow. 
  I have gone through this link <a href="https://stackoverflow.com/questions/17357306/bootstrap-carousel-resizing-image/24325781">Bootstrap carousel resizing image</a> but it didn't worked for me. Please advice how to fix the width and height when carousel, (when carousel is used then size getting reduced for second shown graph as shown in the demo above.</p>
  
  <p>js code:</p>
  
  <pre><code>    &lt;div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false"&gt;
  
        &lt;ol class="carousel-indicators"&gt;
        &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
  
        &lt;/ol&gt;
        &lt;div class="carousel-inner"&gt;
       &lt;div id='id1' class="item active"&gt;
        &lt;table style="width:100%;height:80%;"&gt;
        &lt;tr&gt;
       &lt;td id="id1td"  ng-controller="myController1"&gt;
        &lt;div google-chart chart="myChart" style="height:100%; width:100%;" align="center"/&gt;
     &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
  
      &lt;/div&gt;
  
      &lt;div id='id2' class="item" ng-controller="myController2"&gt;
      &lt;table style="width:100%;height:90%;"&gt;
        &lt;tr style="height:5%;"&gt;
         &lt;td&gt;
           &lt;h1&gt;Title and some content goes here----&lt;/h1&gt;
           &lt;/td&gt;
      &lt;tr style="height:85%;"&gt;
  
      &lt;td id="id2td"&gt;
      &lt;div google-chart chart="myChart" style="height:100%; width:100%;" align="center"/&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
  
      &lt;/div&gt;
  
      &lt;/div&gt; 
  
        &lt;!-- Left and right controls --&gt;
         &lt;span class="left carousel-control" href="#myCarousel" data-slide="prev" &gt;
                                           &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
                                       &lt;/span&gt;
                                       &lt;span class="right carousel-control" href="#myCarousel" data-slide="next"&gt;
                                           &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
          &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>