I am trying to create a textarea box within a scrollview. The problem is that it works in iOS, but in Android, when typing multiple lines within the textarea, I cannot scroll up and down to view what I have typed. I know in native Android that you can provide a maximum number of lines and the scrollbars to allow in the view XML file that allows a scrollable textarea within a scrollview, but is there a way to do something similar or a different way of doing this for Titanium?
Here is the code which I am using:
var win = Ti.UI.createWindow({
title: 'Test',
backgroundColor: 'transparent'
});
var view = Ti.UI.createScrollView({
top: 10,
left: 10,
right: 10,
});
var ta = Ti.UI.createTextArea({
top: 5,
left: 5,
right: 5,
height: 400,
backgroundColor: '#AA8BC9'
});
var btn = Ti.UI.createButton({
top: 800,
left: 10,
right: 10,
width: Ti.UI.FILL,
height: Ti.UI.SIZE,
backgroundColor: 'FF00CC',
text: 'OK'
});
view.add(ta);
view.add(btn);
win.add(view);
win.open();
Kibria, This is the problem in old titanium sdk. I also facing this problem with tableview and scrollview in android. I hope this problem can resolve in new titanium sdk.
The alternative solution is you need to set scrollview layout to vertical. and your TextArea height set to auto and then add your button. In this way your scrollview and textarea works perfect for you.
Related
I was just playing around with this plugin called jBox.js and came across a few new options. It's a pretty customizeable plugin. The option I am talking about is adjustDistance.
The documentation says, you can pass in an integer or object, like so:
$(function(){
$('.tooltip').jBox('Tooltip', {
trigger: 'click',
adjustDistance : {
top : 15,
bottom : 15,
left : 15,
right : 50
}
});
});
I did that , but I don't see any difference in the way my tooltip is rendered, made a FIDDLE HERE.
The documentation describes this option as follows:
Distance to the window edge when adjusting should start. Use an object
to set different values, e.g. {top: 50, right: 20, bottom: 5, left:
20}
But I don't quite understand its usage. Can anybody explain?
If we give adjustDistance say 10, the tooltip will try to adjust(reposition) itself when any of window's edge is within 10px distance of the tooltip. You can give custom values for different edges of window as well.
This examples will make it clear:
Example 1:
$(function(){
$('.tooltip').jBox('Tooltip', {
trigger: 'click',
adjustDistance : {
top : 15,
bottom : 15,
left : 15,
right : 50
}
});
});
Example 2 (changing value for adjustDistance bottom):
$(function(){
$('.tooltip').jBox('Tooltip', {
trigger: 'click',
adjustDistance : {
top : 15,
bottom : 150,
left : 15,
right : 50
}
});
});
For both of them, try clicking on button to open tooltip and then resize the window shrinking from bottom such that tooltip needs to readjust.
this question is related to smartface.io. I having some problem while implementing the slider drawer.
This is the slider drawer that I used. When I touch on 3, there is a container will be shown.
After I clicked, the slider drawer is closed. I tried to check slider drawer hide through onHide. However, the function not being called.
I need to reopen the slider drawer. Then it only show me what I want.
This is the structure of the elements
Here is the sample code:
var list = ["1","2","3","4","5","6","7"];
var catList = ["a","b","c","d","e","f","g","h","i","j","k","l"]
for(var item in list) {
var label = new SMF.UI.Label({
text : list[item],
width: "100%",
height: "100px",
horizontalGap: "10dp"
});
if(list[item] === "3"){
container = new SMF.UI.Container({
width: "100%",
height: (100 * catList.length) + "px",
enabled: false,
orientation: 1,
layoutType: SMF.UI.LayoutType.linear
});
for(var catItem in catList){
var catLabel = new SMF.UI.Label({
text : catList[catItem],
width: "100%",
height: "100px",
horizontalGap: "60dp"
});
container.add(catLabel);
}
label.onTouchEnded = function(e){
container.visible = !container.visible;
}
Pages.HomePage.sdMenu.svMenu.ctnMenu.add(label);
Pages.HomePage.sdMenu.svMenu.ctnMenu.add(container);
}else{
Pages.HomePage.sdMenu.svMenu.ctnMenu.add(label);
}
The question is, How can I achieve that without closing the slider drawer? Thank you.
I tried this with your code, at the opening I got the exact screenshot3 that you get. I could see the catList open.
Then I pressed 3, the catList was closed but the sliderDrawer was still open. I tried this a couple of times.
As I understood your problem is this; when you press 3, the sliderDrawer closes at the first time, after that when you open it again, it shows the screenshot3.
If this is right, then can you please give the name of the device you use?
If not, can you please describe again what you are trying to do?
I am new to Kendo Window and I'm planning to declare window.resize() function as a global jquery function for all of the Kendo Windows in the pages. How can I declare it?
I've added this code below on a .js file and referenced it in _Layout.cshtml but it doesn't work:
$(window).resize(function() {
$(".k-window").kendoWindow().center();
});
When Individually used, I am using this set of code:
var modal = $("#mdlWindow").kendoWindow({
visible: false,
resizable: true,
modal: true,
content: "../Position/Info,
width: "50%",
height: "50%",
maxWidth: 500,
maxHeight: 600,
minWidth: 300,
minHeight: 400,
top: 0,
bottom: 0,
left: 0,
right: 0,
iframe: true
}).data("kendoWindow");
modal.center().open();
$(window).resize(function() {
modal.center();
});
Any suggestions are accepted. If there is a way to do it in css I will try it.
Firstly Kendo Window is a specific Kendo UI widget in wherein widget element does not have k-window class but k-window-content. Class k-window is adding to element container.
Secondly to get Kendo Window instance you shoult use .data('kendoWindow') method instead of .kendoWindow().
And finally if you would have more than one window open you have to iterate for all of them to perform an action individually.
Therefore your code centering all Kendo windows on window.resize() event should looks like:
$(window).resize(function() {
var windows = $(".k-window-content");
windows.each(function(i,v){
$(v).data("kendoWindow").center();
});
});
Here is Kendo UI Dojo example: http://dojo.telerik.com/OjuwU
I'm struggling to make a scroll view scroll sidewards rather than up and down in titanium. I'll need the solution for both iOS and Android.
var challengesScrollView= Ti.UI.createScrollView({
top: '60%',
height: c1Container.height,
width: '60%',
backgroundColor: 'yellow',
zIndex: 9000,
/* left & right work too */
contentHeight:'auto',
});
challengesScrollView.add(c1Container);
challengesScrollView.add(c2Container);
challengesScrollView.add(c3Container);
mainContainer.add(challengesScrollView);
UPDATE:
my mainContainer is the following:
var mainContainer= Ti.UI.createView({
left: '5%',
right:'5%',
top: '9%',
bottom:'15%',
});
and c1Container is:
var c1Container= Ti.UI.createView({
top:'1%',
width:'70dp',
height: '90dp',
zIndex:20,
left:'10dp',
backgroundColor:'#3b214a',
borderRadius: 5
});
and it contains the following:
var c1PicView= Ti.UI.createView({
width: '55dp',
height: '55dp',
top: '5%',
borderRadius: 5,
//backgroundColor:'pink',
zIndex:5
});
var c1Pic= Ti.UI.createImageView({
image:'girl.jpg',
width: c1PicView.width,
height: c1PicView.height,
zIndex:5
});
var cName= 'Mary';
var c1Name=Ti.UI.createLabel({
color: 'white',
text: cName,
font:{fontSize: '14sp'},
top: '60dp'
});
c1Container.add(c1PicView);
c1PicView.add(c1Pic);
c1Container.add(c1Name);
c2 is the same as c1 apart from the name
I'm not sure how to position c1Container, c2Container and c3Container etc. so that they will just add on the view sidewards. I can't give actual pixel, left or right positions because the scroll view could have up to 20 mini containers. All help appreciated
simple thing is that you just need to set layout property to horizontal.
In fact, you can use a ScrollView (and it should work both on iOS and android).
I've just tried this code which works just fine :
var win = Ti.UI.createWindow();
var challengesScrollView = Ti.UI.createScrollView({
top: '60%',
height: '30%',
width: '60%',
backgroundColor: 'yellow',
layout: 'horizontal'
});
win.add(challengesScrollView);
function addView() {
challengesScrollView.add(Ti.UI.createView({
left: '10dp',
width: '100dp',
height: '100dp',
backgroundColor: '#FF0000'
}));
setTimeout(addView, 2000);
}
win.addEventListener('open', addView);
win.open();
This code add a new View to the ScrollView every 2 seconds and, as you wish, the ScrollView's width change every time.
The property layout: 'horizontal' is used to place each view horizontally in the ScrollView. Thus, you don't have to calculate the absolute position of each view.
If this property doesn't solve your issue, maybe you should share more code (for example the construction of your containers). Otherwise, it will be difficult to help you ;)
use Horizontal scroll widget in android
For iOS:
UIScrollView scrolls in different directions depending on its contentSize property. If you make the contentSize's width larger then the actual width of the scroll view, it should scroll horizontally.
var Section1 = Titanium.UI.createView({
top:0,
height: 'auto',
});
var Section2 = Titanium.UI.createView({
top:0,
height: 'auto',
});
I have two views and these two views has some buttons and TextFields which comes dyanmically. How can i control the Section 2 that it does not over lap the Section 1 View when its height gets increased.
I don't know if there's a better way, but I had a similar issue recently, which I tentatively solved like so
var Section1 = Titanium.UI.createView({
top:0,
height: 'auto',
});
// Add other views to Section1
var Section2 = Titanium.UI.createView({
top: Section1.toImage().height,
height: 'auto',
});
I think in your case the height will only be accurate after you've added your other views and objects to it.
If you are adding your views directly to the Ti.UI.currentWindow then you can just set layout of the Ti.UI.currentWindow to 'vertical' and the heights will automatically adjust
Ti.UI.currentWindow.layout = 'vertical';
Ti.UI.createView({
layout : 'vertical',
height : Ti.UI.SIZE
});