javascript - Phonegap -Leaflat map fill up remaining site -


i using leaflat display map, want fill remaining space, wanted use flex boxes, map not displayed, displaey if define height in px.

javascript

    var map = l.map('map').setview([51.505, -0.09], 13);      l.tilelayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {       maxzoom: 18,       attribution: 'map data &copy; <a href="http://openstreetmap.org">openstreetmap</a> contributors, ' +         '<a href="http://creativecommons.org/licenses/by-sa/2.0/">cc-by-sa</a>, ' +         'imagery © <a href="http://mapbox.com">mapbox</a>',       id: 'examples.map-i875mjb7'     }).addto(map);

css

    body {       padding: 0 !important;       margin: 0 !important;       height: 100% !important;       display: flex !important;       flex-flow: column wrap !important;       height: 100% !important;     }     #content {         width: 100%;         height: 100%;     }       .content-box {} .content-box .run {}       .content-box .run.data {       order: 1;       flex: 0 1 auto;     }     .content-box .run.data > h1 {       text-align: center;     }     .content-box .run.map {       order: 2;       flex: 1 1 auto;       width: 100%;     }

html

    <!doctype html>     <html>      <head>       <meta charset="utf-8" />       <title>app</title>       <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>       <link href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" rel="stylesheet" />     </head>      <body>       <div id="app">         <div id="content" class="content-box">           <div class="run data">             <p>some content</p>             <p>....</p>           </div>           <div class="run map" id="map">           </div>         </div>       </div>     </body> </html>

i have tried several things similar questions here on stackoverflow none of them solve problem. if add position: fixed; #content in css file , add height: 100%; .content-box .run-map map sized correctly @ first moment, after clicking comething glitches , no longer correctly, tried position: fixed; had not helped. how can make map fill rest of site?

what did set html height 100%. 

html {     height: 100%; }

Comments

Post a Comment

Popular posts from this blog

cakephp - simple blog with croogo -

i not problem, made simple blog in croogo, problem is not adding or modifying or delete, because arabic language ?? function add in controller `public function admin_add() { $this->set('title_for_layout', __('add part')); if (!empty($this->request->data)) { $this->part->create(); if ($this->part->save($this->request->data)) { $this->session->setflash(__('the part has been saved'), 'default', array('class' => 'success')); $this->redirect(array('action' => 'index'));//, $this->part->id)); } else { $this->session->setflash(__('the part not saved. please, try again.'), 'default', array('class' => 'error')); } } }` => model `class part extends appmodel { public $name = 'part'; var $belongst...
Read more

How to group boxplot outliers in gnuplot -

i have large set of data points. try plot them boxplot, of outliers exact same value , represented on line beside each other. found how set horizontal distance between outliers in gnuplot boxplot , doesn't much, apparently not possible. is possible group outliers together, print 1 point , print number in brackets beside indicate how many points there are? think make more readable in graph. for information, have 3 boxplots 1 x value , times 6 in 1 graph. using gnuplot 5 , played around pointsize, doesn't reduce distance anymore. hope can help! edit: set terminal pdf set output 'dat.pdf' file0 = 'dat1.dat' file1 = 'dat2.dat' file2 = 'dat3.dat' set pointsize 0.2 set notitle set xlabel 'x' set ylabel 'y' header = system('head -1 '.file0); n = words(header) set xtics ('' 1) set [i=1:n] xtics add (word(header, i) i) set style data boxplot plot file0 using (1-0.25):1:(0.2) boxplot lw 2 lc rgb '#8b0000...
Read more

bash - Performing variable substitution in a string -

i have string contains use of variable, , i'd substitute variable's value string. right best have is #!/bin/bash foo='$name; echo bar' name="the name" expanded="$(eval echo "$foo")" echo "$expanded" which has obvious defects: prints the name bar while i'd print the name; echo bar instead of eval can bash's regex matching bash's string replacement: foo='$name; echo bar' name="the name" [[ "$foo" =~ \$([[:alnum:]]+) ]] && s="${!bash_rematch[1]}" && expanded="${foo/\$${bash_rematch[1]}/$s}" echo "$expanded" name; echo bar
Read more