Set the content of PDF to center - html

I am generating dynamic multicell with string. Like A, B, C etc. I want to center those multicell on the page. I need to make the $pdf->SetMargins() dynamic, which means it will automatically center itself when the content is loaded. This is a code I tried but something is wrong.
$pdfWidth = 210;
col = 9; // This is dynamic so it can be any value from 5-20;
$mar = (($pdfWidth + ($col * 8)) /2)/2;
$pdf->SetMargins($mar,0,0);

I'm not sure why you're dividing by 2 twice. If you take the total width of the page, minus the content and divide that by two you have your desired margin already. Also, don't forget to set the override parameter in SetMargins() to 'true'.
$pdfWidth = 210;
$col = 9;
$mar = (($pdfWidth - ($col*8)) /2); //Only one division by 2 is required
$pdf->SetMargins($mar,0,0, true); //the 'true' is necessary or it won't override the default margins
//VERY IMPORTANT that you set all the above BEFORE adding the page!
$pdf->AddPage();
//Content of page
Now any MultiCell with cell width of 8, as you provided in the example, should be perfectly centered on the page.

Related

How to make bar chart not be crushed with a lot of data in google bar chart?

Using a bar chart: https://developers.google.com/chart/interactive/docs/gallery/barchart when you have a lot of data, it crushes the bars to be very thin and the text to overlap each other. What options are there to get the data to render in the container properly (maybe guarantee each bar to be of a certain height if possible)? I want to avoid explicitly setting the height to say "1000px", then looking at the bar chart to determine whether it is scrunched up or not.
You can calculate a height for your BarChart dynamically, based on the number of rows of data in your DataTable:
// set inner height to 30 pixels per row
var chartAreaHeight = data.getNumberOfRows() * 30;
// add padding to outer height to accomodate title, axis labels, etc
var chartHeight = chartAreaHeight + 80;
var chart = new google.visualization.BarChart(document.querySelector('#chart_div'));
chart.draw(data, {
height: chartHeight,
chartArea: {
height: chartAreaHeight
}
});

How do I set up my multiline wordWrap TextField to automatically resize its width when height is set?

I want to create a textfield extension that:
When width is set, automatically resize height by the content of text. Easy done by autosize left, word wrap true, multiline true.
When height is set, automatically resize width by the content of text. Here is my problem.
When both width and height set aren't a case I am interested in.
I've tried several things off the internet, I am stumped.
General solution is impossible, as if the text field contains too many newlines to display within a given height, no matter what width you assign, the text field will be unable to display all the lines. Partial solution is presented by greetification, but it lacks some features one should be aware of. First, no matter what you do, you should not set height to value less than font height, or the text field will not be able to display a single line. Second, if wordWrap is set to false, and multiline to true, the resultant textWidth is the largest desirable width for your text field, so if you adjust the width like greetification advises, stop once you reach the recorded textWidth, as further increases are pointless.
function setHeight(newHeight:Number):void {
var tw:Number;
var th:Number;
if (myTextField.wordwrap) {
myTextField.wordwrap=false;
tw=myTextField.textWidth;
th=myTextField.textHeight;
myTextField.wordwrap=true;
} else {
tw=myTextField.textWidth;
th=myTextField.textHeight;
}
if (newHeight<th) newHeight=th+2; // as below
myTextField.height = newHeight;
while((myTextField.textHeight > myTextField.height)&&(myTextField.width<tw)) {
myTextField.width += 100;
}
if (myTextField.width>tw) myTextField.width=tw+2; // "2" depends on text format
// and other properties, so either play with it or assume a number big enough
}
Not the most elegant solution, but it should work:
function setHeight(newHeight:Number):void {
myTextField.height = newHeight;
while(myTextField.textHeight > myTextField.height) {
myTextField.width += 100;
}
}

How to get a RadioButton's label height - AS3

