I'm creating labels for polygons with the following code:
L.marker(polygon.getBounds().getCenter())
.bindTooltip('County Name', {permanent: true, direction: 'center'})
.addTo(mymap);
However, the result isn't exactly what I'd call centered. Like the majority of the tooltip is on the right side of the marker whereas I'd expect the marker to be smack dab in the middle of the tooltip.
Any ideas as to what I can do to improve the situation?
If I can get this working I'll hide the marker by doing {opacity: 0} but if I do that now it'll look off center without a frame of reference.
If you want to add labels to the polygon you can use instead customised Tooltip.
In your Javascript code :
let custom_popup = L.popup()
.setLatLng(polygon.getBounds().getCenter())
.setContent('County name')
.addTo(map);
Then you can customise to make it look like a Marker using CSS :
.leaflet-popup-close-button // we remove the X to close the popup
{
display: none;
}
.leaflet-popup-tip // We remove the arrow pointing at the coordinates
{
display: none;
}
.leaflet-popup-content // We center the text inside the Tooltip
{
text-align: center;
}
Here's the result :
Related
I can't find a good way to size the grid to fit all rows perfectly.
documentation only points to sizing by % or px.
Since I want it to size based on rows, I came up with the following function. Seem like im re-inventing the wheel, so maybe there is a better way?
getHeight(type:EntityType) {
var c = this.Apis[type] && this.Apis[type].api && this.Apis[type].api.rowModel // get api for current grid
? this.Apis[type].api.rowModel.rowsToDisplay.length
: -1;
return c > 0
? (40+(c*21))+'px' // not perfect but close formula for grid height
: '86%';
}
there has to be a less messy way..
I came across this solution:
https://github.com/ag-grid/ag-grid/issues/801
There are 2 answers to this problem.
1) If you are using anything below v10.1.0, then you can use the following CSS to achieve the problem:
.ag-scrolls {
height: auto !important;
}
.ag-body {
position: relative !important;
top: auto !important;
height: auto !important;
}
.ag-header {
position: relative !important;
}
.ag-floating-top {
position: relative !important;
top: auto !important;
}
.ag-floating-bottom {
position: relative !important;
top: auto !important;
}
.ag-bl-normal-east,
.ag-bl-normal,
.ag-bl-normal-center,
.ag-bl-normal-center-row,
.ag-bl-full-height,
.ag-bl-full-height-center,
.ag-pinned-left-cols-viewport,
.ag-pinned-right-cols-viewport,
.ag-body-viewport-wrapper,
.ag-body-viewport {
height: auto !important;
}
2) Anything above v10.1.0, there is now a property called 'domLayout'.
https://www.ag-grid.com/javascript-grid-width-and-height/#autoHeight
If the following is the markup
<ag-grid-angular
#agGrid
id="myGrid"
class="ag-theme-balham"
[columnDefs]="columnDefs"
[rowData]="rowData"
[domLayout]="domLayout"
[animateRows]="true"
(gridReady)="onGridReady($event)"
></ag-grid-angular>
Note that [domLayout]="domLayout"
set it as this.domLayout = "autoHeight"; and you're done..
Ref:
https://www.ag-grid.com/javascript-grid-width-and-height/
https://next.plnkr.co/edit/Jb1TD7gbA4w7yclU
Hope it helps.
You can now automate grid height by setting the domLayout='autoHeight' property, or by calling api.setDomLayout('autoHeight')
reference Grid Auto Height
Add the following code on onGridReady function for auto width and auto height
onGridReady = params => {
// Following line to make the currently visible columns fit the screen
params.api.sizeColumnsToFit();
// Following line dymanic set height to row on content
params.api.resetRowHeights();
};
reference
Auto Height
Auto width
determineHeight() {
setTimeout(() => {
console.log(this.gridApi.getDisplayedRowCount());
if (this.gridApi.getDisplayedRowCount() < 20) {
this.gridApi.setDomLayout("autoHeight");
}
else {
this.gridApi.setDomLayout("normal");
document.getElementById('myGrid').style.height = "600px";
}
}, 500);
}
You can use ag-grid feature AutoHeight = true in the column Configuration. or if you want to calculate the height dynamically you should use getRowHeight() callback and create DOM elements like div and span, and add your text in it, then the div will give the OffsetHeight for it then you wont see any cropping of data/rows.
Hope this helps.
I cannot find an example to do this anywhere, although I could have sworn I've seen one in the past.
I want to add a button to a node in fancytree so that either on hovering over that node (or maybe on selecting it) the button displays (a white x on a red circle, for example) and clicking it will delete/remove that node. At all other times the delete button should be hidden for the node.
I've been unable to find any kind of example where a custom link or button is added to a fancytree node though - maybe it's not possible to do or I'm just using the wrong search terms?
Edit: I found a way to add a clickable button by appending html to the title string:
title: component.name() + "<span class='deleteButton'><a href='#' data-bind='click: myfunction'><img src='../../Content/images/deleteIcon.png' /></a></span>",
And by adding some custom css to my site file:
span.fancytree-node span.deleteButton {
display: none;
}
span.fancytree-active span.deleteButton {
margin-left: 10px;
display: inline-block;
}
But this adds the button to the title text and is therefore subject to the highlighting of the title when active. It would be better if there was a way to add this to the node OUTSIDE of the title text. Is that possible Martin?
$("#tree").fancytree({
source: [...],
renderNode: function (event, data) {
var node = data.node;
var $nodeSpan = $(node.span);
// check if span of node already rendered
if (!$nodeSpan.data('rendered')) {
var deleteButton = $('<button type="button" class="btn">delete node</button>');
$nodeSpan.append(deleteButton);
deleteButton.hide();
$nodeSpan.hover(function () {
// mouse over
deleteButton.show();
}, function () {
// mouse out
deleteButton.hide();
})
// span rendered
$nodeSpan.data('rendered', true);
}
}
});
I normally use css ':after' for such cases (https://developer.mozilla.org/de/docs/Web/CSS/::after).
If that is not enough, you can always tweak the markup in the 'renderNode' event.
When I click on a button, a Flyout will appear for confirmation on the top of the button I have just clicked on.
I tried this :
flyout.alignment="center"
but the alignment is by the button. I want to show my flyout in the center of my screen. I'm asking if this is possible with Winjs.UI.Flyout
Flyout is always aligned wrt to the element passed as the first parameter. If you need to have the flyout not aligned to the element but at the center of the screen, it can be done by placing an hidden element at the center of the screen and aligning the flyout to it.
_oncmdclick: function oncmdclick(event)
{
// assume an element with class hidden in the page and placed at center of the screen
var hiddenElement = this.element.querySelector('.hidden');
var myFlyoutElement = ...; // myFlyoutElement is the flyout element
this.newItemFlyoutElement.winControl.show(hiddenElement, 'top', 'center');
},
html:
<div class="hidden" style="visibility: collapse"></div>
css:
// in this case, I had used 1x1 -ms-grid for the section of the page
.mypage.fragment section[role=main] {
display: -ms-grid;
-ms-grid-rows: 1fr;
-ms-grid-columns: 1fr;
}
// center the hidden element in the page grid
.mypage.fragment section[role=main] .hidden
{
-ms-grid-column-align: center;
-ms-grid-row-align: center;
}
So, I have a SplitLayoutPanel, and need a blinked dragger. Is there any possibility to achive it? With CSS, of hardcode, whatever?
Note - Purely css effects would be cpu intensive and hence I would go for a gif based solution.
Problem
The split layout panel uses two images to provide for horizontal and vertical splitter. These are png images and cannot be animated (blinking effect).
Solution
You can get blinking effect by using animated gif images.
You need to find a replacement "gif" image for both these which blinks. Then override the basic gwt styles and ensure you have !important suffixed to the styles that are overriden.
.gwt-SplitLayoutPanel-HDragger {
background: #e7e7e7 url(images/thumb_vertical_blinking.gif) center center no-repeat !important;
cursor: col-resize;
}
.gwt-SplitLayoutPanel-VDragger {
background: #e7e7e7 url(images/thumb_horz_blinking.gif) center center no-repeat !important;
cursor: row-resize;
}
Yes,There is a possibility to achieve that by overriding the default styles
.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-HDragger { horizontal dragger }
.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-VDragger { vertical dragger }
.gwt-SplitLayoutPanel-VDragger {
// your set of styles while dragging
}
.gwt-SplitLayoutPanel-HDragger {
// your set of styles while dragging
}
I used the JScrollPane from http://jscrollpane.kelvinluck.com/ and modified it to hide the arrow key when scrolling at the end (top or bottom). When scrollbar is at the top, the arrowUp should disappear, showing only arrowDown at the bottom and appears again when scrolling down.
I've made the arrow image disappear at the top, but the problem is the scroll track does not change but just adds extra space equal to the size of the arrow image at the very bottom. How can I go around this, how do I change it so that when the arrow is hidden at one end, the jspTrack's height is adjusted as well, showing the other arrow on the opposite end without extra space?
if (settings.showArrows) {
if(isAtTop){
arrowUp.addClass('jspDisabled');
arrowUp.css('display', 'none');
}
else{
arrowUp.removeClass('jspDisabled');
arrowUp.css('display', 'block');
}
if(isAtBottom){
arrowDown.addClass('jspDisabled');
arrowDown.css('display', 'none');
}
else{
arrowUp.removeClass('jspDisabled');
arrowDown.css('display', 'block');
}
/*arrowUp[isAtTop ? 'addClass' : 'removeClass']('jspDisabled');
arrowDown[isAtBottom ? 'addClass' : 'removeClass']('jspDisabled');*/
}
Thanks all.
you can control it via css
<style>
.jspVerticalBar{
background:none;
}
.jspVerticalBar .jspArrow{
display:block;
}
.jspVerticalBar .jspDisabled
{
display:none;
}
</style>
JavaScript:
<script>
$('.pane').jScrollPane({showArrows:true});
</script>