I have a problem with titanium 3.5.0. When I want to position my ui element based on previous element in the layout with some methods like getWidth or getTop I'm getting Nan and in the console I'm getting a warning that says:
Invalid dimension value (nan) requested. Making the dimension undefined instead.
I have scrollview and I want to arrange my item into it so what I did
this is my scrollview code
var scrollView = Ti.UI.createScrollView({
contentWidth: 'auto',
contentHeight: 'auto',
backgroundColor:'#fff',
showVerticalScrollIndicator: false,
showHorizontalScrollIndicator: false,
height:"100%",
width: "100%",
top:36.6
});
and the scrollableview code
var view = Ti.UI.createView({
backgroundColor:'#fff',
borderRadius: 0,
height: 2000,
width: Ti.UI.FILL
});
and then I started adding my ui element in the view
var type =Ti.UI.createLabel({
text:"Type",
color:label_color,
right:207,
left:label_p_l,
font:{ fontFamily: customfont,fontSize:17},
top:37.5
});
var p_name=Ti.UI.createLabel({
text:"Property Name",
color:label_color,
left:label_p_l,
font:{ fontFamily: customfont,fontSize:17},
top:type.getTop()+label_h+32
});
so now it's working perfectly because type has a numeric value and even I added three more element in this way and every things works perfectly after that
I have added the 4th element like this and now when I started to get Nan.
var space_Slider = Titanium.UI.createSlider({
top:space.getTop()+space.getHeight()+15,
min:0,
max:1000,
value:0,
height:4,
backgroundColor:"#fff",
leftTrackImage:'/images/slider_color.png',
rightTrackImage:'/images/slider_color.png',
thumbImage:'/images/slider.png',
});
now the space.getTop() starts returning Nan
Any ideas how to solve this problem?
That happens because you've specified width / top not as numeric data type, but as string. "100%", "15dp" etc
getWidth() returns numeric data types IFF you pass numeric to width parameter when constructing the element or invoking setter method.
Furthermore, if you don't specify width / top parameters during construction of the elements they will not return anything.
To get the dimensions of the element you need to add them to some container / parent view and postlayout all elements. After this is done you can ask for dimensions like this:
element.size.width
Related
I have a situation in which I want to display data in a FluentUI DetailsList, where column names can be very long, while the column content can be very narrow. In such a case, the header will be truncated.
See this codepen.
Is there any way to change this behavior, such that the header text wraps over multiple lines?
While I found this unanswered question from 2 years ago, I couldn't find an answer on the topic on neither Stackoverflow, Github or the offical documentation.
Here are some approaches I tried:
inject a CSS class with word-break: break-all; via the headerClassName field of IColumn
setting isMultiLine on the columns
The DetailsHeader component itself whose rendering I can override with onRenderDetailsHeader does not seem to offer any props for customizing how the text is displayed
Is there even a way to achieve the desired behaviour (wrapping over multiple lines instead of truncating long column headers)?
Most of FluentUI Components uses text-overflow: ellipsis. What you can do is to modify that "rule". Inside DetailsList you have onRenderDetailsHeader method which allows you to change header styles.
const onRenderDetailsHeader = (headerProps, defaultRender) => {
if (!headerProps || !defaultRender) {
//technically these may be undefined...
return null;
}
return defaultRender({
...headerProps,
styles: {
root: {
selectors: {
'.ms-DetailsHeader-cell': {
whiteSpace: 'normal',
textOverflow: 'clip',
lineHeight: 'normal',
},
'.ms-DetailsHeader-cellTitle': {
height: '100%',
alignItems: 'center',
},
},
},
},
})
}
<DetailsList
...
onRenderDetailsHeader={onRenderDetailsHeader}
/>
Codepen working solution
Note:
Play around with minWidth, maxWidth props inside this._columns to get expected behavior.
I want to change dynamicaly type of qml Item without re-creation. In this example window transforms into popup window and question is how to transform it to qml Item.
ApplicationWindow {
title: qsTr("Hello World")
width: 640
height: 480
Window {
id: myWindow
height: 300
width: 300
visible: true
MouseArea {
anchors.fill: parent
onDoubleClicked: myWindow.flags = Qt.Popup
}
}}
What are you trying to achieve?
You must understand that when you "transform" your Window into a popup Window, the actual type of your object does not change. You only set a flag, which happen to give your window a popup behavior. As to dynamically change the type of a QML object, I don't think it is even possible, and I don't see the point of it.
When I want to make a 'pupup', I use something like that
Rectangle{
id:picker
visible:false
function find_superparent( child_object) {
var fparent;
fparent=child_object.parent;
while(fparent.parent) fparent= fparent.parent;
return fparent;
}
Component.onCompleted: picker.parent=find_superparent(picker)
...
}
and, when I want to show the popup
picker.visible=true
I use this function (find_superparent) in dynamic component creation/destruction too...
this method works... I don't know if exists a better way ...
I'm using Dojo 1.9 to start learning, and I'm having trouble disabling the resize of the Simple Textarea. I don't really have a particular need to do this, I was just curious about how to and have since been unable.
There is no property listed in the Dijit API, and changing the CSS either with .set("style"), including it inline in the original container (I'm doing it programmatically), or even trying to set resize to none in the original declaration ie:
var textarea = new SimpleTextarea({
rows: 5,
cols: 10,
onFocus: function(){ console.log("textarea focus handler"); },
onBlur: function(){ console.log("textarea blur handler"); },
selectOnClick: true,
style: "resize=none",
value: "This is a sample SimpleTextarea."
}, "textarea");
Any ideas?
If you set style equal to an object with a key value pair of resize : "none" that will do the trick
var textarea = new SimpleTextarea({
style: {resize : "none"}
}, "textarea");
You can do like this:
<input dojotype="dijit.form.SimpleTextarea"
id="yourTxtWidget"
style="resize:none; width: 230px; height: 75px;"
class="myTextField"/>
I am having a bit of trouble figuring out why there are missing items from the AttributeComboBox that I am testing. From debugging, I can clearly see that the field config has an array containing all the items, but only 15 are visible in the UI. Is there a config that needs to be specified to increase the number of displayed items?
It looks like maxHeight within the listConfig needs to be set. I had tried the maxHeight config, which didn't work, so I had assumed it was not a height issue. For reference, both configs have a default value of 300, so if you're having a similar experience, adjust the height above 300. There is also no extra whitespace if the maxHeight is set well above what may be needed to display all items.
Here is an example:
this.example = Ext.widget('rallyattributecombobox', {
model:'PortfolioItem',
field:'Something',
fieldLabel: 'Something',
labelWidth: 150,
stateful: false,
listConfig: {
maxHeight: 465
}
});
Okay, guys -- I have to admit that my frustration level is growing as Titanium development continues to kick my backside. Every change I make, however innocuous it may appear, seems to break something else in a completely unexpected way.
Today, I'm simply trying to add a label to a view, but it's not displaying.
// UI Factory Include
var Inova = {};
Ti.include( '_ui.js' );
var win = Ti.UI.currentWindow;
win.layout = 'vertical';
// Header
win.add( Inova.ui.createHeaderView() );
// body
var body = Ti.UI.createView({
backgroundColor:'#00f', // Should see no blue
backgroundImage: '/images/body.png',
height: 350,
layout: 'vertical',
});
var label = Ti.UI.createLabel({
color: '#000',
text: 'Show me the label...please?',
textAlign: 'center',
});
body.add( label );
win.add( body );
I know I have to be missing something incredibly stupid and basic, but I think I've lost all ability to see the obvious. Help?
I think you need to explicitly set the width/height in the label. You can set it to width: 'auto', height: 'auto' but it has to be set.
(Oddly enough this is not true in Andriod, from my experiences).
Whenever I get flummoxed by the API, I return to the basics. Try this:
Create a new project called myTest. In the apps.js file add the following code to the bottom of the file above the last line
var win3 = Titanium.UI.createWindow({
title:'Tab 3',
backgroundColor:'#fff'
});
var tab3 = Titanium.UI.createTab({
icon:'KS_nav_ui.png',
title:'Tab 3',
window:win3
});
var label3 = Titanium.UI.createLabel({
color:'#999',
text:'I am Window 3',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});
var txtLabel = Ti.UI.createLabel({
color: '#000',
text: 'Show me the label...please?',
textAlign: 'center',
left: 100,
top: 50
});
win3.add( txtLabel );
win3.add(label3);
Your label, txtLabel, will now appear below label3 on tab3. I tried using the code you provided, but failed to get it to work as well. So, start with a basic page that shows the label, then add the other components until you get the expected results.
Hope that helps.