vendredi 27 février 2015

How to fix responsive error

The problem is that when I resize the window to small size (mobile) it looks fine, but when i revert it to large the canvas extends outside its parent column.


Screenshot1(http://ift.tt/1BBO8tM)


Fiddle


I am using bootstrap 3.3. But i have to tell that,no problem with other boxes, it doesn't go out of boxes expect this graph





.ibox-title {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #ffffff;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 4px 0px 0;
color: inherit;
margin-bottom: 0;
padding: 14px 15px 7px;
height: 48px;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
}
.ibox-content {
background-color: #ffffff;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0px;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
}
canvas {
background: pink;
}



<div class="row">
<div class="col-lg-6">
<div class="ibox float-e-margins">

<div class="ibox-content" style="border-radius: 10px;">
<div>
<h3 class="font-bold no-margins">
Statistics Graph
</h3>
</div>

<div class="m-t-sm">
<div class="row">
<div class="col-md-12">
<div>
<canvas id="lineChart" height="114"></canvas>
</div>
</div>
</div>

</div>
<div class="m-t-md">
<small class="pull-right">
<i class="fa fa-clock-o"> </i>
Update on 16.07.2015
</small>
<small>
<strong>Analysis of sales:</strong> The value has been changed over time,sdasdas as been changed over time,sdasdas
</small>
</div>
</div>
</div>
</div>



s


Aucun commentaire:

Enregistrer un commentaire