I want to get radioButton's label height in as3.
I have 5 radio buttons in my radioButton group. One of those radioButtons has a three line label, another has a single line etc...
When I try to access the radioButton.height, I always get same value regardless of the label height.
I need to know the height of the label, so I can set the radioButton y coordinate accordingly.
can I change the radioButton's label height?
spacing = 30;
rb.label = tempQQString //from xml. long or short string anyone
rb.group = myGroup;
rb.value = i + 1;
rb.x = answerX;
rb.y = questionField.height + (questionY+20) + (i * spacing); // here use rb.height or rb.textField.height
trace("rb height**" + rb.height) // always get velue 22;
addChild(rb);
RadioButton and any fl control that extends labelButton (all the ones that have a label), expose the actual text field with the .textField property.
So for your example, instead of using rb.height, you would use rb.textField.height to get the height of just the label portion of the control.
You can also set properties on the textField as well.
rb.textField.background = true;
rb.textField.backgroundColor = 0xDDDDDD;
rb.textField.multiline = true;
rb.textField.wordWrap = true;
rb.textField.autoSize = TextFieldAutoSize.LEFT;
now, for your scenario, you may be better off just using the radio button's bounds instead, as it will be the REAL height of the object.
rb.getBounds(rb).height; //this will be the true height of the component.
If your label was one line and your icon was taller than your label, you could potentially be getting a value from rb.textField.height that is smaller than the real height of the radio button.
Try this.
for(var i=0;i<rb.numChildren;i++){
if(rb.getChildAt(i) is TextField){
var txt:TextField = rb.getChildAt(i) as TextField;
trace(txt.height+":"+rb.height);//traces the height of text field and radio button
}
}

Autosize HTML table cell height based on content when rowspan is involved

Is there a way to autosize HTML table height based on content? Also if it's a cell (or cells) next to a neighbor cell with multiple rowspans.
E.g. if I have a table like this (cell on the right has Rowspan="2" and height of the cell content = 600px, in each cell on the left height of the cell content = 150px):
there is a gap between 2 cell consents on the left because cells themselves autosized their height. I'd like it to look like this:
Where top cells automatically collapse to cell content height. Is there anyway to achieve this?
This sets the last row of cells to the correct height (demo):
function grow(td) {
var table, target, high, low, mid;
td = $(td);
table = td.closest('table');
target = table.height();
low = td.height();
// find initial high
high = low;
while (table.height() <= target) {
td.height(high *= 2);
}
// binary search!
while (low + 1 < high) {
mid = low + Math.floor((high - low) / 2);
td.height(mid);
if (table.height() > target) {
high = mid;
} else {
low = mid;
}
}
td.height(low);
}
$('tr:last-child td').each(function() { grow(this); });
​
It should be trivial to convert this into plain JavaScript.
Update: For more complicated tables, you'll want to replace the last line with this (demo):
$.each($('td').get().reverse(), function() { grow(this); });
​
The idea is to call grow() on every cell, starting with the last row and working upwards.
considering table id="mytable" it would be:
$("#mytable").find("td").each(function(){
var ContentHeight = $($(this).html()).height();
$(this).height(ContentHeight);
});
at the end of the your page create a javascript code and let it do it for you:
<script type="text/javascript">
document.getElementById("idOfTd").style.height="100px";
</script>
I think it better create like this http://jsfiddle.net/miqdad/w9QYB/

show tinymce contents in a div with flexible though maximum height

When using an editor like tinymce, how could i limit the height of the text a user enters so it doesn't use more space on the webpage than i want it to?
There are 2 things that i want some advise on:
In the editor:
The user enters text in a tinymce editor, he could set a text to font-size say 80px which would use up more space than a normal letter. So it's not the amount of text that i care about it's the height of the total.
In the webpage:
I don't want to give them more than say 200px worth of text on the page. But if they enter just 1 line of text with a small font-size i don't want to show a 200px space. So the height has to be flexible but with a maximum.
I know this isn't exact science but the goal here is to prevent the user from messing up the page.
To solve a similar issue i wrote the following function (placed inside an own tinymce plugin). You will need to add a variable for the maximum case and maybe tweak it a bit, but i hope this code will put you into the right direction
// this function will adjust the editors iframe height to fit in the editors content perfectly
resizeIframe: function(editor) {
var frameid = frameid ? frameid :editor.id+'_ifr';
var currentfr=document.getElementById(frameid);
if (currentfr && !window.opera){
currentfr.style.display="block";
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) { //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight + 26;
}
else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
}
styles = currentfr.getAttribute('style').split(';');
for (var i=0; i<styles.length; i++) {
if ( styles[i].search('height:') ==1 ){
styles.splice(i,1);
break;
}
};
currentfr.setAttribute('style', styles.join(';'));
}
},