So I have something like this :
return (
//set mushroom forest background, make it fill screen
<div className="App" style={ {
backgroundImage: `url(${pools})`,
backgroundPosition: 'center',
backgroundSize: 'contain, cover',
backgroundRepeat: 'no-repeat'
}}>
I want to use both cover and contain for my background image, but it seems to choose 1 and render with it rather than applying both.
But when I render it with react, the image isn't stretched to the page. It only seems to pick up the first of either contain or cover, and use that for rendering the image. Anyone know how to make a background image do both contain and cover in react? The syntax I have there works just fine in its CSS equivalent.
I'm really trying to assign two values to a CSS style in react, using the syntax and have it work. Right now it either fills the whole page, but cuts off part of the image, or leaves white space on the sides but displays the whole image. I've found CSS tutorials using both cover and contain at the same time, is there some special syntax I need to use in react or JavaScript to make this work?
I've tried putting two styles into an array, using two strings such as ['contains', 'cover'] but that doesn't seem to work either.
Edit: Figured out a way around it, not sure if you can do this double value assignment thing is css at all, think I was mostly misreading a guide to doing something.
Related
I'm using the Inovua React Data Grid for a project, and we are trying to make some subtle changes to increase the amount of data we can see on a smaller grid. We only have limited space, so we're trying to remove unnecessary clutter. I have been struggling to find any answers to my questions on the API reference documentation, which in my opinion is quite lacking.
Trying to decrease the padding- I believe there is a default padding of 8px within the grid, but seemingly nowhere to change it. I want to trim it down a bit, so it appears more like an Excel sheet.
I want to remove the header ellipsis!! There literally is a page in their reference docs for this (columns.headerEllipsis), but it just doesn't work when I try it. Perhaps they're demo/example is just awful, but I try adding headerEllipsis: false as a column property and my terminal tells me it 'isn't a known property'.
This seems like bad design on their part, but when a column/data gets trimmed (with or without ellipsis) because the text is too long, hovering over it does not display the entire text. Is there no way to change this?
I have considered writing a custom header render function to specifically change the ellipsis style settings to solve (2) as well as to render the headers as a tooltip to solve (3), but this seems excessive. Is there a better way to do this?
Thanks!
Still unable to solve the padding issue (1), but I was able to easily resolve (2) and (3) by building that custom header render function after all. It wasn't difficult, here is what I did:
const getHeader = (name: string) => {
return (cellProps: CellProps) => {
cellProps.headerEllipsis = false; // disables ellipsis
return <div>
<Tooltip title={name}> {/* material-ui Tooltip: */}
<span>{name}</span> {/* displays text on hover */}
</Tooltip>
</div>
}
};
And then I just added this line where I defined columns:
name: e,
header: getHeader(e), // add this line
By defining the custom header render function, it also overwrites a lot of the default styles (i.e. headerEllipsis). This actually made it much easier to adjust the spacing and shrink the columns in the grid, so even though I couldn't find the solution to (1), this custom render function is definitely the way to go!
while I was looking for ux sites I found some interesting ui for chat bubbles. Which is,
Chat Bubble UI ref
After brainstorming several days, I couldn't figure out how to develop that. But I have found some approaches to that problem which I want your suggestions:
I should calculate message line width (absolutely), however the problem in here is each language has different character sets and how should I know each letter width and do correct calculation.
On the edges which bubbles intercepting there shouldn't be rounded corners and my approach for that problem is dividing each line to separate component, hold above line width & below line width compare and give dynamic styling to that component like:
{
borderTopRightRadius : 5,
borderBottomRightRadius:0
}
etc. The problem in that solution is I will have tons of components for each line and so many refs. I am kinda discouraged on that when I consider performance issues.
I am inviting you to do some brainstorming (not coding) and find an efficient way to solve my problem. Many thanks, who spends time to read that.
This is really interesting problem. Having more experience with web and react (rather than react native), I'll describe the way I would solve it in the browser.
Render line, but keep it invisible (opacity: 0 or visibility: none)
Get it's size and determine if it is wider than the previous sibling
Based on that apply a CSS class. Specific CSS classes would have border radius and pseudo element (::before) which would be the nice "transition" part (SVG for sure).
Show the line. I would even render it beneath the already rendered ones and in this step animate the group to top.
I think you have to create element for each line (again I'm talking about the web). Border radius shouldn't create performance issues.
Let me know what you think, I may cook a small example for you when I catch time.
You can try:
bubbleChat: {
borderRadius: 15,
borderTopLeftRadius: 0,
display: 'flex',
paddingLeft: 15,
minWidth: 50
},
bubbleWrapper: {
flexDirection: 'row'
}
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 am trying to achieve a very common effect in react native of having text wrap around an image. On the web you would assign a float property to the image and follow it with a p tag. .
Here is a RNPlay example I've been working on. I think the method I currently have is a bit hackish, and doesn't properly work since the text does not align with the top of the image and flow down. Is there a proper and clean way to accomplish this?
You can use a Text as container instead of the typical View.
<Text style={{flex: 1}}>
<Image source={Images.IconExplore} style={{ width: 16, height: 16 }} />
<Text> Your past has been in control for far too long. It's time to shift to a higher expression of what you are capable of so you can create the life you want to live.</Text>
</Text>
Unfortunately, there is still no easy way to do it, even after the introduction of nested Views inside Text. Surprisingly in the iOS community this seems to be non-trivial.
iphone - How to implement the effect of "float" for image, just like in CSS style
https://github.com/Cocoanetics/DTCoreText/issues/438
One idea that comes to mind that would be worth tinkering around with is measuring the text, dimensions and/or character count, and depending on the size of the image, divide the text into two Text components, one that goes to the right/left and the other that goes below the image.
There is this under-promoted React Native library that might help, which allows you to measure the width and height of a Text component based on its content:
https://github.com/alinz/react-native-swiss-knife/blob/master/lib/text/index.ios.js
I have created a very simple chart with NVD3.js as can be seen on this fiddle.
The problem lies with the title (text in the middle) which consists of a number and a symbol (%).
I need both those parts to be styled separate but this seems to be a real pain.
I have discovered I can only style an SVG through inline style tags so I already applied :
<div id="svgDiv"><svg id="test2" fill='#58B957' letter-spacing='-3px'></svg></div>
to get the color and spacing right. Now I still need the %-symbol to be a lot smaller than the number. Which I can't apply to the full svg, because this would make everything smaller.
I have tried all manners of adding classes, id's, wrapping them in tspan's etc; yet I can't figure it out.
Please tell me there's a straightforward solution for this?
I dont think there is a direct way in nvd3 but you can do this trick to empty the text and fill with tspan.
var text1 = d3.select(".nv-pie-title").text("");//get the title clear it
text1.append("tspan").attr("class", "number").text("85")//make first tspan
text1.append("tspan").attr("class", "percent").text("%")//make second tspan
working code here