All geek questions in one place

How to show fleet table in 100% width on Twitter Modified AnglerJS Bootstrap window

I am using Twitter Bootstrap AngularJS to build a web application. In a modal window, I like to show a JQuery Flot real-time graph similar to this: http://people.iola.dk/olau/flot/examples/realtime.html

I copied the code from http://people.iola.dk/olau/flot/examples/realtime.html and put it in a file called flot2.html on my server. It is working. I only specify the height and it automatically sets the width to 100%

However, when I put the code in my template file (index.html) and in the modal window, there are two problems. It gives me this error below if I don't specify the width:

Invalid dimensions for plot, width = 0, height = 300

I set width = 100%, but it looks like it only shows 100px.

Also, the labels for the Y axis are above the top of the left edge / border of the grid, and not a few pixels to the left of it.

Here is the code:

In index.app.html:

 <!DOCTYPE HTML> <html ng-app="app"> ... <body ng-controller="AppCtrl"> ... <div class="container"> <div ng-view></div> </div> ... <script src="/js/jquery.min.js">

In the template (index.html):

 ... <!--  Modal window --> <div class="modal fade hide" id="chartModal"> ... <style> display:block!important; </style> <script src="/js/jquery.flot.min.js"></script> <script src="/js/flot/flot.demo.js"></script> <!-- I copied the Javascript code from http://people.iola.dk/olau/flot/examples/realtime.html and put it here --> <div id="placeholder" style="width:100%; height:300px; display:block"></div>

In bootstrap.css:

 ... .hide { display: none; }

I noticed that when I remove "hide" from:

 <div class="modal fade hide" id="chartModal">

my two problems go away and the chart looks fine. But removing the “hide” causes other problems on the site, and therefore I can’t remove it. Therefore, I added this code (as you can see above):

 <style> display:block!important; </style>

But he does nothing. I tried almost all the options for display, such as display: auto, display: inline, display: table, etc., but none of them work.

Can anyone suggest a solution?

+4
source share
2 answers

You must specify the width.

According to fleet documentation

You need to set the width and height of this div, otherwise the chart library does not know how to scale the chart. You can do this as inline this:

  <div id="placeholder" style="width:600px;height:300px"></div>
+4
source

CSS rules are complicated. Try directly referencing an element in your CSS and make sure your CSS loads after loading.

So

 #chartModal { display:block; }

It should work and, if necessary, insert! important. I prefer not to refer to identifiers in CSS, but sometimes it brings you to the endgame faster.

0
source

Source: https://habr.com/ru/post/1439452/

More articles:


All Articles