I am using Antd v4.2.4 Tree (example: virtual scroll) from the link. I woulld like to use the virtual Scroll which can be used by setting "height" prop of the Tree. All is fine till here as in the example.
I would like to apply some css to the scrollbar like both overflowX and Y should be enabled on hover in the container
I would like have the Tree node show in only single line when the title is really big and not wrap it, if I use overflowX css, it doesn't work.
codesandbox
Update1: I see when we set "height" prop to Tree a lot of Divs have the inline css elements so not sure how to override them.
May be there is something small here but I am unable to figure out
I want to have such a look for my TreeNode and when hovered on this container the scrollbar X and Y is visible to see the longer node title please advice
update 2
if the set following css I am able to get the title in single line, but the scroll-X behaves strange. i.e. the scoll-x gets hidden when the Tree height/contents are big and when ypu collapse all treenodes, it shows up
.ant-tree .ant-tree-treenode {
white-space: nowrap;
}
codesandbox
TIA
Related
I'm working on a Gtk3 theme using css. I want to style a dialog so I used gtkinspector to check what widgets are inside there. Works well, the inspector recognizes the dialog. But it is apparently unable to identify a border sitting around the dialog. (See image below).
The border around the entire widget doesnt get hilighted by the inspector. .. so what does this consist of?
This is reflected in the css: if I put something like dialog * {green} in the css, everything colors green, except for the border. If I put .background {green} then the border also colors green....
I tried to find 'padding' 'margin' and 'border' entries that could be causing the border, but cant seem to find any....Any ideas?
Without code or a glade file one can't say for sure which properties are being used to add that border.
The border itself isn't a widget but a GtkContainer property. So you must look to the parent, GtkDialog, for the correct properties being used. Most probably its the empty border around the container child (see GtkContainer "border-width") but could be alignment or padding.
If your goal is to change the color of the background color then you should change it via GtkDialog.
I'm having a problem which at first I thought it was the general configuration of my app and the height I was giving to my page wrapping classes. But I made a simple out of the box material ui tab example and it seems this is natural to material ui Tabs Component.
Material UI tabs component gives their tab container the same height, being that height the largest of all its containers. So if you have one tab content with lots of content in it, it makes the other tab contents just as large, even though they may only have one text field and a button in them.
How can I make it that the height of the container adjusts to the content of its own tab?
Here is a visual
Here is why TAB ONE is so large, TAB TWO is setting the height
Here is a webpackBin for you to see the code working and mess with it.
One hack I've done so far is setting a definite height and overflow, but I don't want to do that because it creates a double scroll bar (one in the tab container, one in the body) besides, it's buggy looking.
I would like it if the tab container (the one with the green border) adjusts to the content as it does in TAB TWO, BUT individually.
Thanks in advance!
If you set the height based on the given element's current visibility you will be able to resolve this issue.
Example
.react-swipeable-view-container > div[aria-hidden="false"] {
height: 100%;
}
.react-swipeable-view-container > div[aria-hidden="true"] {
height: 0;
}
Note: this solution could be improved by using a better selector, something more descriptive like a class name. I suppose it's subjective though, using an attribute selector is not technically wrong and actually more specific than just a class.
Demonstration: https://www.webpackbin.com/bins/-Ky0z8h7PsdTYOddK3LG
animateHeight will animate height on tab change. if all tabs have different height it will show height accordingly.
Example:
<SwipeableViews
animateHeight // it will animate height on tab change
>
<div>{'slide 1'}</div>
<div>{'slide 2'}</div>
<div>{'slide 3'}</div>
</SwipeableViews>
Happy Coding ...!
There's a merge request that have been accepted here on the lib that could be interesting with a new method called updateHeight https://github.com/oliviertassinari/react-swipeable-views/pull/359
<SwipeableViews
action={actions => {
this.swipeableActions = actions;
}}
animateHeight
>
<div>{'slide n°1'}</div>
<div>{'slide n°2'}</div>
<div>{'slide n°3'}</div>
</SwipeableViews>
Then:
componentDidUpdate() {
this.swipeableActions.updateHeight();
}
I'm trying to display images instead of nodes using Cytoscape.js to create a network diagram, but I haven't had any success yet. I started with the Images and breadthfirst example (https://gist.github.com/maxkfranz/aedff159b0df05ccfaa5), but there are a couple key things I would like to change.
For starters, I'd like to display an image only instead of a node. The above example displays a circle node with an image inside it. Is there any way to make the node completely transparent, and just let the image show through? I just want to see my vector icon images. When I delete all style properties for my node selector except width and height, I still see a circle constraining my image. I just want to see my image.
Next, I'd like to use something on the element data to decide what image to use instead of the #nodeId mechanism in the example above.
.selector('#order-db')
.css({
'background-image': 'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg'
})
Using a unique selector for each id is not very scalable or easy to modify. I'd prefer a declarative approach where a property on the data element determines which image to display. I tried using the "classes" property on an element, and I added a "shape-database" value to it. Here is how the class is defined...
.shape-database {
width: 95px;
height: 95px;
/*background: url('images/network-icons.jpg') 0px -95px;*/
background: url('images/database-5-med.png');
}
I then tested that the "shape-database" class was working by adding a simple div to the page, and the class is working properly on a normal div. The cyto node I added the classes property to does not display the background image. It's as if the class was not applied to the node, or else the node is blocking the image somehow. This is with the exact same code I was using above, with all the node selector css properties removed except width and height, and the #order-db css selector removed. I just see a grey circle for the node.
When the classes property on the element didn't work, I even tried the following to no avail...
cy.$('#order-db').addClass('shape-database');
Any thoughts on what I'm doing wrong? A link to an example displaying just images instead of nodes would help as well.
Displaying an image instead of a node:
The key here was in hiding the node background and border completely, so that the background image alone shows through. The key to accomplishing that is through "background-opacity" and "border-opacity" (or "border-width") on the style objects. I added an image property (value is an img src) to the data object for each element that I wanted to swap out with an image, as well as the following style.
{
selector: 'node[image]',
style: {
'background-image': 'data(image)', // specify some image
'background-opacity': 0, // do not show the bg colour
'border-width': 0, // no border that would increase node size
'background-clip': 'none' // let image go beyond node shape (also better performance)
}
}
This also satisfied my requirement to use the element data to designate which elements are to be replaced with images and which images to use, instead of hard-coding a unique style and image for each element id.
I never got the classes data property to have any effect whatsoever on the background-image of a node. Perhaps there's a bug there.
Hopefully, this will help someone in the future because it was not obvious to me that background-opacity etc. made the entire node invisible. From the documentation, it sounded like it affected the node's background. Knowing that I was altering the background image for the node caused me quite a bit of confusion around nodes and backgrounds. I'm still quite fuzzy on all the layers and how they interact, but the above works and is better in my opinion than the image example given on the cytoscape site.
I have run into an issue with the paper-dropdown-menu component, where it's expansion height seems to be limited by an enclosing core-collapse on its containing element. Is there a way to prevent this from occurring? (see images demonstrating symptoms below) Another related side effect seems to be that when the number of items in the dropdown creates a dropdown height that would normally expand below the bottom of the containing collapsible element, it causes the CSS top styling of the dropdown to be overridden, nudging the top of the element higher within the collapsible container element itself while it is expanded. Irregardless of its new top alignment, it still doesn't show the entire list of options as the height of the dropdown itself remains the same. Has anyone run into similar issues? I can post a jsbin, but its a bit convoluted due to me using a custom polymer element that consists of the icon, input control, and an optionally displayed/selectable unit of measure. So before doing that I was hoping someone might recognize this issue right away and be able to point me in the right direction. This is using chrome v38 and the latest paper-dropdown-menu and core-collapse components (bower ^0.4.0)
Unexpanded (note the top alignment):
Expanded (there should be 5 options, but they are being cut off by core-collapse and note the altered top alignment as well):
Proper operation (when dropdown height is same or less than containing collapsible element height):
In core-collapse there is new property 'allowOverflow' to allow collapsible element to overflow when it's opened. This should help paper-dropdown-menu to expand inside core-collapse. The new property is only in core-collapse#master branch and will be available in the next release.
<core-collapse allowOverflow>
<div class="content">
<paper-dropdown-menu>
...
</paper-dropdown-menu>
</div>
</core-collapse>
The new 'layered' attribute of the latest version of paper-dropdown resolves this issue.
I'm trying to style vscrollbar and hscrollbar inside a Vbox.But there's always a white square thing at the right bottom cornor which can not be styled.
My CSS is:
ScrollBar{
downArrowUpSkin: Embed(source="assets/images/scrollbar/arrow_down.png");
downArrowOverSkin: Embed(source="assets/images/scrollbar/arrow_down.png");
downArrowDownSkin: Embed(source="assets/images/scrollbar/arrow_down.png");
upArrowUpSkin: Embed(source="assets/images/scrollbar/arrow_up.png");
upArrowOverSkin: Embed(source="assets/images/scrollbar/arrow_up.png");
upArrowDownSkin: Embed(source="assets/images/scrollbar/arrow_up.png");
thumbDownSkin: Embed(source="assets/images/scrollbar/thumb.png");
thumbUpSkin: Embed(source="assets/images/scrollbar/thumb.png");
thumbOverSkin: Embed(source="assets/images/scrollbar/thumb.png");
trackSkin:Embed(source="assets/images/scrollbar/track.png");
fillAlphas:0,0,0,0;}
Could anyone help me out?Much Thanks!
This is a weird one. The white box at the bottom right is actually a (raw) child of the container.
To get around this you need to subclass whatever container you want to add your styled scrollbars to and remove the child called "whitebox":
var whitebox:DisplayObject = rawChildren.getChildByName('whiteBox');
if (whitebox)
rawChildren.removeChild(whitebox);
IIRC you need to do the above in two places: an override of createChildren and an override of validateDisplayList. In both cases remember to call the super class method first!
That area isn't controlled by the scroll bar(s), it's part of the original container. Does the VBox have it's background colour set to black?