In IE9+, the point labels seem to only occupy the 4th quadrant of the chart (as if the entire chart was scaled down) when using jqplotToImageStr. The chart displays normally otherwise (within the page when divs are used for the labels I believe)
Fixed it by adding the css rule:
.jqplot-point-label {
text-align: left;
}
this is because the toimage function has a handler for center aligned text (which is the default), which is causing things to be positioned incorrectly.
The culprit:
if ($(el).css('textAlign') === 'center') {
templeft = left + (canvasWidth - context.measureText(w).width)/2 - transx;
}
In chrome the textAlign property actually comes up as -webkit-center, and is thus ignored.
Related
I have a rectangle and a text created through D3 which are grouped together like below.
<g>
<rect></rect>
<text></text>
</g>
In a javascript function I'm expanding this rectangle's width to allow the the value of text to be displayed in one go. (If the value is too long as the text value is set dynamically). This is working fine. However even though the rectangle width is expanding depending on the text value size , D3 text element is not showing the complete text value that is added, eventually the text is moved to left and the first bit of it can't be seen.
Do I need to increase the text element's width too or what would be the solution for this?
[UPDATE]
Following is the current code.
var elms = d3.selectAll("[id=s]"); // has the rectangle and text elements
var s = d3.selectAll("[id=s]").selectAll("text"); // just the text elements
var minimumValue = 100;
// updating rectangle width
elms.attr('width', function() { return dynamic < minimumValue ? minimumValue : dynamic;});
Now I need a way to update the position of the text element when the rectangle is expanded. Hope this is more clear. I just tried manually updating 'x' property of text element that works. But can I derive this value dynamically to set it within this function?
In case someone is looking for this, was able to get the text new 'x' value by x of rectangle + half of rectangle's width (and similar for y but with the height).
Got the answer from this link (How to place and center text in an SVG rectangle)
I'm using Waypoints and their Sticky shortcut to 'stick' an element with the id stick-this to the top of the viewport once it gets scrolled past. I am having some difficulty positioning the element past another fixed element on the screen, however.
There is a <div> with a class .header which always remains fixed. I am trying to position the top of the new element to the height() of the .header element so they are 'stacked' on top of one another and both visible. This is the code I am using to accomplish this:
var sticky = new Waypoint.Sticky({
element: $('#stick-this')[0],
handler: function() {
$(".stuck").css({ "top" : $(".header").height() });
}
})
So, essentially, once the #stick-this is scrolled past, it becomes sticky with a position:fixed class and the top is dynamically determined by the height() of .header.
This works great until I scroll back up, and the top style is still applied to this element, in spite of the stuck class not being applied anymore.
So when I scroll past, the element ends up like this
<div id="stick-this" class="stuck" style="top:70px /*or whatever the height() ends up being */">
and when I scroll back up the element ends up like this with the top property still in place
<div id="stick-this" class="" style="top:70px /*I need this back to 0px */">
Is it possible to have a function called when the "sticky" is removed, so that the inline style property can be set to top:0px or something like that?
For anyone else struggling with this, I ended up dynamically writing the CSS when the sticky element's class is initiated and inserting it into the head:
var sticky = new Waypoint.Sticky({
element: $('#stick-this')[0],
offset: $('.header').outerHeight(true),
handler: function(direction) {
$("<style>")
.prop("type", "text/css")
.html("\
.stuck {\
position: fixed;\
top:" + $(".header").height() + "px;\
}")
.appendTo("head");
}
})
so, the class will be added with the correct top positioning, and once the class is removed, the top property is inherently returned back to 0px.
It's important to have the \ after each line break in the .html() portion of this code in order for it to work.
Here is the plunker created http://plnkr.co/edit/5DhDmI1Odhrys4jYDwIB?p=preview
I have associated textbox with ng-grid filter.
$scope.filterOptions = {
filterText:''
}
$scope.$watch('filterText',function(){
$scope.filterOptions.filterText=$scope.filterText;
});
If you enter "moroni" in the text box, only one row in grid will be displayed. But at the right, white space is visible. Is there a way to fix it.
First row in the plunker example is having very big string, When text is very long, only part of it is displayed. Is it possible to break the string and display it in multiple lines.
You can fix the text not wrapping issue by setting the rowHeight in gridoptions to value that fits your longest string:
rowHeight:50
And add this definition to your css:
.ngCellText {
white-space: unset;
}
The width whitespace issue is clearly a bug in ng-grid. This grid is not really a table but a lot of positioned and measured divs that look like a table. Seems the developers forgot to add some extra width to the row when no scrollbar is visible. You can only overcome this if you patch the code (not recommended) or setting the gridheight to a value in which all rows can be displayed without scrollbars.
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 500px;
height: 300px
}
Look at this Plunker.
Anyhow, since these are mere unpractical hacks, I suggest you have a look at table based directive like trNgGrid which has all the features of ng-grid but is way more flexible when it comes to dynamic row heights.
I'm using kendo tooltips on a graphic (within an anchor link) which is 24px tall. Accordingly, when the tooltip shows up (default position of bottom), it covers the bottom third of the graphic and so the bottom third of the graphic can't be clicked.
I can do the following:
.k-tooltip {
margin-top: 8px;
}
But the problem with this is that if the tooltip is on a graphic at the bottom of the page, the position will be "top" instead of "bottom" but it'll now be covering about 1/2 the graphic instead of just a third because it's still being pushed down by 8px.
What I'd like is if the position is bottom, then the margin-top is 8px, but if the position is top, the the margin-bottom is 8px.
Thanks for any help you can provide!
Billy McCafferty
Would this one help you?
http://dojo.telerik.com/amoZE/5
var tooltip = $("#demo").kendoTooltip({
filter: "a",
show: function (e) {
var position = e.sender.options.position;
if (position == "bottom") {
e.sender.popup.element.css("margin-top", "10px");
} else if(position == "top") {
e.sender.popup.element.css("margin-bottom", "10px");
}
}
}).data("kendoTooltip");
Thank you for your answer, jarno-lahtinen. It was very helpful!
Two problems came up with it and I would like to document the solutions here:
1. Property Error in Typescript
I am using TS and it gave me the following error:
"Property popup does not exist on type Tooltip" for e.sender.popup. I am not sure if this is due to a newer version of Kendo, or of missing type definitions.
Solution:
you can use this.popup instead.
2. Not working for position: "top"
Unfortunately, the "margin-bottom" has absolutely no effect because the popup is positioned "absolute" using top/left.
Solution:
this.popup.element.css("margin-top", "-10px");
This will shift the popup upwards by 10 pixels
When I have a result set with several hundred columns, the header wraps back to the left side of the web page and takes up two rows. The correlation between header positions and column positions in the data also is not correct toward the end of the first line of header cells.
It appears that the width of the header is fixed to 10000px and the width of the row cells can be much wider and this is what is causing the rendering problem.
The style for slick-header-columns is set explicitly by slick.grid.js to: style="width: 10000px; left: -1000px".
When I inspect the css via firebug in this wrapping state, I see that the width of each slick-row is set to: 12805px. When I manually change the width of the slick-header-columns width to 15000px, the rendering is correct and the header no longer wraps.
Is there a way to programatically update the header width so that it can hold all of the column cells?
My solution to this problem was to modify the setCanvasWidth function in slick.grid.js so that it updates the header width as well as the canvas width:
function setCanvasWidth(width) {
$canvas.width(width);
if (width > $headers.width()) {
$headers.width(width + 1000);
}
viewportHasHScroll = (width > viewportW - scrollbarDimensions.width);
}