unable to fix width and height of images to 100%

Question

I am working on angular and bootstrap application. I am implementing carousel of bootstrap in my application. Facing the width and height resized issues.

Demo link: https://plnkr.co/edit/tPKXHeN3JWyqZgOtrTTS?p=preview When user click's on next arrow in the above link, we can see graph but the dimensions of the graph are reduced. I want all the images/graphs used to be 100% width and height.Any suggestions would be helpful.

css code:

.panel-info .panel-heading  {
        background-color: #c1c6dd;
    }

    .carousel {
        margin-bottom: 0;
        padding: 0 40px 30px 40px;
    }

    .carousel-indicators {
        right: 50%;
        top: auto;
        bottom: -10px;
        margin-right: -19px;
    }

    .carousel-indicators li {
        background: #cecece;
    }

    .carousel-indicators .active {
        background: #428bca;
    }

    .carousel-control.left, .carousel-control.right {
        color: #2fa4e7;
        background-image: none;
    }

    .carousel-control {
        z-index: 10;
        top: 2%;
        width: 30px; 
    font-family: 'Helvetica Neue', Arial, sans-serif;
    }

    .carousel-control.left { left: -10px; }
    .carousel-control.right { right: -10px; }


    .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
        font-size: 70px;
        margin-left : -17px;
        margin-right : 24px
    }

html code:

  <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">

      <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>

      </ol>
      <div class="carousel-inner">
     <div id='id1' class="item active">
      <table style="width:100%;height:80%;">
      <tr>
     <td id="id1td"  ng-controller="myController1">
      <div google-chart chart="myChart" style="height:100%; width:100%;" align="center"/>
   </td>
    </tr>
    </table>

    </div>

    <div id='id2' class="item" ng-controller="myController2">
    <table style="width:100%;height:90%;">
      <tr style="height:5%;">
       <td>
         <h1>Title and some content goes here----</h1>
         </td>
    <tr style="height:85%;">

    <td id="id2td">
    <div google-chart chart="myChart" style="height:100%; width:100%;" align="center"/>
    </td>
    </tr>
    </table>

    </div>

    </div> 

      <!-- Left and right controls -->
       <span class="left carousel-control" href="#myCarousel" data-slide="prev" >
                                         <span class="glyphicon glyphicon-chevron-left"></span>
                                     </span>
                                     <span class="right carousel-control" href="#myCarousel" data-slide="next">
                                         <span class="glyphicon glyphicon-chevron-right"></span>
        </span>
</div>

score 2 · Answer 1 · answered Jun 19 '17 at 10:37

2

there is always a problem with tabs and carousel. when you render the chart. if tabs or carousel is not active it will not render charts properly. so I have found the solution for it.

find all delete-me class in the new code it only in index.html file and remove them after page is loaded

<script type="text/javascript" charset="utf-8">
   setTimeout(function() {
     $('.delete-me').removeClass('active delete-me');
   }, 500);
</script>

I just updated your code DEMO here: https://plnkr.co/edit/EoOxuhH8FTPEOTg5MlHH?p=preview

answered Jun 19 '17 at 10:37

Prince Sodhi

2,845
2
21
35

Thanks, i'm trying to implement the same in my application. Something went wrong,trying to figure it out. Can we do using only css without using jquery? Appreciate your help. – user222 Jun 19 '17 at 10:48
it would be appreciated if u accept it as the right answer. – Prince Sodhi Jun 19 '17 at 10:49
sure,give me 5mins, just trying to implement in my application. Can you give example using javascript. I think this might be useful for the struggles like me..someone may not be using jquery in there application.@Prince sodhi – user222 Jun 19 '17 at 10:52
1

u can refer this, to remove class without jQuery https://stackoverflow.com/questions/2155737/remove-css-class-from-element-with-javascript-no-jquery – Prince Sodhi Jun 19 '17 at 10:54
still i'm facing the same issue in my application. Is that because i have tabs and on click of one of the tab in my application this page is getting opened with carousel? – user222 Jun 19 '17 at 11:25
yaa u need to do the same thing for tabs as well. its somehow stupid but it works. :) – Prince Sodhi Jun 19 '17 at 11:28

unable to fix width and height of images to 100%

1 Answers1