I am new to Titanium Studio. Need to set row height dynamically but, I unable to set dynamic height in each row. Below is my code:
textArray contains 10 text paragraphs. each paragraph have different height.
var myTable = Ti.UI.createTableView({height:360, width: 306, top: 58, backgroundColor: '#FFFFFF',borderColor: '#C8C8C8',borderWidth:2, zIndex: -1});
var myArray = [];
for(int i = 0; i < 10; i++)
{
var row = Ti.UI.createTableViewRow({contentHeight: 'auto', width: 320,top:0});
var my = Ti.UI.createView({ top:10,width:300,height:'auto' });
var myText = Ti.UI.createlLabel({text:textArray[i],width:50,height:'auto',left:10,top:5,borderRadius:4});
my.add(myText);
row.add(my);
myArray.push(row);
}
How can i set row height dynamically.
Can any one help?
As per understanding you need to show cell height as per text
Here are some good example
Similar post on Stackoverflow
Example given on some blog
Hope this will solve you problem.
I got the solution:
specify your table rowHeight as auto.
var myTable = Ti.UI.createTableView({height:400,rowHeight: 'auto', width: 312, top: 10,left:4, backgroundColor: '#FFFFFF',borderColor: '#C8C8C8',borderWidth:2, zIndex: -1});
var myArray=[];
for(int i = 0; i < 10; i++)
{
//create row in table.
var row = Ti.UI.createTableViewRow({height: 'auto', width: 310,top:10, selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.NONE});
//textArray contains 10 elements. i am using this in each loop..
var myText = Ti.UI.createlLabel({text:textArray[i],width:50,height:50,left:10,top:5,borderRadius:4});
//add like this what ever you want...
row.add(myText);
myArray.push(row);
}
//store in table
myTable.data = myArray;
//disply table.
win.add(myTable);
If height:'auto' property is not working then use Ti.UI.SIZE
I hope.. someone will use it.
Change the content height to what you want table height look
Related
In a grouped column chart of two groups, I would like to center the column when the other column has height 0.
So for example,
The bars for the years 2013 to 2016 should be centered on the year label. This is because the second value in the group is 0, so the height of the bar is 0, so no bar displays:
data = [
["2012", 900, 950],
["2013", 1000, 0],
["2014", 1170, 0],
["2015", 1250, 0],
["2016", 1530, 0]
];
How can I do this with google charts?
see following working snippet...
the bars are centered where their counterpart is blank.
however, it breaks once the user hovers a bar.
the bars are represented by <rect> elements,
which are used to draw the chart itself, the gridlines, the legend bars, etc.
3 <rect> elements are used to highlight the hovered bar.
this is what breaks the code below, it throws off the routine to find the bars.
here's how it works now...
there will be the same number of bars / <rect> elements as there are rows and series,
even if a bar is not visible.
they will be next to last in the list of elements.
the last <rect> element is the x-axis.
the code below works backwards, skipping the last element,
and counts the number of rows / series to gather the bars that may need to be moved.
when the users hovers, there are 3 elements inserted, so the routine will need to change to accommodate.
and they will also need to be moved in order to highlight properly.
otherwise, you can just turn off interactivity and be done...
enableInteractivity: false
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
["Year", "Asia", "Mama"],
["2012", 900, 950],
["2013", 1000, 0],
["2014", 1170, 0],
["2015", 1250, 0],
["2016", 1530, 0]
]);
var options = {
chartArea: {
height: '100%',
width: '100%',
top: 32,
left: 48,
right: 128,
bottom: 48
},
height: 400,
width: '100%'
};
var container = document.getElementById('chart');
var chart = new google.visualization.ColumnChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
// get chart layout
var chartLayout = chart.getChartLayoutInterface();
// create mutation observer
var observer = new MutationObserver(function () {
// get bar elements
var rects = container.getElementsByTagName('rect');
var barLength = data.getNumberOfRows() * (data.getNumberOfColumns() - 1);
var bars = [];
for (var i = rects.length - 1; i > ((rects.length - 1) - (barLength + 1)); i--) {
if (i < (rects.length - 1)) {
bars.unshift(rects[i]);
}
}
// process each row
for (var r = 0; r < data.getNumberOfRows(); r++) {
// process each series
for (var s = 1; s < data.getNumberOfColumns(); s++) {
// get chart element bounds
var boundsBar = chartLayout.getBoundingBox('bar#' + (s - 1) + '#' + r);
var boundsLabel = chartLayout.getBoundingBox('hAxis#0#label#' + r);
// determine if bar is hidden
if (boundsBar.height < 1) {
// determine series shown, new x coordinate
var seriesShown = (s === 1) ? 1 : 0;
var xCoord = boundsLabel.left + (boundsLabel.width / 2);
// move bar
bars[r + (data.getNumberOfRows() * seriesShown)].setAttribute('x', (xCoord - (boundsBar.width / 2)));
}
}
}
});
observer.observe(container, {
childList: true,
subtree: true
});
});
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
I have an image which is being set through:
var oImage = new sap.m.Image({
id: image0,
src: "img/image0.jpg"
});
I want to figure out the width and height of the image ?
I have tried oImage.getWidth() and oImage.getHeight() but those return empty. I have also tried parseInt(oImage.getWidth()) and parseInt(oImage.getHeight()) but those return NaN.
The values are empty because you haven't set them yet. Both getHeight and getWidth return the set values not the default height and width of the image. Have a look at Image Control.
var oImage = new sap.m.Image("image0", {
src: "img/load.gif",
height: "30vh",
width: "30vw"
});
This oImage.getWidth() will return "30vw"
Since, you have not specified with and height of the image, you will have to use the DOM to get the details of the image. Try the following code in your controller:
var image = this.byId("image0");
var oDomRef = image.getDomRef()
console.log(oDomRef .width, oDomRef .height);
It will give the image width and height in px.
So I have an array of images I want to load into a gallery using Photoswipe, but I'm having trouble predefining the image width and height. Specifically, I think I need to preload the images
Here's my JS to render the page, here I'm defining slides and listing as a local variable for the ejs page to use:
var sizeOf = require('image-size');
var url = require('url');
var http = require('http');
var slideshow = [];
for(var i = 0; i < listing.listing_images.length; i++) {
var image = listing.listing_images[i];
var width, height = 0;
var imgUrl = image.url;
var options = url.parse(imgUrl);
http.get(options, function (response) {
var chunks = [];
response.on('data', function (chunk) {
chunks.push(chunk);
}).on('end', function() {
var buffer = Buffer.concat(chunks);
**height = sizeOf(buffer).height;
width = sizeOf(buffer).width;**
});
});
var item = {
src: image.url,
h: height,
w: width
};
slideshow.push(item);
}
res.render('example.ejs', {
listing: listing,
slides: slideshow
});
And here is the script in the ejs page :
<% var slides = locals.slides %>
<script>
$('document').ready(function() {
var pswpElement = document.querySelectorAll('.pswp')[0];
// build items array using slideshow variable
var items = <%- JSON.stringify(slides) %>;
console.log(items);
// grab image
if (items.length > 0) {
// define options (if needed)
var options = {
// optionName: 'option value'
// for example:
index: 0 // start at first slide
};
// Initializes and opens PhotoSwipe
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
}
</script>
Basically what's happening is the array of photoswipe items is being passed in fine, but the width and height aren't set until photoswipe initializes and triggers the img to load. So the images don't show, because their height and width aren't set yet.
Is there a way to trigger the loading of the images in the slideshow array so that the width & height are set before passing to Photoswipe? I've also tried seeing if I could just set them initially to 0, and then try and update the height and width later and try to force photoswipe to reload, but photoswipe doesn't recognize the image's new height/width.
Sorry if any of this is unclear/muddled with ejs nonsense, feel free to ask anything and I'd love to clarify.
Thanks
Ended up solving this leveraging the API:
gallery.listen('gettingData', function(index, item) {
// index - index of a slide that was loaded
// item - slide object
var img = new Image();
img.src = item.src;
item.h = img.height;
item.w = img.width;
});
gallery.invalidateCurrItems();
// updates the content of slides
gallery.updateSize(true);
If anyone happens to be reading this and there's a better way to read image size without creating a new img, or optimize this I'd love suggestions. :)
In my code I am doing this:
var taskLabel = Ti.UI.createLabel({color:'#777', top:3, textAlign:'center', height:'auto', text:task.title});
Ti.API.info('Next info is: taskLabel.height');
Ti.API.info(taskLabel.height);
But, the output from this is:
[INFO] [123,883] Next info is: taskLabel.height
And nothing more, it looks like it breaks silently, but I guess it shouldn't, based on the API.
I am trying to sum some heights of the elements, but I would prefer it behaved like html postion:relative. Anyway, I'd like to read the height in float, how can I achieve that?
You need to set a fixed width when you use an auto height. For example:
var taskLabel = Ti.UI.createLabel({color:'#777', top:3, textAlign:'center', height:'auto', width: 200, text:task.title});
you are not going to get the height until it is actually rendered and added to view or window.
You cant read the height property off like that, if you didn't manually define it.
It has to be added to a view, and then displayed (assuming it doesn't auto display) before Titanium will return anything about the height.
var window = Ti.UI.createWindow();
var taskLabel = Ti.UI.createLabel({color:'#777', top:3, textAlign:'center', height:'auto', text:task.title});
window.add(taskLabel);
window.open();
Ti.API.info('Next info is: taskLabel.height');
Ti.API.info(taskLabel.height);
That should work to show the height.
This should work.
var lbl_obj = Ti.UI.createLabel( { height: 'auto', text:'Test Label', top:10 } );
var height = lbl_obj.toImage().height;
Ti.API.info(height);
Quick one for any developers using appcelerator out there. I have two labels (This may even bew wrong) which are populated from an RSS feed. One label houses the title and another the description. The content for these comes from an RSS list which all works fine. THe issue I'm having is that some titles are longer than others so I cant fix label heights or it just wont work.
So with that in mind I set the titles height to be auto. The only problem is I cant reference this height from my second label to use the top: property to space it correctly.
Has anyone got any good suggestions?, Am I using the wrong type of Titanium UI method?
My current code is as follows
try
{
var current = Titanium.UI.currentWindow;
var selectedItem = current.item;
var description = selectedItem.getElementsByTagName("description");
var story = description.item(0).text;
var label = Ti.UI.createLabel({
text:selectedItem.getElementsByTagName("title").item(0).text,
left:5,
top:0,
height:"auto",
font:{fontSize:40}
});
current.add(label);
var story = Ti.UI.createLabel({
text:story,
left:5,
top:label.height,
height:"auto"
});
label.add(story);
}
catch(E)
{
alert(E)
}
minimumFontSize
the minimum size of the font when the font is sized based on the contents. Enables font scaling to fit and forces the label content to be limited to a single line
On the containing window / view, set the layout property to 'vertical' - this means the views are stacked on top of one another so your top value doesn't have to know the height of the previous component.
// Windows
var window = Ti.UI.createWindow({
layout: 'vertical',
backgroundColor: '#FFF'
});
var label = Ti.UI.createLabel({
width: 200,
height: 'auto',
text: 'some long text'
});
var label2 = Ti.UI.createLabel({
width: 200,
height: 'auto',
text: 'more long text',
top: 10 // This just adds some padding between the two labels
});
window.add(label);
window.add(label2);
window.open();