Html pop-up will not scroll - html
I currently have website with a search bar. The search bar has a sort of autocomplete suggestions feature. As the user starts writing, a list of possible suggestions will drop down. At this point the user can either choose one of the options from the suggestions list that popped up or finish writing it themselves. My problem is that for some reason, I am unable to scroll down the list of suggestions. I have looked at my code up and down and can't figure this out. Any suggestion is appreciated.
PreSearch:
PostSearch:
HTML Code:
<html>
<head>
<title>WEBSITE SAMPLE</title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta itemprop="name" content="">
<meta itemprop="description" content="">
<meta itemprop="image" content="">
<meta property="og:url" content="">
<meta property="og:type" content="website">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:image" content="">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="shortcut icon" href="favicon.ico" />
<link rel="apple-touch-icon" sizes="144x144" href="images/iosicon.png">
<link rel="mask-icon" href="icon.svg" color="#2bb24c">
<link rel="stylesheet" href="css/slick.css" />
<link rel="stylesheet" href="css/animate.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/css.css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
</head>
<body>
<div class="header">
<div class="logo-header">
<a href="../">
<img src="img/foto.png" id="foto" />
</a>
</div>
</div>
<input id="autocomplete" type="text" placeholder="Buscar...">
<button id="sortButton" onclick="TakeToSort()">Sort</button>
<button id="filterButton" onclick="TakeToFilter()">Filter</button>
<style>
input {
display: none;
}
#sortButton{
display: none;
}
#filterButton{
display: none;
}
/* // Extra small devices (portrait phones, less than 576px) */
#media (max-width: 575.98px) {}
/* // Small devices (landscape phones, less than 768px) */
#media (max-width: 767.98px) {
input {
width: 100%;
padding: 20px;
display: block;
}
#sortButton {
width: 100%;
padding: 20px;
display: block;
}
#filterButton {
width: 100%;
padding: 20px;
display: block;
}
}
/* // Medium devices (tablets, less than 992px) */
#media (max-width: 991.98px) {}
/* // Large devices (desktops, less than 1200px) */
#media (max-width: 1199.98px) {}
</style>
<iframe class="airtable-embed" src="PRIVATE LINK"
frameborder="0" onmousewheel="" style="background: #999999!important; border: 1px solid #ccc;"></iframe>
<style>
#galleryView {
background-color: #000 !important;
}
</style>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4"
crossorigin="anonymous"></script>
<script src="Public/js/jquery.min.js"></script>
<script src="js/js.js"></script>
<script>
var source = [{
value: "PrivateLink1",
label: "FOR PrivateLink1"
},
{
value: "PrivateLink2",
label: "FOR PrivateLink2"
},
{
value: "PrivateLink3",
label: "FOR PrivateLink3"
},
{
value: "PrivateLink4",
label: "FOR PrivateLink4"
},
{
value: "PrivateLink5",
label: "FOR PrivateLink5"
},
{
value: "PrivateLink6",
label: "FOR PrivateLink6"
},
{
value: "PrivateLink7",
label: "FOR PrivateLink7"
},
{
value: "PrivateLink8",
label: "FOR PrivateLink8"
},
{
value: "PrivateLink9",
label: "FOR PrivateLink9"
},
{
value: "PrivateLink10",
label: "FOR PrivateLink10"
},
{
value: "PrivateLink11",
label: "FOR PrivateLink11"
},
{
value: "PrivateLink12",
label: "FOR PrivateLink12"
},
{
value: "PrivateLink13",
label: "FOR PrivateLink13"
},
{
value: "PrivateLink14",
label: "FOR PrivateLink14"
},
{
value: "PrivateLink15",
label: "FOR PrivateLink15"
},
{
value: "PrivateLink16",
label: "FOR PrivateLink16"
},
{
value: "PrivateLink17",
label: "FOR PrivateLink17"
},
{
value: "PrivateLink18",
label: "FOR PrivateLink18"
},
{
value: "PrivateLink19",
label: "FOR PrivateLink19"
},
{
value: "PrivateLink20",
label: "FOR PrivateLink20"
},
{
value: "PrivateLink21",
label: "FOR PrivateLink21"
},
{
value: "PrivateLink22",
label: "FOR PrivateLink22"
}, {
value: "PrivateLink23",
label: "FOR PrivateLink23"
},
{
value: "PrivateLink24",
label: "FOR PrivateLink24"
}, {
value: "PrivateLink25",
label: "FOR PrivateLink25"
}, {
value: "PrivateLink26",
label: "FOR PrivateLink26"
}, {
value: "PrivateLink27",
label: "FOR PrivateLink27"
}, {
value: "PrivateLink28",
label: "FOR PrivateLink28"
}, {
value: "PrivateLink29",
label: "FOR PrivateLink29"
}, {
value: "PrivateLink30",
label: "FOR PrivateLink30"
}, {
value: "PrivateLink31",
label: "FOR PrivateLink31"
}, {
value: "PrivateLink32",
label: "FOR PrivateLink32"
}, {
value: "PrivateLink33",
label: "FOR PrivateLink33"
}, {
value: "PrivateLink34",
label: "FOR PrivateLink34"
}, {
value: "PrivateLink35",
label: "FOR PrivateLink35"
}, {
value: "PrivateLink36",
label: "FOR PrivateLink36"
}, {
value: "PrivateLink37",
label: "FOR PrivateLink37"
}, {
value: "PrivateLink38",
label: "FOR PrivateLink38"
}, {
value: "PrivateLink39",
label: "FOR PrivateLink39"
}, {
value: "PrivateLink40",
label: "FOR PrivateLink40"
}, {
value: "PrivateLink41",
label: "FOR PrivateLink41"
}, {
value: "PrivateLink42",
label: "FOR PrivateLink42"
}, {
value: "PrivateLink43",
label: "FOR PrivateLink43"
}, {
value: "PrivateLink44",
label: "FOR PrivateLink44"
}, {
value: "PrivateLink45",
label: "FOR PrivateLink45"
}, {
value: "PrivateLink46",
label: "FOR PrivateLink46"
}, {
value: "PrivateLink47",
label: "FOR PrivateLink47"
}, {
value: "PrivateLink48",
label: "FOR PrivateLink48"
}, {
value: "PrivateLink49",
label: "FOR PrivateLink49"
}, {
value: "PrivateLink50",
label: "FOR PrivateLink50"
}, {
value: "PrivateLink51",
label: "FOR PrivateLink51"
}, {
value: "PrivateLink52",
label: "FOR PrivateLink52"
}, {
value: "PrivateLink53",
label: "FOR PrivateLink53"
}, {
value: "PrivateLink54",
label: "FOR PrivateLink54"
}, {
value: "PrivateLink55",
label: "FOR PrivateLink55"
}, {
value: "PrivateLink56",
label: "FOR PrivateLink56"
}, {
value: "PrivateLink57",
label: "FOR PrivateLink57"
}, {
value: "PrivateLink58",
label: "FOR PrivateLink58"
}, {
value: "PrivateLink59",
label: "FOR PrivateLink59"
}, {
value: "PrivateLink60",
label: "FOR PrivateLink60"
}, {
value: "PrivateLink61",
label: "FOR PrivateLink61"
}, {
value: "PrivateLink62",
label: "FOR PrivateLink62"
}, {
value: "PrivateLink63",
label: "FOR PrivateLink63"
}, {
value: "PrivateLink64",
label: "FOR PrivateLink64"
}, {
value: "PrivateLink65",
label: "FOR PrivateLink65"
}, {
value: "PrivateLink66",
label: "FOR PrivateLink66"
}, {
value: "PrivateLink67",
label: "FOR PrivateLink67"
}, {
value: "PrivateLink68",
label: "FOR PrivateLink68"
}, {
value: "PrivateLink69",
label: "FOR PrivateLink69"
}, {
value: "PrivateLink70",
label: "FOR PrivateLink70"
}, {
value: "PrivateLink71",
label: "FOR PrivateLink71"
}, {
value: "PrivateLink72",
label: "FOR PrivateLink72"
}, {
value: "PrivateLink73",
label: "FOR PrivateLink73"
}, {
value: "PrivateLink74",
label: "FOR PrivateLink74"
}, {
value: "PrivateLink75",
label: "FOR PrivateLink75"
}, {
value: "PrivateLink76",
label: "FOR PrivateLink76"
}, {
value: "PrivateLink77",
label: "FOR PrivateLink77"
}, {
value: "PrivateLink78",
label: "FOR PrivateLink78"
}, {
value: "PrivateLink79",
label: "FOR PrivateLink79"
}, {
value: "PrivateLink80",
label: "FOR PrivateLink80"
}, {
value: "PrivateLink81",
label: "FOR PrivateLink81"
}, {
value: "PrivateLink82",
label: "FOR PrivateLink82"
}, {
value: "PrivateLink83",
label: "FOR PrivateLink83"
}, {
value: "PrivateLink84",
label: "FOR PrivateLink84"
}, {
value: "PrivateLink85",
label: "FOR PrivateLink85"
}, {
value: "PrivateLink86",
label: "FOR PrivateLink86"
}, {
value: "PrivateLink87",
label: "FOR PrivateLink87"
}, {
value: "PrivateLink88",
label: "FOR PrivateLink88"
}, {
value: "PrivateLink89",
label: "FOR PrivateLink89"
}, {
value: "PrivateLink90",
label: "FOR PrivateLink90"
}, {
value: "PrivateLink91",
label: "FOR PrivateLink91"
}, {
value: "PrivateLink92",
label: "FOR PrivateLink92"
}, {
value: "PrivateLink93",
label: "FOR PrivateLink93"
}, {
value: "PrivateLink94",
label: "FOR PrivateLink94"
}, {
value: "PrivateLink95",
label: "FOR PrivateLink95"
}, {
value: "PrivateLink96",
label: "FOR PrivateLink96"
}, {
value: "PrivateLink97",
label: "FOR PrivateLink97"
}, {
value: "PrivateLink98",
label: "FOR PrivateLink98"
}, {
value: "PrivateLink99",
label: "FOR PrivateLink99"
}, {
value: "PrivateLink100",
label: "FOR PrivateLink100"
}, {
value: "PrivateLink101",
label: "FOR PrivateLink101"
}, {
value: "PrivateLink102",
label: "FOR PrivateLink102"
}, {
value: "PrivateLink103",
label: "FOR PrivateLink103"
}, {
value: "PrivateLink104",
label: "FOR PrivateLink104"
}, {
value: "PrivateLink105",
label: "FOR PrivateLink105"
}, {
value: "PrivateLink106",
label: "FOR PrivateLink106"
}, {
value: "PrivateLink107",
label: "FOR PrivateLink107"
}, {
value: "PrivateLink108",
label: "FOR PrivateLink108"
}, {
value: "PrivateLink109",
label: "FOR PrivateLink109"
}, {
value: "PrivateLink110",
label: "FOR PrivateLink110"
}, {
value: "PrivateLink111",
label: "FOR PrivateLink111"
}, {
value: "PrivateLink112",
label: "FOR PrivateLink112"
}, {
value: "PrivateLink113",
label: "FOR PrivateLink113"
}, {
value: "PrivateLink114",
label: "FOR PrivateLink114"
}, {
value: "PrivateLink115",
label: "FOR PrivateLink115"
}, {
value: "PrivateLink116",
label: "FOR PrivateLink116"
}, {
value: "PrivateLink117",
label: "FOR PrivateLink117"
}, {
value: "PrivateLink118",
label: "FOR PrivateLink118"
}, {
value: "PrivateLink119",
label: "FOR PrivateLink119"
}, {
value: "PrivateLink120",
label: "FOR PrivateLink120"
}, {
value: "PrivateLink121",
label: "FOR PrivateLink121"
}
];
$("input#autocomplete").autocomplete({
source: source,
select: function (event, ui) {
window.location.href = ui.item.value;
}
});
</script>
<script src="js/changeViews.js"></script>
</body>
</html>
I was able to solve this issue but using the "Scrollable JQuery UI Autocomplete". Here are the two links that I used:
Scrollable JQuery UI Autocomplete:
http://anseki.github.io/jquery-ui-autocomplete-scroll/
Example (in the website, click on view source to get the sample code, not just view the functionality):
http://jqueryui.com/autocomplete/#maxheight
To make it work I simply added the following lines:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
.ui-autocomplete {
max-height: 200px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
All these html lines go inside the
Related
Dash/Cytoscape Nested JSON Selector Styling
So I have a JSON data file that I am using with Dash/Cytoscope:
"data": {
"label": "Customer",
"properties": {
"score": 8.0,
}
}
I need to compare 'score' with the selector to see if it is bigger than 9.
So far I have tried:
'selector': 'node[properties[score > 9]]'
'selector': '[score > 9]'
'selector': '[properties[score > 9]]'
Unfortunately nothing has worked so far, just invalid syntax.
As canbax pointed out, using functions inside the stylesheet should do the trick.
I added a border-color depending on a nodes score property like this, but you can customize it as you like:
'border-color': function (node) {
if (node.data('properties').score >= 9) { return 'green'}
else { return 'black' }
},
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
style: [{
selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center',
'height': '60px',
'width': '60px',
'border-color': function(node) {
if (node.data('properties').score >= 9) {
return 'green'
} else {
return 'black'
}
},
'border-opacity': '1',
'border-width': '10px'
}
},
{
selector: '$node > node',
css: {
'padding-top': '10px',
'padding-left': '10px',
'padding-bottom': '10px',
'padding-right': '10px',
'text-valign': 'top',
'text-halign': 'center',
'background-color': '#bbb'
}
},
{
selector: 'edge',
css: {
'target-arrow-shape': 'triangle'
}
},
{
selector: ':selected',
css: {
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
}
}
],
elements: {
nodes: [{
data: {
id: 'n0',
"properties": {
"score": 9.0
}
}
},
{
data: {
id: 'n1',
"properties": {
"score": 10.0
}
}
},
{
data: {
id: 'n2',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n3',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n4',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n5',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n6',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n7',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n8',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n9',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n10',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n11',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n12',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n13',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n14',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n15',
"properties": {
"score": 8.0
}
}
},
{
data: {
id: 'n16',
"properties": {
"score": 8.0
}
}
}
],
edges: [{
data: {
source: 'n0',
target: 'n1'
}
},
{
data: {
source: 'n1',
target: 'n2'
}
},
{
data: {
source: 'n1',
target: 'n3'
}
},
{
data: {
source: 'n2',
target: 'n7'
}
},
{
data: {
source: 'n2',
target: 'n11'
}
},
{
data: {
source: 'n2',
target: 'n16'
}
},
{
data: {
source: 'n3',
target: 'n4'
}
},
{
data: {
source: 'n3',
target: 'n16'
}
},
{
data: {
source: 'n4',
target: 'n5'
}
},
{
data: {
source: 'n4',
target: 'n6'
}
},
{
data: {
source: 'n6',
target: 'n8'
}
},
{
data: {
source: 'n8',
target: 'n9'
}
},
{
data: {
source: 'n8',
target: 'n10'
}
},
{
data: {
source: 'n11',
target: 'n12'
}
},
{
data: {
source: 'n12',
target: 'n13'
}
},
{
data: {
source: 'n13',
target: 'n14'
}
},
{
data: {
source: 'n13',
target: 'n15'
}
},
]
},
layout: {
name: 'dagre',
padding: 5
}
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 75%;
position: absolute;
left: 0;
top: 0;
float: left;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script>
<script src="https://unpkg.com/jquery#3.3.1/dist/jquery.js"></script>
<script src="https://unpkg.com/dagre#0.7.4/dist/dagre.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
Adjust position of a line chart series label using echarts
i have a angular web application with a line graph (using echarts) with multiple series.
the labels of the series are overlapping, is there a way to adjust their position or size etc to prevent them from over lapping ?
my code:
thisInstance._paidUnpaidSplitGraphOptions = {
title: {
text: 'Paid/Unpaid Claims'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['Unpaid Claims', 'Paid Claims']
},
grid: {
left: '5%',
right: '6%',
bottom: '5%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {
title: "Download Image of Chart"
},
dataZoom: {
yAxisIndex: false,
title: { "zoom": "Zoom Chart", "back": "Remove Zoom" }
},
brush: {
type: ['lineX', 'clear'],
title: {
"lineX": "LineX", "clear": "Clear" }
}
}
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: xAxisData
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Paid Claims',
type: 'line',
stack: 'WWWWWWWW',
label: {
position: 'TopLeft',
normal: {
show: true,
formatter: function (data) {
return thisInstance.GetFormattedValue(data);
},
color: '#151515'
}
},
areaStyle: { normal: {} },
data: paidAmounts
},
{
name: 'Unpaid Claims',
type: 'line',
stack: 'WWWWWWWW',
label: {
normal: {
show: true,
formatter: function (data) {
return thisInstance.GetFormattedValue(data);
},
position: 'BottomRight',
color: '#151515'
}
},
areaStyle: { normal: {} },
data: unPaidAmounts
}
]
}
html code:
<div class="clr-row">
<div class="clr-col-2">
</div>
<div class="clr-col-8">
<div echarts [options]="this._appService.GraphsService._paidUnpaidSplitGraphOptions" class="demo-chart"></div>
</div>
<div class="clr-col-2">
<button class="btn btn-outline btn-sm" (click)="this._appService.ClaimCaptureService.GetHpCodesLagReport()"><clr-icon shape="download"></clr-icon>LAG REPORT</button><br />
<button class="btn btn-success-outline btn-sm" (click)="this._appService.ClaimCaptureService.GetHpCodesAgeReport()"><clr-icon shape="download"></clr-icon>AGE ANALYSIS REPORT</button>
</div>
</div>
What i have tried so far is to change the position of the labels as you can see in the above code t making the one 'TopLeft' and the other 'BottomRight', but this didn't seem to help at all the labels are still overlapping.
below is a screenshot of what it looks like
To move text slightly you can use offset: [0,-15], reference.
However you might want to use the label formatter to mask the labels that are under a certain value.
Example
var data = [
[820, 932, 901, 934, 1290, 330, 320],
[0, 0, 0, 0, 0, 900, 1320]
];
var option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {},
itemStyle: {
},
series: [{
data: data[0],
type: "line",
stack: "stack",
color: 'blue',
areaStyle: {
color: 'blue',
opacity: 0.3
},
label: {
position: "top",
offset: [0, -15],
show: true,
}
},
{
data: data[1],
type: "line",
stack: "stack",
areaStyle: {
color: 'red',
opacity: 0.3
},
label: {
position: "top",
show: true,
formatter: function (params) {
return (params.value === 0) ? "" : params.value;
}
}
}
]
}
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
if (option && typeof option === "object")
myChart.setOption(option, true);
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 90%"></div>
</body>
</html>
Stacked line graph with masked labels
You should try avoidLabelOverlap = true
How to remove color label on tool tip?
I am trying to remove the colored label square from the chart tool tip. How can I make that happen in this code with all the other code in tact?
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Title
</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js">
</script>
</head>
<body onLoad="ready()">
<canvas id="myChart" width="600" height="200">
</canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: [], //start empty backgroundColor: '#e8ebf8', borderColor: '#615BD4', borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { display: false, beginAtZero: true } }], xAxes: [{ ticks: { stepSize: 2, maxTicksLimit: 90 } }] }, legend: { display: false }, tooltips: { intersect: false, showTooltips: true, tooltipEvents: ["mousemove", "touchstart", "touchmove"], tooltipFillColor: "rgba(0,0,0,0.8)" } } }); window.onmessage = function(event) { myChart.data.datasets[0].data = event.data.data; myChart.data.labels = event.data.labels; myChart.update(); }; function handleClick(e) { var activeBars = myChart.getElementAtEvent(e); var value = myChart.config.data.datasets[activeBars[0]._datasetIndex].data[activeBars[0]._index]; var label = activeBars[0]._model.label; window.parent.postMessage({ "type": "click", // "label":label, "value": value }, "*"); } function ready() { window.parent.postMessage({ "type": "ready" }, "*"); }
</script>
</body>
</html>
Use the callbacks feature to remove the label:
options: {
legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItem) {
console.log(tooltipItem)
return tooltipItem.yLabel;
}
}
}
}
Collapsed list overflowing
I am working on a school project and I just ran into a problem with a which is collapsed into an input box (I will apply filter list later on) but when this list shows it overflows out of my landing screen and just looks bad. Does anyone have any suggestions to work this out I´m trying to imitate this page (notice how you can click on the input box and the list won't show until the user types something) I did my best to imitate it in my code?
This is an image of my HTML.
$(document).ready(function() {
var header = $('#landing_home');
var backgrounds = new Array(
'url(Recursos/imagenes_bg/bridge.jpeg)', 'url(Recursos/imagenes_bg/lake.jpeg)', 'url(Recursos/imagenes_bg/mountain.jpg)', 'url(Recursos/imagenes_bg/river.jpeg)', 'url(Recursos/imagenes_bg/villa.jpeg)'
);
var current = 0;
//Fuente para animar el fondo: https://stackoverflow.com/questions/53547736/animate-changing-backgrounds , yo hice la pregunta por eso esta mi codigo ahi.
function nextBackground() {
header.animate({
opacity: 0.5
}, 0);
current++;
current = current % backgrounds.length;
//header.fadeTo("slow", 0.5)
header.css('background-image', backgrounds[current]).animate({
opacity: 1
}, 'slow');
//header.fadeTo("slow", 1)
}
setInterval(nextBackground, 7000);
header.css('background-image', backgrounds[0]).animate({
opacity: 1
}, 'slow');
});
body,
html {
height: 100%;
}
.logo {
width: 75%;
height: 75%;
opacity: 1;
}
.home {
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.9;
}
.text_home {
color: white;
font-size: 400%;
font-weight: 500;
text-align: center;
text-shadow: 1px 1px 10px #000000;
}
.form_home {
text-align: center;
}
.form_home input[type=text] {
width: 75%;
box-shadow: 1px 1px 10px #000000;
padding: 8px;
text-align: justify;
font-size: 200%;
}
.form_list {
font-size: 150%;
}
.list-group {
display: block;
margin: 0 auto;
}
.home_jumbo {
background-color: #B1B1B1;
}
<!DOCTYPE html>
<html>
<head>
<title>Trip Guru</title>
<meta charset="utf-8" />
<link href="main.css" rel="stylesheet" />
<link href="Content/bootstrap-grid.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="home" id="landing_home">
<nav class="navbar bg-transparent sticky-top">
<a class="navbar-brand" href="index.html"><img src="Recursos/Logo/logo_white.png" class="logo" /></a>
</nav>
<h1 class="text_home"> Decubre tu siguiente destino </h1>
<div class="form_home">
<input type="text" class="form_home" placeholder="Buscar" data-toggle="collapse" data-target="#paises" />
</div>
<ul class="list-group collapse text-center w-75 form_list" id="paises">
<li class="list-group-item">Rusia</li>
<li class="list-group-item">Corea del Sur</li>
<li class="list-group-item">Japón</li>
<li class="list-group-item">Costa Rica</li>
<li class="list-group-item">Dubai</li>
<li class="list-group-item">Suecia</li>
<li class="list-group-item">Alemania</li>
<li class="list-group-item">Francia</li>
<li class="list-group-item">Brasil</li>
<li class="list-group-item">China</li>
</ul>
</div>
<div class="jumbotron-fluid home_jumbo">
<h1 class="display-1">It overflows here</h1>
</div>
<script src="main_script.js"></script>
<script src="scripts/jquery-3.3.1.min.js"></script>
<script src="scripts/bootstrap.js"></script>
<!--Bootstrap JS-->
</body>
</html>
If I understand correct you just need to insert this part, on the open part: max-height: 500px; overflow-y: auto; this will create a limitation in the size and makes the overflow only in the vertical
I just solved it using this. It hiddes when it overflows vertically and lets you scroll.
.list-group {
cursor:pointer;
height:30%;
display: block;
margin: 0 auto;
overflow-x: hidden;
overflow-y: scroll;
}
If you need autocomplete
const input = $('#autocomplete');
const dropdown = $('#dropdown');
const countries = [{
name: 'Afghanistan',
code: 'AF'
},
{
name: 'Åland Islands',
code: 'AX'
},
{
name: 'Albania',
code: 'AL'
},
{
name: 'Algeria',
code: 'DZ'
},
{
name: 'American Samoa',
code: 'AS'
},
{
name: 'AndorrA',
code: 'AD'
},
{
name: 'Angola',
code: 'AO'
},
{
name: 'Anguilla',
code: 'AI'
},
{
name: 'Antarctica',
code: 'AQ'
},
{
name: 'Antigua and Barbuda',
code: 'AG'
},
{
name: 'Argentina',
code: 'AR'
},
{
name: 'Armenia',
code: 'AM'
},
{
name: 'Aruba',
code: 'AW'
},
{
name: 'Australia',
code: 'AU'
},
{
name: 'Austria',
code: 'AT'
},
{
name: 'Azerbaijan',
code: 'AZ'
},
{
name: 'Bahamas',
code: 'BS'
},
{
name: 'Bahrain',
code: 'BH'
},
{
name: 'Bangladesh',
code: 'BD'
},
{
name: 'Barbados',
code: 'BB'
},
{
name: 'Belarus',
code: 'BY'
},
{
name: 'Belgium',
code: 'BE'
},
{
name: 'Belize',
code: 'BZ'
},
{
name: 'Benin',
code: 'BJ'
},
{
name: 'Bermuda',
code: 'BM'
},
{
name: 'Bhutan',
code: 'BT'
},
{
name: 'Bolivia',
code: 'BO'
},
{
name: 'Bosnia and Herzegovina',
code: 'BA'
},
{
name: 'Botswana',
code: 'BW'
},
{
name: 'Bouvet Island',
code: 'BV'
},
{
name: 'Brazil',
code: 'BR'
},
{
name: 'British Indian Ocean Territory',
code: 'IO'
},
{
name: 'Brunei Darussalam',
code: 'BN'
},
{
name: 'Bulgaria',
code: 'BG'
},
{
name: 'Burkina Faso',
code: 'BF'
},
{
name: 'Burundi',
code: 'BI'
},
{
name: 'Cambodia',
code: 'KH'
},
{
name: 'Cameroon',
code: 'CM'
},
{
name: 'Canada',
code: 'CA'
},
{
name: 'Cape Verde',
code: 'CV'
},
{
name: 'Cayman Islands',
code: 'KY'
},
{
name: 'Central African Republic',
code: 'CF'
},
{
name: 'Chad',
code: 'TD'
},
{
name: 'Chile',
code: 'CL'
},
{
name: 'China',
code: 'CN'
},
{
name: 'Christmas Island',
code: 'CX'
},
{
name: 'Cocos (Keeling) Islands',
code: 'CC'
},
{
name: 'Colombia',
code: 'CO'
},
{
name: 'Comoros',
code: 'KM'
},
{
name: 'Congo',
code: 'CG'
},
{
name: 'Congo, The Democratic Republic of the',
code: 'CD'
},
{
name: 'Cook Islands',
code: 'CK'
},
{
name: 'Costa Rica',
code: 'CR'
},
{
name: 'Cote D\'Ivoire',
code: 'CI'
},
{
name: 'Croatia',
code: 'HR'
},
{
name: 'Cuba',
code: 'CU'
},
{
name: 'Cyprus',
code: 'CY'
},
{
name: 'Czech Republic',
code: 'CZ'
},
{
name: 'Denmark',
code: 'DK'
},
{
name: 'Djibouti',
code: 'DJ'
},
{
name: 'Dominica',
code: 'DM'
},
{
name: 'Dominican Republic',
code: 'DO'
},
{
name: 'Ecuador',
code: 'EC'
},
{
name: 'Egypt',
code: 'EG'
},
{
name: 'El Salvador',
code: 'SV'
},
{
name: 'Equatorial Guinea',
code: 'GQ'
},
{
name: 'Eritrea',
code: 'ER'
},
{
name: 'Estonia',
code: 'EE'
},
{
name: 'Ethiopia',
code: 'ET'
},
{
name: 'Falkland Islands (Malvinas)',
code: 'FK'
},
{
name: 'Faroe Islands',
code: 'FO'
},
{
name: 'Fiji',
code: 'FJ'
},
{
name: 'Finland',
code: 'FI'
},
{
name: 'France',
code: 'FR'
},
{
name: 'French Guiana',
code: 'GF'
},
{
name: 'French Polynesia',
code: 'PF'
},
{
name: 'French Southern Territories',
code: 'TF'
},
{
name: 'Gabon',
code: 'GA'
},
{
name: 'Gambia',
code: 'GM'
},
{
name: 'Georgia',
code: 'GE'
},
{
name: 'Germany',
code: 'DE'
},
{
name: 'Ghana',
code: 'GH'
},
{
name: 'Gibraltar',
code: 'GI'
},
{
name: 'Greece',
code: 'GR'
},
{
name: 'Greenland',
code: 'GL'
},
{
name: 'Grenada',
code: 'GD'
},
{
name: 'Guadeloupe',
code: 'GP'
},
{
name: 'Guam',
code: 'GU'
},
{
name: 'Guatemala',
code: 'GT'
},
{
name: 'Guernsey',
code: 'GG'
},
{
name: 'Guinea',
code: 'GN'
},
{
name: 'Guinea-Bissau',
code: 'GW'
},
{
name: 'Guyana',
code: 'GY'
},
{
name: 'Haiti',
code: 'HT'
},
{
name: 'Heard Island and Mcdonald Islands',
code: 'HM'
},
{
name: 'Holy See (Vatican City State)',
code: 'VA'
},
{
name: 'Honduras',
code: 'HN'
},
{
name: 'Hong Kong',
code: 'HK'
},
{
name: 'Hungary',
code: 'HU'
},
{
name: 'Iceland',
code: 'IS'
},
{
name: 'India',
code: 'IN'
},
{
name: 'Indonesia',
code: 'ID'
},
{
name: 'Iran, Islamic Republic Of',
code: 'IR'
},
{
name: 'Iraq',
code: 'IQ'
},
{
name: 'Ireland',
code: 'IE'
},
{
name: 'Isle of Man',
code: 'IM'
},
{
name: 'Israel',
code: 'IL'
},
{
name: 'Italy',
code: 'IT'
},
{
name: 'Jamaica',
code: 'JM'
},
{
name: 'Japan',
code: 'JP'
},
{
name: 'Jersey',
code: 'JE'
},
{
name: 'Jordan',
code: 'JO'
},
{
name: 'Kazakhstan',
code: 'KZ'
},
{
name: 'Kenya',
code: 'KE'
},
{
name: 'Kiribati',
code: 'KI'
},
{
name: 'Korea, Democratic People\'S Republic of',
code: 'KP'
},
{
name: 'Korea, Republic of',
code: 'KR'
},
{
name: 'Kuwait',
code: 'KW'
},
{
name: 'Kyrgyzstan',
code: 'KG'
},
{
name: 'Lao People\'S Democratic Republic',
code: 'LA'
},
{
name: 'Latvia',
code: 'LV'
},
{
name: 'Lebanon',
code: 'LB'
},
{
name: 'Lesotho',
code: 'LS'
},
{
name: 'Liberia',
code: 'LR'
},
{
name: 'Libyan Arab Jamahiriya',
code: 'LY'
},
{
name: 'Liechtenstein',
code: 'LI'
},
{
name: 'Lithuania',
code: 'LT'
},
{
name: 'Luxembourg',
code: 'LU'
},
{
name: 'Macao',
code: 'MO'
},
{
name: 'Macedonia, The Former Yugoslav Republic of',
code: 'MK'
},
{
name: 'Madagascar',
code: 'MG'
},
{
name: 'Malawi',
code: 'MW'
},
{
name: 'Malaysia',
code: 'MY'
},
{
name: 'Maldives',
code: 'MV'
},
{
name: 'Mali',
code: 'ML'
},
{
name: 'Malta',
code: 'MT'
},
{
name: 'Marshall Islands',
code: 'MH'
},
{
name: 'Martinique',
code: 'MQ'
},
{
name: 'Mauritania',
code: 'MR'
},
{
name: 'Mauritius',
code: 'MU'
},
{
name: 'Mayotte',
code: 'YT'
},
{
name: 'Mexico',
code: 'MX'
},
{
name: 'Micronesia, Federated States of',
code: 'FM'
},
{
name: 'Moldova, Republic of',
code: 'MD'
},
{
name: 'Monaco',
code: 'MC'
},
{
name: 'Mongolia',
code: 'MN'
},
{
name: 'Montserrat',
code: 'MS'
},
{
name: 'Morocco',
code: 'MA'
},
{
name: 'Mozambique',
code: 'MZ'
},
{
name: 'Myanmar',
code: 'MM'
},
{
name: 'Namibia',
code: 'NA'
},
{
name: 'Nauru',
code: 'NR'
},
{
name: 'Nepal',
code: 'NP'
},
{
name: 'Netherlands',
code: 'NL'
},
{
name: 'Netherlands Antilles',
code: 'AN'
},
{
name: 'New Caledonia',
code: 'NC'
},
{
name: 'New Zealand',
code: 'NZ'
},
{
name: 'Nicaragua',
code: 'NI'
},
{
name: 'Niger',
code: 'NE'
},
{
name: 'Nigeria',
code: 'NG'
},
{
name: 'Niue',
code: 'NU'
},
{
name: 'Norfolk Island',
code: 'NF'
},
{
name: 'Northern Mariana Islands',
code: 'MP'
},
{
name: 'Norway',
code: 'NO'
},
{
name: 'Oman',
code: 'OM'
},
{
name: 'Pakistan',
code: 'PK'
},
{
name: 'Palau',
code: 'PW'
},
{
name: 'Palestinian Territory, Occupied',
code: 'PS'
},
{
name: 'Panama',
code: 'PA'
},
{
name: 'Papua New Guinea',
code: 'PG'
},
{
name: 'Paraguay',
code: 'PY'
},
{
name: 'Peru',
code: 'PE'
},
{
name: 'Philippines',
code: 'PH'
},
{
name: 'Pitcairn',
code: 'PN'
},
{
name: 'Poland',
code: 'PL'
},
{
name: 'Portugal',
code: 'PT'
},
{
name: 'Puerto Rico',
code: 'PR'
},
{
name: 'Qatar',
code: 'QA'
},
{
name: 'Reunion',
code: 'RE'
},
{
name: 'Romania',
code: 'RO'
},
{
name: 'Russian Federation',
code: 'RU'
},
{
name: 'RWANDA',
code: 'RW'
},
{
name: 'Saint Helena',
code: 'SH'
},
{
name: 'Saint Kitts and Nevis',
code: 'KN'
},
{
name: 'Saint Lucia',
code: 'LC'
},
{
name: 'Saint Pierre and Miquelon',
code: 'PM'
},
{
name: 'Saint Vincent and the Grenadines',
code: 'VC'
},
{
name: 'Samoa',
code: 'WS'
},
{
name: 'San Marino',
code: 'SM'
},
{
name: 'Sao Tome and Principe',
code: 'ST'
},
{
name: 'Saudi Arabia',
code: 'SA'
},
{
name: 'Senegal',
code: 'SN'
},
{
name: 'Serbia and Montenegro',
code: 'CS'
},
{
name: 'Seychelles',
code: 'SC'
},
{
name: 'Sierra Leone',
code: 'SL'
},
{
name: 'Singapore',
code: 'SG'
},
{
name: 'Slovakia',
code: 'SK'
},
{
name: 'Slovenia',
code: 'SI'
},
{
name: 'Solomon Islands',
code: 'SB'
},
{
name: 'Somalia',
code: 'SO'
},
{
name: 'South Africa',
code: 'ZA'
},
{
name: 'South Georgia and the South Sandwich Islands',
code: 'GS'
},
{
name: 'Spain',
code: 'ES'
},
{
name: 'Sri Lanka',
code: 'LK'
},
{
name: 'Sudan',
code: 'SD'
},
{
name: 'Suriname',
code: 'SR'
},
{
name: 'Svalbard and Jan Mayen',
code: 'SJ'
},
{
name: 'Swaziland',
code: 'SZ'
},
{
name: 'Sweden',
code: 'SE'
},
{
name: 'Switzerland',
code: 'CH'
},
{
name: 'Syrian Arab Republic',
code: 'SY'
},
{
name: 'Taiwan, Province of China',
code: 'TW'
},
{
name: 'Tajikistan',
code: 'TJ'
},
{
name: 'Tanzania, United Republic of',
code: 'TZ'
},
{
name: 'Thailand',
code: 'TH'
},
{
name: 'Timor-Leste',
code: 'TL'
},
{
name: 'Togo',
code: 'TG'
},
{
name: 'Tokelau',
code: 'TK'
},
{
name: 'Tonga',
code: 'TO'
},
{
name: 'Trinidad and Tobago',
code: 'TT'
},
{
name: 'Tunisia',
code: 'TN'
},
{
name: 'Turkey',
code: 'TR'
},
{
name: 'Turkmenistan',
code: 'TM'
},
{
name: 'Turks and Caicos Islands',
code: 'TC'
},
{
name: 'Tuvalu',
code: 'TV'
},
{
name: 'Uganda',
code: 'UG'
},
{
name: 'Ukraine',
code: 'UA'
},
{
name: 'United Arab Emirates',
code: 'AE'
},
{
name: 'United Kingdom',
code: 'GB'
},
{
name: 'United States',
code: 'US'
},
{
name: 'United States Minor Outlying Islands',
code: 'UM'
},
{
name: 'Uruguay',
code: 'UY'
},
{
name: 'Uzbekistan',
code: 'UZ'
},
{
name: 'Vanuatu',
code: 'VU'
},
{
name: 'Venezuela',
code: 'VE'
},
{
name: 'Viet Nam',
code: 'VN'
},
{
name: 'Virgin Islands, British',
code: 'VG'
},
{
name: 'Virgin Islands, U.S.',
code: 'VI'
},
{
name: 'Wallis and Futuna',
code: 'WF'
},
{
name: 'Western Sahara',
code: 'EH'
},
{
name: 'Yemen',
code: 'YE'
},
{
name: 'Zambia',
code: 'ZM'
},
{
name: 'Zimbabwe',
code: 'ZW'
}
];
input.on('input', () => {
dropdown.html('');
countries.map((country) => {
if (country.name.toLowerCase().includes(input.val().toLowerCase())) {
dropdown.append(`
<div class="list-group-item">
${country.name}
</div>
`);
}
});
$('.list-group-item').on('click', (e) => {
input.val(e.target.innerText);
dropdown.html('');
});
});
.dropdown-wrapper {
max-height: 300px;
overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<input id="autocomplete" class="form-control">
<div class="dropdown-wrapper">
<div id="dropdown" class="list-group">
</div>
Load data from json file with listAction on jTable
I m a new bee in java...
cant work it out and i m sure its very easy so i was wondering if anyone can help me,,pleaseee...
so, i want to view my json data in html using jTable pluging ,,,please some help
using netbeans my test.json file is in the format
{
"Result": "OK",
"TotalRecordCount": 23,
"Records": [
{
"vEmail": "miad#gmail1.com",
"vUserName": "admin",
"nDepartmentId": "652",
"nEnabled": "1",
"department": 62,
"vFatherName": "mixalis",
"vSurname": "mixalis",
"vAfm": "5678678",
"vUsertype": "",
"vName": "mixalis",
"nId": "5651",
"rolesDesc": ""
},
and so on on my code usng the listAction url and the load method but i m missing smthg here??what is it?is it a bracket?is it a plane?is it a train?no its superman..(that was a joke),
my code
<link rel="stylesheet" href="/test/css/template.css" type="text/css" />
<!-- Include one of jTable styles. -->
<link href="/test/jtable/themes/metro/blue/jtable.min.css" rel="stylesheet" type="text/css" />
<!-- Include jTable script file. -->
<script src="/test/jtable/jquery.jtable.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#PersonTableContainer').jtable({
title: 'Kyriakos Test with Table of Persons',
actions: {
listAction: '/test/test.json'
},
fields: {
PersonId: {
key: true,
list: false
},
vEmail: {
title: 'Email',
width: '8.3%'
},
vUserName: {
title: 'User Name',
width: '8.3%'
},
nDepartment: {
title: 'Department',
width: '8.3%'
},
nEnabled: {
title: 'Enabled',
width: '8.3%'
},
department: {
title: 'Department',
width: '8.3%'
},
vFatherName: {
title: 'Father Name',
width: '8.3%'
},
vSurname: {
title: 'Surname',
width: '8.3%'
},
vAfm: {
title: 'Afm',
width: '8.3%'
},
vUsertype: {
title: 'User Type',
width: '8.3%'
},
vName: {
title: 'Name',
width: '8.3%'
},
nId: {
title: 'Id',
width: '8.3%'
},
rolesDesc: {
title: 'Roles Desc',
width: '8.3%'
}
}
$('#PersonTableContainer').jtable('load');
});
});
</head>
<body>
<div id="PersonTableContainer"></div>
</body>
</html>
what were?? oohh i m confused...
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href="/test/css/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="/test/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="/test/js/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="/test/css/template.css" type="text/css" />
<!-- Include one of jTable styles. -->
<link href="/test/jtable/themes/metro/blue/jtable.min.css" rel="stylesheet" type="text/css" />
<!-- Include jTable script file. -->
<script src="/test/jtable/jquery.jtable.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#PersonTableContainer').jtable({
title: 'Kyriakos Test with Table of Persons',
actions: {
listAction: '/test/test.json',
createAction: '/GettingStarted/CreatePerson',
updateAction: '/GettingStarted/UpdatePerson',
deleteAction: '/GettingStarted/DeletePerson'
},
fields: {
PersonId: {
key: true,
list: false
},
vEmail: {
title: 'Email',
width: '8.3%'
},
vUserName: {
title: 'User Name',
width: '8.3%'
},
nDepartment: {
title: 'Department',
width: '8.3%'
},
nEnabled: {
title: 'Enabled',
width: '8.3%'
},
department: {
title: 'Department',
width: '8.3%'
},
vFatherName: {
title: 'Father Name',
width: '8.3%'
},
vSurname: {
title: 'Surname',
width: '8.3%'
},
vAfm: {
title: 'Afm',
width: '8.3%'
},
vUsertype: {
title: 'User Type',
width: '8.3%'
},
vName: {
title: 'Name',
width: '8.3%'
},
nId: {
title: 'Id',
width: '8.3%'
},
rolesDesc: {
title: 'Roles Desc',
width: '8.3%'
}
}
});
$('#PersonTableContainer').jtable('load');
});
</script>
</head>
<body>
<div id="PersonTableContainer"></div>
</body>
</html>