I'm learning ag-grid to display data into a grid. I've just started with a simple example to display simple data to cell using cellRenderer. You can exam on the code here:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script>
var __basePath = '';
</script>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
span.cell1 {
position: relative;
float: left;
top: 50%;
left: 10%;
transform: translate(50%, -50%);
}
</style>
<script src="https://unpkg.com/ag-grid-community#20.2.0/dist/ag-grid-community.min.js">
</script>
</head>
<body>
<div id="myGrid" style="height: 100%;" class="ag-theme-balham"></div>
<script src="main.js">
</script>
</body>
</html>
main.js:
var columnDefs = [
{
field: 'gold',
cellRenderer: params => {
return '<span class="cell1">' + params.data.gold + '</span>';
},
editable: true,
},
];
var gridOptions = {
rowHeight: 60,
columnDefs: columnDefs,
};
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
agGrid
.simpleHttpRequest({
url:
'https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json',
})
.then(function(data) {
gridOptions.api.setRowData(data);
});
});
Please note the css I used:
span.cell1 {
position: relative;
float: left;
top: 50%;
left: 10%;
transform: translate(50%, -50%);
}
I want to display the data in the middle of the cell (css: top: 50%;) so I tried with above css. But after edited, the cell didn't show as expected. Please help!
Render at start:
Render at editting:
Render after editted:
You need to update your CSS. Give height and line-height properties for span.cell1 the same number which you provide to your rowHeight.
span.cell1 {
height: 60px;
line-height: 60px;
text-align: center;
}
Have a look at the updated plunk: https://next.plnkr.co/edit/4HHSANMjCpRkTdmm
Related
How can we add tinymce editor in the place of editor present in the cell of ag-grid?
In order to customize ag-grid's cell's you need to create a custom Cell Renderer component.
You can pretty much put anything you want in that custom component, including tinyMCE.
More info: https://www.ag-grid.com/javascript-grid-cell-rendering-components/
Please see Cell Renderer
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script>var __basePath = './';</script>
<style media="only screen">
html, body {
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
html {
position: absolute;
top: 0;
left: 0;
padding: 0;
overflow: auto;
}
body {
padding: 1rem;
overflow: auto;
}
</style>
<script src="https://unpkg.com/#ag-grid-community/all-modules#24.1.0/dist/ag-grid-community.min.js"></script>
</head>
<body>
<div id="myGrid" style="height: 100%;width: 100%" class="ag-theme-alpine"></div>
<script src="main.js"></script>
</body>
</html>
main.js
var columnDefs = [
{ field: 'athlete' },
{ field: 'country' },
{ field: 'year', width: 100 },
{ field: 'gold', width: 100, cellRenderer: 'medalCellRenderer' },
{ field: 'silver', width: 100, cellRenderer: 'medalCellRenderer' },
{ field: 'bronze', width: 100, cellRenderer: 'medalCellRenderer' },
{ field: 'total', width: 100 }
];
var gridOptions = {
columnDefs: columnDefs,
components: {
'medalCellRenderer': MedalCellRenderer
},
defaultColDef: {
editable: true,
sortable: true,
flex: 1,
minWidth: 100,
filter: true,
resizable: true
}
};
// cell renderer class
function MedalCellRenderer() {
}
// init method gets the details of the cell to be renderer
MedalCellRenderer.prototype.init = function(params) {
this.eGui = document.createElement('span');
var text = '';
// one star for each medal
for (var i = 0; i < params.value; i++) {
text += '#';
}
this.eGui.innerHTML = text;
};
MedalCellRenderer.prototype.getGui = function() {
return this.eGui;
};
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
agGrid.simpleHttpRequest({ url: 'https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/olympicWinnersSmall.json' })
.then(function(data) {
gridOptions.api.setRowData(data);
});
});
I have created popup with an overlay. In the pop-up, I'm having one text field in which i am getting location from google API. But, the location suggestion is going behind the overlay. How to make it visible in front? Can anyone help in this? It looks like
Image of the Location suggestion:
My code is as follows.
<html>
<head>
<style>
body.no-scroll{
overflow-y: hidden;
}
.overlay{
position: fixed;
left: 0;
top: 0;
margin: auto;
z-index: 100000;
background: rgba(0,0,0,0.8);
width: 100%;
height: 100vh;
text-align: center;
}
.overlay-image{
position: absolute;
left: 0;
right: 0;
top: 50%;
margin: auto;
max-width: 90%;
width: auto;
height: auto;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
if(window.location.href.indexOf("&utm_source=facebook") > -1) {
$('body').addClass('no-scroll');
$('.overlay').show();
}
$(document).on('click', 'body.no-scroll', function (e) {
$('.overlay').hide();
$('body').removeClass('no-scroll');
});
});
</script>
</head>
<body>
<div class="overlay">
<div class="overlay-image">
<form action="" method="post">
<input type="text" name="city" id="txtPlaces">
<button type="submit">Search</button>
</form>
</div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=xxxxxxxx"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function () {
var places = new google.maps.places.Autocomplete(document.getElementById('txtPlaces'));
google.maps.event.addListener(places, 'place_changed', function () {
var place = places.getPlace();
var address = place.formatted_address;
var latitude = place.geometry.location.A;
var longitude = place.geometry.location.F;
var mesg = "Address: " + address;
});
});
</script>
</div>
</body>
</html>
What I need to add or change to bring the location suggestions to be visible in front?
After reading http://www.polymer-project.org/docs/elements/core-elements.html#core-transition I am trying the following but I am doing something wrong or did not understand it. When I click on my red test square nothing happens except for my console log message?
<link href="components/core-transition/core-transition-css.html" rel="import">
<polymer-element name="story-1">
<template>
<style>
:host {
position:absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
font-family: 'RobotoDraft', sans-serif;
}
#container {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.card {
position: relative;
height: 150px;
width: 150px;
font-size: 50px;
margin: 8px;
background-color: tomato;
border-radius: 4px;
cursor: default;
}
</style>
<div id="container" flex horizontal wrap around-justified layout>
<div class="card" id="animate-me" vertical center center-justified layout on-tap="{{ani}}">
test
</div>
</div>
</template>
<script>
Polymer('story-1', {
ani: function() {
console.log('???')
var target = document.getElementById('animate-me');
var meta = document.createElement('core-meta');
meta.type = 'transition';
transition = meta.byId('core-transition-fade');
transition.go(target, true);
}
});
</script>
</polymer-element>
This is the part I got wrong
<script>
Polymer('story-1', {
ani: function() {
var target = this.$.animate_me;
var meta = document.createElement('core-meta');
meta.type = 'transition';
transition = meta.byId('core-transition-fade');
transition.setup(target);
transition.go(target, true);
}
});
</script>
As far as I can tell from the documentation transition.setup(target, true); is not mentioned in the example. I had to figure that out from the demo source code.
(see https://github.com/Polymer/core-transition/issues/4)
I was make Street view containers. I was see that link.
But i cannot see Street view in my browser /Google chrome/
Please teach me my mistake and my error.
Thank you
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>アスタンソーチのGoogle-APIです。</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var fenway = new google.maps.LatLng(32.785473,129.862451);
var panoramaOptions = {
position: fenway,
pov: {
heading: 165,
pitch: 0
},
zoom: 1
};
var myPano = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'),
panoramaOptions);
myPano.setVisible(true);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
I had the same problem.
The problem is in the following line at the top
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
when your website is hosted on your own server location, your map page cannot find the css file.
you need to add the following css to your file;
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas, #map_canvas {
height: 100%;
}
#media print {
html, body {
height: auto;
}
#map-canvas, #map_canvas {
height: 650px;
}
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
or you need to add it to a new file called default.css located at yourwebsitesAddress.com//\maps/documentation/javascript/examples/default.css
Is there a way to place a div inside body, centered, with given left-right margins equal to x and top-bottom margins, equal to y? Nothing except of the div (and its children) is presented in the document.
UPDATE. I want the following:
Also, I'd be glad to have a more common solution for the case, when x1 != x2, y1 != y2 (though a solution for my particular case x1==x2, y1==y2 is appreciated).
Better solution(?):
Set margin-left and margin-right for the div to "auto"
You can use fixed positioning. It won’t work in IE6, though.
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='de' lang='de'>
<head>
<meta charset='utf-8' />
<title>Test</title>
<style>
#bla {
position: fixed;
top: 30px;
left: 60px;
right: 60px;
bottom: 30px;
background: yellow;
}
</style>
</head>
<body>
<div id='blah'>
</div>
</body>
</html>
See it in action: http://obda.net/stackoverflow/position-fixed.html
The best I can do without CSS3 is to use two divs.
html {
width: 100%;
height: 100%;
}
body {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div.parent {
display: inline-block;
position: relative;
left: 50%;
top: 50%;
}
div.child {
width: 100px;
margin-left: -50%;
margin-top: -50%;
border: 1px solid #000;
}
You can see it here: http://jsfiddle.net/CatChen/VGpdv/4/
Update: If CSS3 implementation is acceptable, it's a lot easier:
http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center
You will have to use javascript if you want the margins to be the same in all browzers.
<body>
<div id="the_div" style="margin: 20 auto;margin-bottom:0;width:300px;">
</div>
<script type="text/javascript">
var dim = (function () {
var _pW, _pH;
if (document.body && document.body.offsetWidth) {
_pW = document.body.offsetWidth;
_pH = document.body.offsetHeight;
}
if (document.compatMode == 'CSS1Compat' &&
document.documentElement && document.documentElement.offsetWidth) {
_pW = document.documentElement.offsetWidth;
_pH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
_pW = window.innerWidth;
_pH = window.innerHeight;
}
return { width : _pW, height : _pH };
})();
var div = document.getElementById( "the_div" );
div.style.height = dim.height - 20 + "px";
</script>
<body>