How to only set the right padding without changing the other sides - javafx

this is a possible duplicate of this question but as it wasn't answered or the provided answers didn't satisfy my needs i had to post a new question here, so how do i set the padding value to a javaFX node to only one side without having to specify padding values for the other sides, better if through CSS, thank you.

after fabian pointed out that there is no way to specify one side without affecting other sides as the padding is a single property, that's the solution that i came up with, which worked for my specific case and i hope someone finds this useful
Insets old = region.getPadding();
int rightPadding = 45;
region.setPadding(new Insets(old.getTop(), rightPadding , old.getBottom(), old.getLeft()));

Related

NG Zorro Multi Select - keep selected items on one line instead of wrapping and doubling height

Anyone know if there is a way to make the ng zorro select (multi) to stick to one line instead of wrapping the selected items. In some scenarios its fine but when you have certain layouts you cant have the height doubling on each selection.
There is a codebox demo here: https://codesandbox.io/s/2lp2n (reduce the size of the view panel to see what i mean).
I have tried pretty much all i can think of (adding css to the select and select top classes to try and force it to stay on one line but it doesnt seem to work). I wanted to ask here first to see if anyone has any ideas since their git would normally close a question and ask me to come here first.
Thanks
In the end i just had to add:
flex-wrap: nowrap !important;
to nz-select-top-control

Babylon Js children that follow parent withouth the scaling

I work with Babylon JS and I want some meshes to follow the displacement but not the scaling of the 'parent mesh'
Is there an easy way to do this? Or do I have to do this by hand?
Thanks.
Perhaps the best way would be to not inherit but instead use scene.registerBeforeRender and just clone parent position to child position
This is a late answer, but the way I solved this is to set the child's scaling to be the inverse of the parent.
childMesh.parent = parentMesh;
...
parentMesh.computeWorldMatrix(true);
childMesh.scaling = Vector3.One().divide(parentMesh.absoluteScaling);
The computeWorldMatrix on the parent is important if you want to use parentMesh.absoluteScaling - it forces the parent to compute its world matrix before rendering, so that you can get an accurate reading on its absolute scaling or position.
You can substitute parentMesh.scaling instead of absoluteScaling if you only want to undo the scaling of the parent, but still want to respect scaling from grandparents.
I'm not sure if this is a good practice, but it's worked well for me.

JavaFX8 tree table remove disclosure node indentation

The disclosure node is placed in a separate column which for root items contain that arrow and for child items - some data. Currently there's an indentation between arrow and data(see image below).
How can I remove that? Thanks.
I looked high and low for a solution to this my self and finally found it by looking at the source for the skin for the TreeTableRow. Apparently there is a css property called -fx-indent that will do what you need.
This is how I achieved a similar result to what I believe you are trying to do:
.tree-table-row-cell{
-fx-indent: -20;
}
Obviously you need to figure out a better value than -20 but that did the trick in my proof of concept.
I hope this helps.

CSS Grid troubles

Here is code example: http://jsfiddle.net/gubvw/3/
If you'll slowly change screen size by dragging sizer in testing window you'll see that number columns scattered.
What can I do to fix this trouble?
UPDATE: This is for FLUID CSS GRID system to make layouts for webapps. I don't want to get table. And the example is for testing this grid on resize and other dimensions.
I think that the problem is in browser which calculates .cx1 to 55+43px and round it to pixels,
and .cx5 calculates to 449+43px not watchind that .cx1 rounded to 55px.
Specially for Dexter Huinda:
There is 100% width? and 12 columns with 3.8% margin right (except the last).
So for cx1 = (1*(100+3.8))/12-3.8 = 4.85%
for cx2 = 4.85*2+3.8 = 13.5%
for cx3 = 4.85*3+3.8*2 = 22.15%
and so on.
The main formula to calculate any column width from 1 to 12 is
(a*(100+b))/12-b (where a = number of spanned columns and b is margin)
Any questions to math?
And the question is why: width(4.85%+3.8%+4.85%+3.8%+4.85%) <> width(22.15%)
So if you need nothing to explain please find the mistake in any .cx width. Can you?
Either you should use div with fixed width that you may provide in your css file or you can make it via table. Actually your divs are not properly tightened together. This is the main reason.
I think your approach could do with some rethinking.
If you need to align columns, use either a table or use fixed width divs. You are using classes, so why not apply fixed widths via the class, and not the percentage widths that are there.
Using a fixed width font in conjunction could also give a desired effect.
Solution is here: http://jsfiddle.net/NwkPz/.
Thanx to Vasiliy Aksyonov (Web Standards Days) && Vadim Makeev (Opera Software)
))

CSS question - repeating for x for two different images in different directions

I was playing around with an image on a site just for practice, and I was wondering if anyone could help me with a question.
I am trying to get the branch the snake is on extend both directions. (using background-repeat for x) However it will only match up with one side or the other. Is there a way to get x to repeat only for one side of the image, so I can use two slivers of the tree image and it will match on both sides?
Thanks for any input or insight you might have!
How would that work? Imagine an image as being a sequence of characters xyz.
To repeat the image I need to use:
xyz,xyz,xyz,xyz
Unless the sides of the image (the x and the z) match, there's no way to repeat it without getting mismatches at the boundaries between repeats.
In other words, fix your image so that the sides match up.
No, you can't specify this.
What you should do is split your page in 3 zones: snake, left, right. Then use different repeating backgrounds for left and right.
You could also fix the snake image so it matches up.
You can use background-position xpos ypos to set the starting point of the background. Move it up to coincide with the picture of the snake.

Resources