Short version: is it possible to offset a chart legend in JavaFX, i.e. left align a bottom legend or shift the legend 20px off of center? It does not look possible with either Java code or with CSS, from looking through the JavaFX documentation or just general Google searching.
Longer version:
Let's say that, for example, I have a chart showing 3-phase AC power utilization on say, 4 different breakers. I want to show both the total percent utilization of the circuit and the percent that is being used of each individual phase on "one chart". So I take two different bar charts and stack them ending up with something like below:
Example chart
However, because the overall utilization and the phase utilization are in different charts, they have different legends. Because the phase chart is on top of the overall chart, we can't see the legend for the overall utilization chart. So then, is it possible to offset to two legends so that both are visible, as in the following image (it's photo-edited):
Example of desired result
Is this possible, or is this just a dumb approach, as in, is there a better way to get this or other similar result? Any thoughts would be appreciated.
Not so elegant, hard coded but straightforward way seems again to play with CSS:
/* The default css of chart legend in caspian. */
.chart-legend {
-fx-background-color: #cccccc, #eeeeee;
-fx-background-insets: 0,1;
-fx-background-radius: 6,5;
-fx-padding: 6px;
}
/* We customize the above default background-color to transparent for
the chart legend on the right side, in our own CSS file. */
#my-legend-on-the-right-side .chart-legend {
-fx-background-color: transparent;
-fx-background-insets: 0,1;
-fx-background-radius: 6,5;
-fx-padding: 6px;
}
/* Then we customize the legend on the left side by padding
it to the left while its background covers the legend on the right. */
#my-legend-on-the-left-side .chart-legend {
-fx-background-color: #cccccc, #eeeeee;
-fx-background-insets: 0,1;
-fx-background-radius: 6,5;
-fx-padding: 6px 300px 6px 6px;
}
Use them by setting ids:
barChartTotal.setId("my-legend-on-the-left-side");
barChartPhases.setId("my-legend-on-the-right-side");
Related
Using Angular 11 and AG Grid.
I'd like to turn on vertical column lines between the cells. I see that I can style my own cells with cellStyle or cellClass … but is this the appropriate way to do it?
I could style something like …
{ border-right: 1px solid; }
Is there not an API/option to toggle an option like this on/off? Doesn't make sense that row lines are automatic but column lines need to be manually styled. How am I supposed to know what the row color is to match it?
I had the same issue. And I came to the same conclusion - that I had to include a style to achieve this as I couldn't find an option to toggle them on.
Instead of styling the cells with my own class, I overrode all the cells with an appropriate colour:
.ag-theme-balham .ag-header-cell,
.ag-theme-balham .ag-header-group-cell,
.ag-theme-balham .ag-ltr .ag-cell {
border-right: 1px solid #D9DDDF;
}
(We've restyled the grid so alternate and selected rows are a different colour to standard, so this colour may not look correct for your colour scheme)
I have a full screen map with a sibling div that appears "above" the map. The div is a full width 3 column flex, the left and right columns contain information panels (green in the diagram), the centre one is empty (pink in the diagram):
As far as the user is concerned, the pink column doesn't exist.
The problem I'm facing is that the center column is blocking drag events on the map, moving the mouse over it changes the pointer from a drag handle to a pointer.
It seems the standard solution for this is to add
pointer-events: none;
to the blocking div. I've tried this and it seems to make no difference, so I'm wondering if there's some Leaflet specific knowledge I'm lacking in regard to this.
Anyone got any ideas? Any suggestions welcome! :)
May be you can giving the center column a class.
for example:
class "center-column"
and put some css rule, like this:
.center-column {
position: relative;
z-index: -10;
}
Turns out it was due to a mistake I made. Since my map was full screen, I've given it's container the following styles:
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: -5000;
It looks like reducing the z-index of the map to be underneath the panels was the wrong way to do it. Removing the z-index: -5000, and increasing the z-index of the panels resulted in the same display, but without the problem!
How can I draw a line with mobile safari that is one real pixel wide on a retina display?
I tried:
border-bottom:0.5px solid #fff;
and
border-bottom:0.05em solid #fff;
with different values between 0.01em and 0.1em.
Mobile Safari always draws a line that is one pixel wide (2 pixels on a retina display) or none at all. How can I make mobile safari draw a line that is one real pixel (0.5px) wide ?
Use scale. The style below will give you hairline
.transform-border-hairline {
border-bottom: 1px #ff0000 solid;
transform: scaleY(0.5);
}
More specificly (and that trick in live use) here http://atirip.com/2013/09/22/yes-we-can-do-fraction-of-a-pixel/
Use border-width: 0.5px
Safari 8 (in both iOS and OS X) brings border-width: 0.5px. You can use that if you’re ready to accept that current versions of Android and old versions of iOS and OS X will just show a regular border (a fair compromise in my opinion).
You can’t use this directly though, because browsers that don’t know about 0.5px borders will interpret it as 0px. No border. So what you need to do is add a class to your <html> element when it is supported:
if (window.devicePixelRatio && devicePixelRatio >= 2) {
var testElem = document.createElement('div');
testElem.style.border = '.5px solid transparent';
document.body.appendChild(testElem);
if (testElem.offsetHeight == 1)
{
document.querySelector('html').classList.add('hairlines');
}
document.body.removeChild(testElem);
}
// This assumes this script runs in <body>, if it runs in <head> wrap it in $(document).ready(function() { })
Then, using retina hairlines becomes really easy:
div {
border: 1px solid #bbb;
}
.hairlines div {
border-width: 0.5px;
}
Best of all, you can use border-radius with it. And you can use it with the 4 borders (top/right/bottom/left) as easily.
Source: http://dieulot.net/css-retina-hairline
I don't normally suggest using .5 in pixels ever really. But you want a fallback to it.
just place the fallback on top. Like this.
border-bottom: 1px solid #fff;
border-bottom: 0.5px solid #fff;
Warning: Many phones are now 3x (3 real pixels for each logical pixel).
Therefore 0.5px mathematically equates to 1.5 real pixels - which is impossible to render consistently.
So if you're trying to put a 0.5px border around something it's physically impossible for it to be consistent. Now the browser may decide to always round it to 1 real pixel or 2 real pixels OR it may try to anti-alias it. Unfortunately not even 'thin' as a thickness renders as one device pixel.
The worse case scanerio is it will use 1 pixel on one edge and 2 pixels on another which will end up looking awful. So be sure to keep this in mind and test on a 3x phone.
Using Graph API I can get small, large, medium pictures. Or I can get small square picture.
But how can I get large square picture? Is there any service I can use?
Simple, I just found this out.
Example,
https://graph.facebook.com/friends_Id/picture?width=200&height=200
tada~
Oddly enough, Facebook itself doesn't use a bigger square image even though they show a bigger squared profile picture on the new timeline pictures. If you take a closer look they take a larger rectangular image and reposition it inside an HTML element as Michael proposed above.
I would expect that at some point the positioning data they use for this will be released via the API but I am not aware of that data being available yet. I've had times where this would have been helpful also and have thus far either just centered the image or used the top portion. Not ideal though since FB already allows for and tracks custom positioning of the most important "square" of the image via their "icon" creator.
There is no way to do this officially, here's a silly hack. The following code will make sure the image is no wider/taller than 120 pixels. If it is, then the image will overflow outside the element:
<div style="width: 120px; height: 120px; overflow: hidden; display: inline-block;">
<img src="{$image}" align="absmiddle" width=120 style="min-width: 120px; min-height: 120px;" />
</div>
You can specify the picture size you want with the type argument, which should be one of square (50x50), small (50 pixels wide, variable height), and large (about 200 pixels wide, variable height).
From the Graph API Reference. Those are the only three sizes available. You can use a bigger version of the 50x50 image but it'll obviously look dithered.
Nowadays Graph actually could return you square image of any size. They cache most common sizes (like 100x100, 128x128) and return the closest size by the following request (hover to see)
As the other answers already stated, in facebook the square pictures are only in 50x50 resolution.
A simple CSS hack does the trick though:
Query the large image, wrap the img-tag with a div and apply this CSS to the div:
img#facebook_img {
width: YOUR_WIDTH;
}
div#wrapper {
height: YOUR_HEIGHT;
overflow: hidden;
}
If YOUR_WIDTH and YOUR_HEIGHT are the same you get your square image and the ratio is preserved.
None of the answers worked perfectly for me, having come across profile pictures of various dimensions (some with a greater height than expected, some with a smaller height) which ended up either stretched or non-centered.
In the end I used a div element instead of an img and set the image through a background-image style attribute rather than through its src attribute.
CSS file:
.profile-pic {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 120px;
width: 120px;
border: solid 1px #ddd;
}
HTML:
<div style="background-image:url(https://graph.facebook.com/123/picture?width=120&height=120);" class="profile-pic"></div>
Replace 120px in the above (occurs twice in the CSS and twice in the HTML fragment) with your desired dimensions.
I'd like to create a text input with a clear button in a confined space. Like the iPhone, I want to place the button (a small x image) 'inside' the input at the far right so that a user can just click that to clear the value, instead of having to waste space beside the input.
Right now I'm using a background image on the input and an invisible span hovering over top. This accomplishes what I want, but there are problems: if the user types too much text just goes over the image, and IE doesn't seem to support elements above images. To solve the first problem I tried setting the margin of the input on the right, but that shrank the entire thing as opposed to keeping the input the same size and limiting the text to an area.
Do you know of any way I can create this compact input and clear button combo and have it look and function the same across all modern browsers?
Thanks!
If you want button on top of text:
<span><input><button>X</button></span>
span {display:inline-block; position:relative;}
button {position:absolute; right:0; top:0;}
If you want button not to interfere with the text:
span {border:2px inset gray; background:white; color:black;}
input {border:0; color:inherit; background:transparent;}
You could make a text input with right-marging: 0; and then put the image right next to it (inline), in a div/span with a background simulating a input extension. This way the input scrolls right before reaching the image, and you still get the image-in-input effect you desire.
I'm not testing this, but it would be something like this:
<input /><span><img /><span/>
input{margin-right: 0; border: 1px solid black; border-right: 0; background-color: white; color: black;}
span{background-image: url('xxx.png');width:20px;}
img{margin-left:0;border:1px solid black;border-left: 0;}
You could even extend the input without a background-image, just using plain css.