We Keep Coding

Is there any way to center text of table cells with jsPDF?

I want to make table cells text center during generating PDF using jsPdf. Is there any way to make text align center for pdf using jsPdf(by default it's left aligned).
Thanks and Regards,
Afroz Ali

You could also convert your document into the actual PDF:
const doc = new jsPDF('p','pt','a4');
doc.addHTML(document.body,function() {
doc.save('html.pdf');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<div>
<div style="text-align:center">Hello World</div>
</div>

You can set alignment in option or as a parameter depends how you craeting pdf,and Post the problem with your trial code otherwise you will get negative response.
var doc = new jsPDF('p', 'pt', 'a4');
//Alignment based on page width
doc.writeText(0, 40 ,'align - center ', { align: 'center' });
doc.writeText(0, 80 ,'align - right ', { align: 'right' });
doc.writeText(0, 120 ,'align - left '});
//Alignment based on text container width
doc.writeText(0, 120 ,'align - center : inside container',{align:'center',width:100});

How to align title html div with chart horizontally in highchart?

Consider the following jsfiddle
I am trying to align the gap between title bottom-border and the chart. Preferably the left side and right side of the chart aligns with the left side and right side of title border respectively.
Is there anyway I can do that without hardcoding (my chart width changes relative to screen size)?

You can force the title to have the same width and left offset as the plot area. To make sure it's responsive use the render event:
chart: {
plotBorderWidth: 1,
events: {
render: function() {
var style = this.title.element.style;
style.left = this.plotLeft + 'px';
style.width = this.plotWidth + 'px';
}
}
}
Live working demo: http://jsfiddle.net/kkulig/y3fj6vpq/
API reference:
https://api.highcharts.com/highcharts/chart.events.render

Change these two properties of the title.
left: 77px;
width: 922px;

fabric.js cannot get the text aligned witht the textAlign

I cannot get the textAlign working in fabric.js The fontSize, fontBackground work properly, but not textAlign. Am I missing something?
var canvas = new fabric.Canvas('myCanvas');
$('button.addText').click(function() {
var text = new fabric.Text($(this).siblings().val(), {
textAlign: 'center',
fontSize: 40
});
canvas.add(text);
});

var canvas = new fabric.Canvas('myCanvas');
var align = ["left", "center", "right" , "justify"];
var el = document.getElementById('res');
var txt = 'FabricJS \n is \nAwsome';
var text = new fabric.Text(txt, {
textAlign: 'left', //"left", "center", "right" or "justify".
width:450,
fontSize: 40
});
canvas.add(text);
changeAlign();
function changeAlign(){
var val = align[Math.floor(Math.random() * align.length)];
text.set('textAlign',val);
el.innerHTML = 'Text Alignment : ' +val;
canvas.setActiveObject(text);
canvas.renderAll();
}
canvas {
border : 2px dotted blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script>
<canvas id="myCanvas" width="600" height="300"></canvas><br>
<button onclick='changeAlign()'>Change align</button><p id='res'></p>
#AndreaBogazzi He is right. In Text, box depends on the width of first line, if you want then it will work for multi line texts . Check Snippet.

I guess the main point is that if the text is one line only, fabric will size the text bounding box to the necessary length and there will not be any alignment to do.
If the text is multiline the alignment should work.
The alignment is INSIDE the box and is not the direction where the box grows when the text grows.

It depends on the type of the object. If you have for example IText or Text the alignment will work only in the area of the canvas itself.
For example if you want to align an IText type on the center of the canvas you would use:
canvas.getActiveObject().centerV();
canvas.getActiveObject().setCoords();
canvas.renderAll();
If you want to center the text itself it would apply only to Textbox type, you would then be able to use:
canvas.getActiveObject().textAlign = "center";

Fit OpenUI5 BorderLayout to Screensize

I am using a small script (full code at the bottom of the question) to create a BorderLayout - top, left, right and center. I fill those parts with sap.ui.commons.layout.BorderLayoutAreas (as shown in this examples.)
My main problem is that I want this Layout to fit the whole Browser screen, being resized if the broswer windows is resized. For that the BorderLayout has the properties width and height for which I set a size. But it doesn't work as expected. For example If I replace the width with 100% or auto the application width is always adjusted correctly and fills the browser (in width). For some reason this does not work for the height. As soon as I enter something different from a pixel value (e. g. 900px) all controles dissapear and the window is empty.
Am I using it wrong or is there another way to fith the whole application to the screen?
<!DOCTYPE html>
<html>
<meta http_equiv='X-UA-Compatible' content='IE=edge'/>
<title>OpenUI5 Demo</title>
<script id='sap-ui-bootstrap'
src='/js/openui5/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.ui.commons'></script>
<script>
var oBorderLayout1 = new sap.ui.commons.layout.BorderLayout("BorderLayout1", {
width : "100%",
height : "100%", // THE APPLICATION ONLY WORKS WHEN THIS LINE IS SET TO A PIXEL (e. g. "300px") VALUE
top : new sap.ui.commons.layout.BorderLayoutArea({
size : "20%",
contentAlign : "center",
visible : true,
content : [new sap.ui.commons.TextView({
text : 'Top Area',
design : sap.ui.commons.TextViewDesign.Bold
})]
}),
bottom : new sap.ui.commons.layout.BorderLayoutArea({
size : "20%",
contentAlign : "center",
visible : true,
content : [new sap.ui.commons.TextView({
text : 'Bottom Area',
design : sap.ui.commons.TextViewDesign.Bold
})]
}),
begin : new sap.ui.commons.layout.BorderLayoutArea({
size : "20%",
contentAlign : "center",
visible : true,
content : [new sap.ui.commons.TextView({
text : 'Begin Area',
design : sap.ui.commons.TextViewDesign.Bold
})]
}),
center : new sap.ui.commons.layout.BorderLayoutArea({
contentAlign : "center",
visible : true,
content : [new sap.ui.commons.TextView({
text : 'Center Area',
design : sap.ui.commons.TextViewDesign.Bold
})]
}),
end : new sap.ui.commons.layout.BorderLayoutArea({
size : "20%",
contentAlign : "center",
visible : true,
content : [new sap.ui.commons.TextView({
text : 'End Area',
design : sap.ui.commons.TextViewDesign.Bold
})]
})
});
oBorderLayout1.placeAt("body");
</script>
<body>
<div id='body'></div>
</body>
</html>

this is a very basic CSS topic and not at all related to UI5:
In CSS percentage heights only work if the height of the parent element is defined. Either as an absolute value, or as a relative value, but the parent of it is absolute-height etc.
Elements with no height basically say "I am as tall as my content" and when the content then has 100% height, it says "I am as tall as my parent", so that's a shortcut/deadlock and the height collapses to zero.
Also note that the <html> and <body> root elements also have no fixed height by default, so they also behave the same way.
So the easy solution to make 100% height work is to set the height of the parent to a fixed value or to set ALL the parents up to the very root of the page to 100% height - in your example:
<style>
html, body, #body { height: 100%; }
<style>
See jsbin for a running version:
http://jsbin.com/bonacohefu/1/edit

It seems like this is a bug, if you look into the API it says that the default for width and height is 100% but it doesnt seem to work for the height property.
I added it to a test page, and it had the same behavior as your example.

How to add a grid of images to a ScrollView in Titanium

I am trying to add rows of two images to a ScrollView in Titanium. I am having a problem in that only one row gets shown.
My Alloy code looks like this:
<Alloy>
<Window class='container' statusBarStyle='Ti.UI.iPhone.StatusBar.LIGHT_CONTENT'>
// Make ios status bar correct color
<View height='20' top='0' left='0' backgroundColor='#01B6AC'></View>
<View id = 'savedContents' layout='vertical' top='20'>
</View>
<Require type='view' src='bottomBar' id='bottomBar'/>
<Widget id="fa" src="com.mattmcfarland.fontawesome"/>
</Window>
</Alloy>
My Controller code looks like this:
var scrollView = Ti.UI.createScrollView({
contentWidth: 'auto',
contentHeight: 'height',
showVerticalScrollIndicator: false,
showHorizontalScrollIndicator: false,
width: '100%',
height: 400,
top: 0
});
for (i=0; i < venueDetails.length; i++) {
row = Ti.UI.createView({
width:'100%',
height:150,
layout:'composite'
});
image1 = Ti.UI.createImageView({
image:'http://www.outnow.io/assets/img/small511by309/'+venueDetails[i]["image1"],
width:'50%',
height:150,
left:0,
top:0
});
row.add(image1);
if (i+1 < venueDetails.length) {
image2 = Ti.UI.createImageView({
image:'http://www.outnow.io/assets/img/small511by309/'+venueDetails[i+1]["image1"],
width:'50%',
height:150,
left:'50%',
top:0
});
row.add(image2);
}
//$.savedContents.add(row);
scrollView.add(row);
}
$.savedContents.add(scrollView);
If I add the row views directly to the $.savedContents view (as per the commented out line in the code above) I see all of the rows correctly (two images per row). If I do this via a createScrollView I only get one row of images. I need to use the scrollView to make the images scrollable.
Anyone know what I am doing wrong?

By default the layout property has a value composite. So the scrollView has the composite layout, so you need to specify the positioning properties or "pins" (top, bottom, left, right and center) for that view (row). In your code you only specified the width and height, so all views will be centered in the parent view (ScrollView).
According to Titanium.UI.View-property-layout Reference:
composite (or absolute). Default layout. A child view is positioned
based on its positioning properties or "pins" (top, bottom, left,
right and center). If no positioning properties are specified, the
child is centered.