As seen using this codepen https://codepen.io/fourlightson/pen/RwNxVry, the nodes on level 6 are offset to the right hand side for some reason. At the moment i'm using only the most simple options:
var options = {
layout: {
hierarchical: {
direction: "UD",
sortMethod: "directed",
nodeSpacing: 400
}
}
};
I have failed to find a configuration that positions the highlighted nodes more centrally to adhere to a more top down, vertical appearance.
Can anyone help with a configuration change that would help position the level 6 nodes so they are aligned vertically with the level 1 nodes for example ?
many thanks.
turns out if i reduce the nodeSpacing: value it does what i want. I used nodeSpacing: 1.
Related
I have a HighCharts organization chart that loads data from our db so it can have a variable number of nodes. I've added
.highcharts-container { overflow: scroll !important; min-width: 100px; }
to my css so that the scrollbars appear and it seems to be growing as needed vertically. However, the nodes overlap horizontally for some reason. I've added
nodePadding: 15
to my js which seems to space them out vertically but doesn't help the horizontal issue. I feel like there should be an option or setting for this, but when I search on overlapping issues, all I get are label issues. Any ideas on how to get my nodes to space out? Thanks!
Here's a jsFiddle which has overlapping data like mine - https://jsfiddle.net/ubmzs5qf/
In case things get unconnected at some point, here's a function given to me by Sebastian here: https://www.highcharts.com/forum/viewtopic.php?f=9&t=42435&p=149331 that handles resizing for the amount of data:
events: {
load() {
let chart = this,
series = chart.series[0],
newWidth = series.options.nodeWidth * series.nodeColumns[2].length;
chart.update({
chart: {
width: newWidth
}
})
}
}
I used this to set both the height and width but it's being overwritten by something, possibly a higher angular limit on dialog size. I think I need a way to space out the icons and make everything small since I can't just make the chart bigger.
You can achieve it by decreasing nodes width eg. nodeWidth: 50.
Demo:
https://jsfiddle.net/BlackLabel/d9cmt0oy/
API reference:
https://api.highcharts.com/highcharts/series.organization.nodeWidth
EDIT
Another way is to decrease `dataLabels font size and set manually the height and offset of each larger node.
Demo:
https://jsfiddle.net/BlackLabel/8om5hc34/1/
I'm creating a UI. Right now I'm working on generic boxs that dynamically add and remove scrollbars as they are resized.
I draw the scrollbars along the bottom and right inside edge. The inside edge is important.
So at some point the box is resized. If it's resized I check to see if the new size is smaller than the size needed for the contents, if so, scroll bars are added.
My problem stems from when only one scrollbar is needed; and the size for the other dimensions/axis is very close to the size needed for the contents.
What happens is that this scrollbar is drawn on the inside edge. Now that removes area that can be used for the contents. The problem is then that if a scrollbar is shown I would have to check the area available again to see if the other scrollbar is needed. And then again.
This seems like a recursive problem; but I'm not sure how it will help me.
Some code:
void Box::UpdateVisibleRegion()
{
// if the dimensions of this box is smaller than what the widget needs, display horizontal scrollbar
if(GetDimensions().x < m_widget->GetDimensions().x)
{
m_scrollbarH->SetVisibility(true);
m_scrollbarH->SetSize(utils::coord<int>(GetDimensions().x,m_scrollbarH->GetDimensions().y));
}
else
{
m_scrollbarH->SetVisibility(false);
}
// likewise for vertical scrollbar
if(GetDimensions().y < m_widget->GetDimensions().y)
{
m_scrollbarV->SetVisibility(true);
m_scrollbarV->SetSize(utils::coord<int>(m_scrollbarV->GetDimensions().x,GetDimensions().y));
}
else
{
m_scrollbarV->SetVisibility(false);
}
And there's the problem. If the height of the box is just over the widgets height; and the width is far under it; then the horizontal scrollbar is displayed. But now the check for vertical scroll bar should have been:
if(GetDimensions().y - m_scrollbarH->GetDimensions().y < m_widget->GetDimensions().y)
Because the scrollbar is drawn on the inside edge, there's less room. But obviously I can't know that until I've checked the other. And both the horizontal and vertical are going to affect each other.
I'm sure recursion is the answer; but I can't see it.
I could probably do this with one or two big nested if statements...
I'm biting the bullet and have begun using auto layout. Not as difficult to get used to than I feared. I am having trouble with this though.
Is it possible for view 2 to 'anchor' to the bottom of view 1.. UNLESS view 1 is hidden, in which case it should anchor to the top of the containing view? How would I set constraints for this?
If View1.hidden = NO:
If View1.hidden = YES:
Perhaps the easiest way to solve this issue is to manipulate constraint priorities.
I won't go into detail regarding how the Auto Layout system works – if you need that, check out WWDC sessions 202: Introduction to Auto Layout for iOS and OS X and 228: Best Practices for Mastering Auto Layout, both from 2012. Also, check out objc.io's great article on Auto Layout.
In short, constraints can be assigned priorities. A priority is represented by a floating point number in the range [0, 1000], inclusive. The special priority of 1000 means "required;" all other priorities are optional.
How can we use this to help? In Interface Builder (IB), create two different constraints for the top of your blue view. The first one should relate the top of the blue view to the bottom of the red view, with a distance of 0 points – that is, the top of the blue view should be flush with the bottom of the red view. We'll call this constraint the "unhidden" constraint.
The second constraint should go from the top of the blue view to the top of the superview, again with a distance of 0 points – that is, the top of the blue view should be flush with the top of its superview. We'll call this constraint the "hidden" constraint.
If you're following along, you've realized that it is impossible to satisfy both of these constraints simultaneously unless the red view's height is exactly equal to 0. That won't happen, though (I assume you're not resizing the red view, just hiding or unhiding it), so how can these constraints coexist? The answer lies in priorities. Make sure that, in IB, the priority of the unhidden constraint is 950 – remember, this optional, but at the high priority of 950. However, set the priority of the hidden constraint to something less than 950 – maybe 450, for example.
Next, you'll need to create outlets to these two constraints (how to do so is outside the scope of this answer – it's the same as creating outlets to anything in IB). I recommend naming them as I've named them here. So, in your header file, you might see the following:
...
#property (weak, nonatomic) IBOutlet NSLayoutConstraint *unhiddenConstraint;
#property (weak, nonatomic) IBOutlet NSLayoutConstraint *hiddenConstraint;
...
Now the only thing left is to alter the priorities of these constraints at the appropriate times – namely, when you hide or unhide the red view. So, in your view controller, add a method like this:
- (void)setRedViewHidden:(BOOL)hidden {
if (hidden) {
self.unhiddenConstraint.priority = 450;
self.hiddenConstraint.priority = 950;
self.redView.hidden = YES;
} else {
self.hiddenConstraint.priority = 450;
self.unhiddenConstraint.priority = 950;
self.redView.hidden = NO;
}
}
Then, whenever you want to hide the red view, you just call this method with the proper argument. Setting the priorities on the constraints will implicitly mark the layout as dirty, causing a new layout pass to occur on the next turn of the UI loop.
This is not a beginner use of the Auto Layout engine. Let me know if you have any lingering questions about this solution.
As per the definition of translationY: The translation is mostly useful for animations as it doesn't affect the actual laid out position of the visual node. This translation is added after the node has been laid out so it doesn't affect layout in any way
Is there any property that actually affect the position of the visual node?
What I want is the text of the label to start from its top border. If I use translationY, it touches the top border but the size of the label remains the same.
Your question is thin on specifics but if you use AbsoluteLayout the members of AbsoluteLayoutProperties can affect the laid out position of a visual node as in the following QML:
Container {
layout: AbsoluteLayout {}
Label {
text: "Label"
layoutProperties: AbsoluteLayoutProperties {
positionX: 100
positionY: 100
}
}
}
I am looking for a solution to a unique problem. I have a wp_menu underneath the "Network Menu" on a theme I developing for a multisite build. There is a little ring in the center of the menu that holds the logo, and I am curious if there is a way to get a transparent list item to hold that place, and allow all other "legitimate" list items to wrap around that, so either to the left or right.
I already have a filter that inserts a list item that I can customize by adding css, I just don't know how to make one list item in particular hold the place where the circle exists.
The website is:
http://www.mountainjackscreative.com/sandbox/edts/sample-page/
Any help, or even just ideas would be great!
Thanks everyone.
Since you're using jQuery you could do some math on the menu.
EDIT: Put this before ending of your head tag
LAST_EDIT: Here's the JS fiddle http://jsfiddle.net/BsnFW/14/. Last try :)
$(document).ready(function() {
menuBreakPoint = 200; //width in px after which you want to insert the space (experiment with this)
menuWidth = 0;
rightMenuStart = 600; //width in px from left of menu container div to the right
$('.sub_site_menu li').each( function() {
menuWidth += $(this).width();
if (menuWidth >= menuBreakPoint) {
$(this).css('margin-left', (rightMenuStart - menuWidth));
return false; //break out of each loop
}
});
});
Use this.
Can you not breakup the list into two? float one left and the other right. Provide the appropriate ul margins so nothing shows up on the logo?
I am going to go with the jquery solution as it will most likely render the best results across all browsers. But I did stumble across this other resource regarding a soon to be implemented feature in CSS3
Included is a script that forces compatability with the new CSS3 "column" functionality.
http://www.csscripting.com/css-multi-column/