I have a problem with getting labels within a TableView to display correctly, and I hope someone can help.
Here is a screenshot of the problem:
The labels with the (...) behind them are cut off.
This problem does not occur when I set a fixed height to my rows, but since the text is of varying lengths, that's not a good solution for me.
I've tried the answers in this question, but to no avail.
Here is my code to generate the table:
var aSection = Ti.UI.createTableViewSection({
rows: [],
headerView: header
});
for (var p = 0; p < answers.length; p++){
var currentAnswer = answers[p];
var arow = Ti.UI.createTableViewRow({
selectedBackgroundColor:'#f5f5f5',
answID: currentAnswer['aId'],
map: currentAnswer['aMap'],
isSelected: false,
height: 'auto',
rightImage: '/images/icons/radio-unselected.png'
});
var atext = Ti.UI.createLabel({
font:{fontSize:gui.defaultFontSize+2, fontFamily: gui.defaultFont},
color: '#333',
text: currentAnswer['aText'],
left:10, top: 10, bottom: 10, right: 10,
width:'auto',
height: 'auto',
borderWidth: 0,
borderColor: "#000",
});
arow.add(atext);
aSection.add(arow);
}
var sections = [];
sections[0] = aSection;
var answView = Ti.UI.createTableView({
backgroundColor:'white',
data: sections,
bottom: 1,
minRowHeight: 40,
});
I'm really at a loss with this. Any pointers are appreciated.
If your text is too long then it overlaps the right side button but still you want to show full text then you should either set left & right or set width to Ti.UI.SIZE so If you want to overlaps right button then you should use Ti.UI.SIZE or not then you can set left & right
so in short, set width to Ti.UI.SIZE or set left and right property.
Use Ti.UI.SIZE for both height and width instead of auto, auto has been deprecated a long time ago. Something like this would help you
var aSection = Ti.UI.createTableViewSection({
rows: [],
headerView: header
});
for (var p = 0; p < answers.length; p++){
var currentAnswer = answers[p];
var arow = Ti.UI.createTableViewRow({
selectedBackgroundColor:'#f5f5f5',
answID: currentAnswer['aId'],
map: currentAnswer['aMap'],
isSelected: false,
height:Ti.UI.SIZE,
rightImage: '/images/icons/radio-unselected.png'
});
var atext = Ti.UI.createLabel({
font:{fontSize:gui.defaultFontSize+2, fontFamily: gui.defaultFont},
color: '#333',
text: currentAnswer['aText'],
left:10, right: 10,
width:Ti.UI.SIZE,
height:Ti.UI.SIZE,
borderWidth: 0,
borderColor: "#000",
});
arow.add(atext);
aSection.add(arow);
}
var sections = [];
sections[0] = aSection;
var answView = Ti.UI.createTableView({
backgroundColor:'white',
data: sections,
bottom: 1,
minRowHeight: 40,
});
Try using: minimumFontSize:'18sp'
Or some size that suits your display needs. This will shrink the font down to the minimum size to fit everything.
Related
I have an ios app developed with titanium appcelerator. In the app I have some tablevies where I add some rows and some sections to create that sticky effect. But for some reason the sections have a top margin. Is there a way to remove that margin? The margin was not defined by me.
This is my TableView:
var mainView = Ti.UI.createTableViewRow({
height: Ti.UI.SIZE,
width: "100%",
backgroundSelectedColor: 'transparent',
backgroundSelectedColor: 'transparent',
selectedColor: 'transparent',
bottom: 0,
});
And the I add some TableViewSections to it:
tableData.push(Ti.UI.createTableViewSection({
headerView: require("addStickyHeader").addStickyHeader(letra.toUpperCase()),
}));
The addStickyHeader function:
exports.addStickyHeader = function(text) {
var viewHeader = Ti.UI.createView({
height : Ti.App.screenSize[0] * 0.08,
width : "100%",
backgroundColor : require("colors").fundo(),
top : -100
});
viewHeader.add(Ti.UI.createLabel({
text : text.toUpperCase(),
color : require("colors").branco(),
width : "84.6%",
font : {
fontSize : Ti.App.screenSize[0] * 0.019,
fontFamily : require("fonts").semiBold()
},
}));
return viewHeader;
};
That white parte should not be there.
I am trying to dynamically get the height of a table in a PDF that I created using jsPDF and js Autotable. I want to add a line of text under the table, but since the table height changes, I can't put a specific Y value for the text line.
My current table script:
let col = ['Header 1', 'Header 2', 'Header 3']
let rows = arrayForTable;
let getTableWidth = 150;
let pageWidth = doc.internal.pageSize.width;
let tableMargin = (pageWidth - getTableWidth) / 2;
let height = 0;
doc.autoTable(col, rows, {
margin: {top: 20, right: tableMargin, left: tableMargin},
startY: 70,
styles: {
halign: 'center',
overflow: 'linebreak',
cellWidth: 'wrap',
valign: 'middle'
},
columnStyles: {
0: {cellWidth: 50},
1: {cellWidth: 50},
2: {cellWidth: 50},
},
headStyles: {
fillColor: [163, 32, 32]
},
didParseCell: function(data) {
if (data.row.index === rows.length - 1) {
data.cell.styles.fillColor = [63, 63, 64];
data.cell.styles.fontStyle = 'bold';
data.cell.styles.textColor = [255, 255, 255];
}
height = data.table.height
}
});
console.log(height)
The console prints undefined. Anyone know how to dynamically add a line of text under this table without having to designate a static Y value like this:
doc.text(25, 40, exampleText);
The table height changes every time because of different data being shown.
I am using jsPDF AutoTable plugin v3.5.6.
Get the cursor position on Y axis using
didDrawPage
which will be precisely after the table.
This worked for me in Angular 2:
let yPos = 0;
pdf.autoTable({
...
didDrawPage: function(data) {
yPos = data.cursor.y;
}
}
jspdf version:
"jspdf": "^2.3.1",
"jspdf-autotable": "^3.5.14",
Source:
Table height is always 0 #604
From what I understood, you want to add the text under the table. Instead of trying to read the table height, you can read the last cell Y position. What you need to do is like this
let height = 0;
....
didParseCell: function(data) {
...
height = data.cursor.y + data.row.height;
}
....
then you can adjust the position of the text you want to add, for the example I want to add 10 gap between the table and the text
doc.text("exampleText", 25, height + 10);
In Appcelerator Titanium (iOS project) I have a TextField with height:50. The TextField contains much more text but the fact that its height is set to 50 lets me use the TextField as a preview of the remaining text: under the TextField I have a button and when I tap this button I want to show the entire text, so I would like to animate the TextField from its current height to Ti.UI.SIZE. Is this possible? How? I noticed some iOS properties (eg. anchorPoint) but I could not understand if they can be useful in my case.
You need to use TextArea instead of TextField if you want multiple lines and word wrapping.
I've added the TextArea to a View so I can animate it to both expand and shrink it.
You can try something like this..
// Create the text area for multiple lines and word wrapping.
var messageField = Ti.UI.createTextArea({
backgroundColor: 'transparent',
color: 'black',
height: Ti.UI.SIZE, // Set here the height to SIZE and the view's height to the required one, ex. 50
textAlign: 'left',
value: 'This text should be displayed in more than one line in a text area, but that behavior is not supported by a text field, again, This text should be displayed in more than one line in a text area, but that behavior is not supported by a text field.',
verticalAlign: Ti.UI.TEXT_VERTICAL_ALIGNMENT_TOP,
width: '90%',
font: { fontSize: 20 }
});
// Add the text area to a view to be able to animate it
var view = Titanium.UI.createView({
height: 50, // Required height
top: 250,
width: '90%',
borderColor: 'black',
borderRadius: 10,
borderWidth: 2,
});
view.add(messageField);
// Create animation object
var animation = Titanium.UI.createAnimation();
animation.duration = 1000; // Set the time of animation, 1000 --> 1 second
var button = Ti.UI.createButton({
title: "Show More",
font: { fontSize: 18 },
width: 100,
top: 200
});
var isExpanded = false;
button.addEventListener('click', function() { // Event listener for your button
if(isExpanded) {
isExpanded = false;
animation.height = 50; // Set the animation height to 50 to shrink the view
view.animate(animation); // Start animating the view to the required height
button.title = "Show More";
} else {
isExpanded = true;
animation.height = Ti.UI.SIZE; // Set the animation height to SIZE to make it expand
view.animate(animation); // Start animating the view to the required height
button.title = "Show Less";
}
});
var win = Ti.UI.createWindow({
backgroundColor: 'white'
});
win.add(button);
win.add(view);
win.open();
I currently have a scrollable view to scroll through some images.
On Android it's fine, but on iOS the height seems to be a bit bigger as I have some text under the scrollable view and its being pushed down a bit on iOS, while on Android the text is right under where it should be
index.js:
var win = $.index;
if(Alloy.Globals.osname == "android"){
win.backgroundColor = "#000";
}
//If iOS
else{
win.backgroundColor = "#FFF";
}
win.orientationModes = [
Ti.UI.PORTRAIT,
Ti.UI.UPSIDE_PORTRAIT
];
function textColor(){
if(Alloy.Globals.osname == "android"){
return "#FFF";
}
else{
return "#000";
}
}
var button = Titanium.UI.createButton({
title: 'Test Button',
bottom: 30,
width: "75%",
height: "auto",
visible: false
});
var page_view = Titanium.UI.createView({
top: 10,
width: Ti.UI.SIZE,
height: "85%",
layout: "vertical",
visible: false
});
var page_descr = Titanium.UI.createLabel({
text: "This is a description",
width: "75%",
font: { fontSize: 36 },
color: textColor(),
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
});
var page_image1 = Titanium.UI.createImageView({
image: "/images/screens_android/adsteps_1.jpg",
});
var page_image2 = Titanium.UI.createImageView({
image: "/images/screens_android/adsteps_2.jpg",
});
var page_image3 = Titanium.UI.createImageView({
image: "/images/screens_android/adsteps_3.jpg",
});
var page_image4 = Titanium.UI.createImageView({
image: "/images/screens_android/adsteps_4.jpg",
});
//Change the images to the iOS images
if(Alloy.Globals.osname != "android"){
page_image1.image = "/images/screens_ios/ios_1.jpg";
page_image2.image = "/images/screens_ios/ios_2.jpg";
page_image3.image = "/images/screens_ios/ios_3.jpg";
page_image4.image = "/images/screens_ios/ios_4.jpg";
}
var image_scroller = Titanium.UI.createScrollableView({
width: "100%",
height: "auto",
showPagingControl: false,
backgroundColor: "white",
views: [page_image1, page_image2, page_image3, page_image4],
});
image_scroller.addEventListener('scrollend',function(e)
{
label_step.text = steps(image_scroller.currentPage+1);
});
//Create a view to hold the scrollable view
var view_holder = Ti.UI.createScrollView({
width: "75%",
height: "60%",
top: 5,
});
view_holder.add(image_scroller);
var label_step = Titanium.UI.createLabel({
text: "Test text",
top: 5,
width: "70%",
font: {fontSize: 21 },
color: textColor(),
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
});
var label_slide = Titanium.UI.createLabel({
text: "(Swipe to view next step)",
font: {fontSize: 19 },
top: 5,
color: textColor(),
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
width: "70%",
});
page_view.add(page_descr);
page_view.add(label_step);
page_view.add(view_holder);
page_view.add(label_slide);
//Fix fonts
if(Alloy.Globals.osname != "android"){
page_descr.width = "80%";
page_descr.top = 30;
page_descr.font = {fontSize: 19};
label_step.width = "90%";
label_step.font = {fontSize: 15};
label_slide.top = 2;
label_slide.font = {fontSize: 14};
image_scroller.top = -120;
}
else{
page_descr.width = "80%";
page_descr.top = 30;
page_descr.font = {fontSize: 15};
label_step.width = "90%";
label_step.font = {fontSize: 11};
label_slide.top = 5;
label_slide.font = {fontSize: 12};
image_scroller.top = -120;
}
win.add(page_view);
button.addEventListener('click',function(e)
{
alert("I clicked the button!");
});
win.add(button);
win.open();
The android image sizes are all: 768x735px while the iOS images are 475x475px.
Here's a screenshot of what's happening on iOS, it's pushing the text "(Swipe to view next step)" down when it should be directly below the image of the iOS home screen:
http://i.imgur.com/GfDpeDb.jpg
try after commenting the top of label_slide like,
var label_slide = Titanium.UI.createLabel({
text : "(Swipe to view next step)",
font : {
fontSize : 19
},
//top : 5,
color : textColor(),
textAlign : Ti.UI.TEXT_ALIGNMENT_CENTER,
width : "70%",
});
And tell me either it works or not.
The best and easiest way to do this is to use DP values instead of percentages. If you haven't set it up or modified your tiapp.xml yet your iOS devices use DP and Android uses pixels. This is why you are seeing a difference in the layout.
Dp : Density-independent pixels. A measurement which is translated natively to a corresponding pixel measure using a scale factor based on a platform-specific "default" density, and the device's physical density.
In your tiapp.xml change the default unit to dp.
<property name="ti.ui.defaultunit" type="string">dp</property>
If you then recompile the app, clean and build it will be set up to use DP values. Try using these instead of percentages.
Details on this can be seen here -
http://docs.appcelerator.com/titanium/3.0/#!/guide/Layouts,_Positioning,_and_the_View_Hierarchy
I have 4 objects in a view with a horizontal layout in this order:
label
slider
label
button
labels and button are set to Ti.UI.SIZE and slider is set to Ti.UI.FILL
I am basically making my own video controls so
currentTimeLabel, slider, totalTimeLabel, playPauseButton
My issue is when I set the slider to FILL it fills the parent (which it should do I suppose) and pushes the 2nd label and button to a new line.
I need all 4 items on the same line. I've tried turning horizontalWrap to false on the parent view, but that just makes it so I cannot see the remaining two items.
The reason I am not using static widths is I need this slider to adjust its width based off the phone being in portrait and landscape modes.
If I use SIZE instead of fill, the slider basically has 0 width.
My simplified code is below:
var win = Ti.UI.currentWindow;
var transportBg = Ti.UI.createView({
bottom:0,
height:50,
width:'100%',
backgroundColor:'#50000000'
});
win.add(transportBg);
var transportControls = Ti.UI.createView({
layout:'horizontal',
width:'100%'
});
transportBg.add(transportControls);
var currentTimeText = Ti.UI.createLabel({
left:25,
width:Ti.UI.SIZE,
height:Ti.UI.SIZE,
text: '0:00',
color:'#fff',
font: {
fontSize: 10
},
shadowColor: '#000',
shadowOffset: {x:0, y:1}
});
var transport = Titanium.UI.createSlider({
min:0,
max:100,
value:0,
width:Ti.UI.FILL,
backgroundColor:'red'
});
var totalTimeText = Ti.UI.createLabel({
width:Ti.UI.SIZE,
height:Ti.UI.SIZE,
text: '0:00',
textAlign: Ti.UI.TEXT_ALIGNMENT_RIGHT,
color:'#fff',
font: {
fontSize: 10
},
shadowColor: '#000',
shadowOffset: {x:0, y:1}
});
var playPauseBtn = Ti.UI.createButton({
backgroundImage:'/images/pause.png',
width:Ti.UI.SIZE,
height:Ti.UI.SIZE
});
transportControls.add(currentTimeText);
transportControls.add(transport);
transportControls.add(totalTimeText);
transportControls.add(playPauseBtn);
And a screen shot of the current layout
In your case horizontal layout isn't very helpful and best effects can be achieved with absolute layout and setting left, right properties. The only problem which you have is that you have to make sure how much space you have to leave on both sides of slider.
Here are changes to your code which I've made:
var transportControls = Ti.UI.createView();
Removed width and layout property
var transport = Titanium.UI.createSlider({
left: 50,
right: 70,
…
});
Removed width property and set left/right property.
var totalTimeText = Ti.UI.createLabel({
right: 40,
…
});
var playPauseBtn = Ti.UI.createButton({
right: 0,
…
});
Add right property.