How to create border in Header? I am using jspdf autotable to create table but cannot find any idea to apply border to header. Is there any hook that can be used to create header border?
You can use the header styles:
doc.autotable(columns, data, {
headerStyles: {
lineWidth: 1,
lineColor: [255, 0, 0]
}
});
As of today (version 3.5.25) the property name is headStyles and still different border widths is not supported.
Example:
autoTable(doc, {
headStyles: {
lineWidth: 0.5, // 1 is too thick for me
lineColor: [255, 0, 0] // Or gray level single value from 0-255
}
})
I use the imported method version (autoTable) in TypeScript.
Related
I am using jsPDF to convert HTML components into a PDF.
Below is the code for that,
var doc = new jsPDF({orientation: 'l',unit: 'px',format: [1250,1100],compress : true});
let component=document.getElementById('document');
doc.html(component,{
margin: [10, 0, 50, 0],
callback: function (doc) {
doc.save("report.pdf");
},
x: 0,
y: 0,
});
The resulting PDF looks like.
PDF PROBLEM
I expect jsPDF to move the component to the next page whenever its find that the size of the component is bigger than the rest of the current page.
I have this style in react-native
backgroundColor: 'rgba(0, 0, 0, 0.8)',
but It gives me this eslint warning Warning eslint(react-native/no-color-literals)
I tried this styling but it didn't work
{
backgroundColor: BLACK,
opacity: 0.8
}
Please check this link to understand the warning.
When developing UIs, we often find ourselves reusing the same colors in multiple places in the UI. If the colors have to be updated, they likely have to be updated across the board. So it's good practice to store the color definitions in variables instead of hardcoding them inside styles. This rule will detect color properties that have literals (ie strings) as values.
You can either disable this warning on eslint or put the string into a variable.
const blackOpa80 = 'rgba(0, 0, 0, 0.8)'
And then:
backgroundColor: blackOpa80,
I'm trying to create an animated "parallax" image in React-Native. I have a static background image and two individual images as an overlay. The goal is to create something similar to the image found on this website http://www.digitalhands.net/ or https://www.galaxia.co/. Where do I even start with this? Initially I'd be happy with it moving just on itself from left to right and etc. Afterwards I want to make it so that it would use the gyroscope to get the x and y values for animating the image.
A parallax effect consists of images moving in different speeds and in the same direction, such that the 'closer' an object is, the faster it moves, which creates the illusion of three dimensions.
To achieve this effect in react-native, you can use the Animated library to interpolate the position of one image as a fraction of the position of another.
For the sake of an example, let's assume you want the parallax effect in the vertical direction, and that all images are positioned at 0 vertically.
First, you would need an animated value in your component's state:
this.state = {
...
imagePos: new Animated.Value(0)
}
Then, for each Image style you can add a transform on its y axis:
<Animated.Image src={...} style={[firstImageStyle, {
transform: [{translateY: this.state.imagePos.interpolate({
inputRange: [0, 1],
outputRange: [0, 100]
})}]
}]}
<Animated.Image src={...} style={[secondImageStyle, {
transform: [{translateY: this.state.imagePos.interpolate({
inputRange: [0, 1],
outputRange: [0, 50]
})}]
}]}
Note the use of Animated.Image instead of Image to make the image animatable.
This would cause the first image to move horizontally between 0-100 dp when imagePos has values between 0 and 1, and the second image to move between 0-50 dp.
To change the value of the animated value you can use any of the functions in the Animated library (timing, spring, decay, etc.) or you can attach it to some native event.
The animated library documentation has much more detail.
As for the use of the gyroscope, I haven't gone into the details, but you can probably use react-native-sensors or react-native-motion-manager to get the values you need, and attach them to the animation.
By using a package like https://github.com/react-native-sensors/react-native-sensors I managed to get the x, y, z values of the phones position and animate an image with it.
constructor() {
super();
this.state = {
x: 0,
y: 0,
z: 0,
};
}
componentWillMount() {
// Normal RxJS functions
accelerationObservable
.subscribe(({x, y, z}) => this.setState({
x: x,
y: y,
z: z,
}));
}
render() { return (
<Image style={{left: this.state.x + this.state.y, top: this.state.z}}
source={require('image.png')}/>
)
}
There is some default padding in areachart.
I tried my best to force it make 0 padding, but no luck.
Any idea how areachart touches the edges of the box
( base css framework is bootstrap3 ).
after using ( as #suraj suggestion in comments )
Try specifying the padding inside the chart initialization. Something like this:
$("#chart").kendoChart({
//....
chartArea: {
margin: 0,
padding:0
},
plotArea: { margin: 0, padding:0 }
});
Just like the title says. Because buildin widgets do not really fit, what I want to do, I need to make my own tooltipdialog implementation:
To start simple:
dojo.query(".small-avatar").connect("onmouseenter", function () {
var pos = dojo.position(this, true);
dojo.query("#user-tooltip").style({ left: pos.x, top: pos.y, visibility:"visible" });
});
I've come with this. Well I guess the problem is with pos. I've tried to digg with documentation, but honestly there is no word, on how access x and y position so I assumed it's with ".".
UPDATE:
After more checking, I figured out that problem lie in position it self, or style.
For some reason Dojo do not add coordinates to targeted node "#user-tooltip". It just change visibility.
You have the pos.x and pos.y correctly referenced since dojo.position() returns an object literal. From the Dojo docs, The return object looks like:
{ w: 300: h: 150, x: 700, y: 900, }
You may need to set position: absolute or position: relative on #user-tooltip.
I finally got it working:
dojo.query(".small-avatar").connect("onmouseenter", function (e) {
var pos = dojo.position(this, true);
dojo.style(dojo.byId('user-tooltip'), { visibility: "visible", "left": pos.x+pos.w+'px', "top": pos.y+pos.h+'px' });
});