dimanche 19 avril 2015

CSS Prob with Div Placement

I have some difficulties in laying out my search textbox to be appeared at the top and position in front of the map div. Currently, it appeared to be within the right sidebar when you've hovered it (Source Link is located below).


It needs to be something like this: http://ift.tt/1G9mZNA


*Note: The code is not refactored yet.



<!DOCTYPE html>
<html>
<head>
<title>Singapore Population</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="http://ift.tt/1u2ltXF" />

<!-- Include CSS -->
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="http://ift.tt/1iPvGjZ" />
<link rel="stylesheet" href="http://ift.tt/1Q7F0Bu"/>
<link rel="stylesheet" href="http://ift.tt/1C5yhiQ" />
<link rel="stylesheet" href="http://ift.tt/1Q7F2t2">

<style>

html, body {width:100%; height:100%; padding: 0; margin: 0;}
#map { width: 100%; height:100%; background: black;}
#menu { position: relative; top: 20px; left: 75px; width: 600px; height:60px; background: transparent; }
.scrollable-menu {
height: auto;
width: auto;
}

</style>

<style type="cartocss/text" id="backgroundStyle">
/** simple visualization */

#background{
polygon-fill: #FFFFFF;
polygon-opacity: 0.4;
polygon-comp-op: lighten;
line-color: #FFF;
line-width: 1;
line-opacity: 0.5;
}

</style>


<div id="map"/>

<div id="chartPanel" width="600px" style="position: relative;">
<div class="top-level-pull-out" id="chartContainer"/>


<div id="searchPanel" style="position: relative;">

<input id="searchtxt" type="text" placeholder="请开始搜索" style="width:200px;" onkeyup="liveSuggest(this.value)" />

<!---input type="button" id="togglePopChart" class="btn btn-default" style="margin: 15px;" value="人口统计" />-->

<div class="dropdown" id="searchResultList"/>

</div>
</div>

</head>

<div id="menu">

<div id="layer-control" />

</div>

<body>

//CartoDB + Leaflet Script

<script>...</script>

</body>

<script type="text/javascript" src="http://ift.tt/JuZcy0"></script>
<script src="http://ift.tt/1DBLkKU"></script>
<script src="http://ift.tt/13qgtmt"></script>
<script src="http://ift.tt/19wK3Lg"></script>
<script src="http://ift.tt/1ANStsm"></script>
<script src="http://ift.tt/1BeqZLp"></script>
<script src="http://ift.tt/1Q7F2t4"></script>
<script type="text/javascript" src="js/mega-pull-out-menu-1.0.min.js"></script>

</html>


You can view my source at:


http://ift.tt/1DBLmlY


Thank you in advance.


Note: (When you have clicked on the map layer's color border, the graph will be render at the right sidebar) After this has fixed, I am planning to make the selection of the result once the user has clicked and it will autorender the graph when the Leaflet's locator is marked -- which currently I am facing some issues.


Aucun commentaire:

Enregistrer un commentaire