I have issue when use angular-leaflet-directive to create multiple map.
I have list City and i want to use ng-reapeat to display many map.
this is code
<div ng-repeat="(key,city) in listCity" class="panel panel-info col-md-2" style=" height: 25%;">
<div class="panel-heading">{{city.name}}</div>
<div class="panel-body" style="width: 100%; height: 100%;">
<leaflet style="width: 100%; height: 90%;" center="{{city.place_id}}"></leaflet>
</div>
</div>
it alert error Syntax Error: Token '{' invalid key at column 2 of the expression [{{city.place_id}}] starting at [{city.place_id}}].
when i test by change 'center' with other string then It haven't error.
Please help me fix it.
thank you so much !!!!!!!
According to the example in the docs, you must provide a lat, a lng and a zoom in your center property.
So try something like this:
<div ng-repeat="city in listCity" class="panel panel-info col-md-2" style=" height: 25%;">
<div class="panel-heading">{{city.name}}</div>
<div class="panel-body" style="width: 100%; height: 100%;">
<leaflet style="width: 100%; height: 90%;" center="{ lat: city.lat, lng: city.lng, zoom: 10 }"></leaflet>
</div>
</div>
I assume your listCity is an Array.
Related
I am trying to fetch set of data from a web table, stored/made using the <div> tags, not like the traditional html data tables. For example:
<div class="tabulator-cell" role="gridcell" tabulator-field="program_name" title="" style="width: 135px; text-align: left; height: 30px;">
<span style="color: #00def; font-weight: 500;">Consumer xyz</span>
</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="business_val" title="" style="width: 119px; text-align: center; height: 00px;">
11898
<div class="tabulator-col-resize-handle"></div>
<div class="tabulator-col-resize-handle prev"></div>
</div>
So, I am using scriptAll() method for this and need data just for 'Consumer xyz' here but unable to do so.
* def list = scriptAll('div div', '_.textContent', function(x){ return x.contains('Consumer xyz') })
* delay(3000)
* print list
Any help on this would be appreciated. Thanks in advance.
I'll just give you one hint. This is how you can get a reference to the parent div of the row:
* def temp = locate('{}Consumer Banking').parent.parent
Now it is up to you:
* def businessValue = temp.locate("[tabulator-field='business_value']")
* match businessValue.text.trim() == '11898'
I'm new in using chart JS, I am trying to customize the legends. I try the example that I found but when I try to make my own it shows this error.
I want to display the legends in separate like in this.
here's my code.
var myLegendContainer = document.getElemenById('legend');
var graphTarget = $("#line-chartcanvas");
graphTarget.attr('height',80);
barGraphQty = new Chart(graphTarget, {
type: 'bar',
data: chartdata,
options: {
legend: {
display: false
},
}
});
myLegendContainer.innerHTML = barGraphQty.generateLegend();
});
HTML code
<div class="col-md-4">
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">Legends</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div id="legend"></div>
</div>
</div>
</div>
CSS
[class$="-legend"] {
list-style: none;
cursor: pointer;
padding-left: 0;
}
[class$="-legend"] li {
display: block;
padding: 0 5px;
}
[class$="-legend"] li.hidden {
display:block !important;
text-decoration: line-through !important;
}
[class$="-legend"] li span {
border-radius: 5px;
display: inline-block;
height: 10px;
margin-right: 10px;
width: 10
please help me.
Without seeing your code, it's almost impossible to tell why exactly this TypeError occurs. From the posted image, I deduct however that the use of generatelabels is not the ideal choice to achieve what you need.
What you really need is generating custom HTML legend using legendCallback together with some CSS.
Please take a look at the following posts to see how this could be done:
https://stackoverflow.com/a/63216656/2358409
https://stackoverflow.com/a/63202664/2358409
I am trying to place two grids side by side ,but the second grid is automatically shifted to the next line.
I have reduced the width of the grids to 40% each ,and also tried to place the grids in <span> ,But still I am not able to display the grids beside each other.
Using flexbox should solve your problem:
.row {
display: flex;
}
.column {
flex: 50%;
padding: 10px;
height: 500px;
}
<div class="row">
<div class="column">
<ag-grid-angular [gridOptions]="firstGrid" class="ag-theme-balham"></ag-grid-angular>
</div>
<div class="column">
<ag-grid-angular [gridOptions]="secondGrid" class="ag-theme-balham"></ag-grid-angular>
</div>
</div>
I have a strange issue i cannot explain. i am using the play framework and when i try to run the View below it only works when i REPEAT the form action below... it works but i know it's not right. appreciative if anyone can help explain or correct.
#(errorMessage: String = "")(implicit messages: Messages)
#helper.form(routes.ApplicationHomeController.login) {
#main(title = messages("single.title")) {
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="userbox">
<form action="#{routes.ApplicationController.doLogin()}" method="post"></form>
<form action="#{routes.ApplicationController.doLogin()}" method="post">
<div style="color: red">#errorMessage</div>
<h1 id="logintxt" style="background-color: rgb(11, 146, 9);
background-position: initial;
background-repeat: initial;">Driver Service <b>ß</b>eta</h1>
<div id="submit_giff" style="display: none;">
<hi> Authenticating: <img src="/assets/images/loader-bar.gif" align="absmiddle"> </hi>
</div>
<input id="name" name="userName" placeholder="Username" style="opacity: 1;
background-color: rgb(255, 255, 255);
background-position: initial;
background-repeat: initial;">
<input id="pass" name="password" type="password" placeholder="Password" style="opacity: 1;
background-color: rgb(255, 255, 255);
background-position: initial;
background-repeat: initial;">
<p id="namealert" style="display: none;
opacity: 1;">Username:</p>
<p id="passal" style="display: none;
opacity: 1;">Password:</p>
<input id="loginbtn" style="opacity: 0.2;
cursor: default;" type="submit" value="Login">
</form>
</div>
<script src="/assets/javascripts/login.js"></script>
}
}
Two immediate observations.
One: #helper.form(...) will write a <form> element into the HTML that ultimately gets generated. Your view then includes other literal <form>s nested inside the first form. Nested forms are invalid HTML. You have one form submitting to routes.ApplicationController.doLogin and the other submitting to routes.ApplicationController.login. Who knows which of these the browser will actually submit to? We can't really predict because nested forms are invalid.
Two: you have your #main(...) view nested inside your #helper.form(...). I assume your main view contains <html>...</html>. This is going to result in HTML that starts with a <form> element, inside which is the <html> element. This is horribly invalid markup too.
My guess is one or both of these issues are your problem.
Try taking your generated HTML and running it through an HTML validator like https://validator.nu/. Fix any issues the validator finds, don't nest forms, and decide which (single) route the login form should actually submit to.
I am trying to show a grid in one of my ionic views that has a 4x3 grid. I want the grid to fit into the view, making all the rows have the same height and all the columns same width also all the content in the cells aligned center both vertically and horizontally.
I'm not so good at CSS so I'm having a hard time with it, any help?
Ionic has built in grid classes. You can do something like this
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
They have a very nice documentation on their grid system and other ways to set up rows and columns. link: http://ionicframework.com/docs/components/#grid
for css centering this should work: just place a div around your rows and columns and apply this the classes. I am not great a css but i will try to help :P
<div class=container>
<div class="row contained">
<div class="col">Centered!</div>
</div>
</div>
div.container {
height: 50%; }
div.contained {
margin: 0;
background: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }