Issue with displaying the radio button label in tianium?

Question

I have created a radio button from the following link, https://github.com/yozef/TiRadioButtonGroup. I am able to see the radio buttons but the respective radio button labels are not showing. How can we display the radio button labels.

My code:

View:

<Alloy>
    <Window class="container">
        <View id="radiopicker" ></View>
    </Window>
</Alloy>

Style:

".container": {
    backgroundColor:"red",
    layout: 'vertical'
}

"#radiopicker":
{
    width: '90%',
    top: '25dp'
}

Controller:

(function() {   
    var radioButton = require('/ui/tiRadioButton'); 
    var radioGroup2 = radioButton.createGroup({
        groupId:1,
        width:20,
        height:150,
        layout:'vertical',
        radioItemsValue:['One', 'Two', 'Three'],
        radioItemsPadding:10,
        radioItemsBackgroundSelectedImage:'/radioButtonActive.png',
        radioItemsBackgroundImage:'/radioButton.png',
        radioItemsWidth:33,
        radioItemsHeight:34
    }); 
    var button = Ti.UI.createButton({
        title:'Get value' 
    });
    button.addEventListener('singletap', function(e) {
        alert("Vertical radioGroup selectedIdx: " + radioGroup2.selectedValue);
    });
    $.radiopicker.add(radioGroup2);
    $.radiopicker.add(button);
})();
$.index.open();

Screenshot: enter image description here

The label option one, two and three are not displaying. Please help me out of this issue. I need to display the labels too.

score 1 · Answer 1 · answered Oct 31 '14 at 14:45

1

I think you should put some label near to the radioButtons by yourself. Have a look at my modified code. It is not tested but should do the trick. Maybe you have to play around with the width/height/left etc attributes a bit.

(function() {   
    var radioButton = require('/ui/tiRadioButton'); 
    var radioGroup2 = radioButton.createGroup({
        groupId:1,
        width:20,
        height:150,
        layout:'vertical',
        radioItemsValue:['One', 'Two', 'Three'],
        radioItemsPadding:10,
        radioItemsBackgroundSelectedImage:'/radioButtonActive.png',
        radioItemsBackgroundImage:'/radioButton.png',
        radioItemsWidth:33,
        radioItemsHeight:34
    }); 
    //Create a view to hold your labels
    var labelsView = Ti.UI.createView({
        height:150,
        left: "30" //Or whereever you want to place it
        layout:'vertical'
    });
    //Create the labels
    var label1 = Ti.UI.createLabel({
        text: "One",
        height: "34",
        width: Titanium.UI.SIZE
    });
    var label2 = Ti.UI.createLabel({
        text: "Two",
        height: "34",
        width: Titanium.UI.SIZE
    });
    var label3 = Ti.UI.createLabel({
        text: "Three",
        height: "34",
        width: Titanium.UI.SIZE
    });

    //Attach the labels to your view and your view to your radioPicker view
    labelsView.add(label1);
    labelsView.add(label2);
    labelsView.add(label3);
    $.radiopicker.add(labelsView);

    var button = Ti.UI.createButton({
        title:'Get value' 
    });
    button.addEventListener('singletap', function(e) {
        alert("Vertical radioGroup selectedIdx: " + radioGroup2.selectedValue);
    });
    $.radiopicker.add(radioGroup2);
    $.radiopicker.add(button);
})();
$.index.open();

answered Oct 31 '14 at 14:45

Robin Ellerkmann

2,083
4
29
34

It is not working out. Is it possible to pass labels alongs with radio buttons , Ho scan we edit the following script file https://github.com/yozef/TiRadioButtonGroup/blob/master/Resources/app.js – Vinod Oct 31 '14 at 16:14
I do not think that it is possible to pass them directly. The itemValues refer to the value which is returned if you tap on a radio button, they are not displayed. As @turtle already pointed out it should be possible to implement it but I do not know enough about module editing. Btw, what do you mean that it does not work out? Are the labels displayed or what happens? – Robin Ellerkmann Oct 31 '14 at 16:19
I know that my code does not fit perfectly out of the box. You could rearrange your main view by a layout for example. Or you can give absolute values to your views. Everything is possible. I guess you have the choice wether you implement the functionality into the module or if you try to manipulate your own layout. I would definitely recommend the second option because it is simpler and people are more likely to help you when you have qustions because they are familiar with Titanium layouts. – Robin Ellerkmann Oct 31 '14 at 17:09
Does it fit for all screen sizes ? (Iphones/Ipods) – Vinod Oct 31 '14 at 17:33
Yes because you can treat it just like any other view. If you work with percentage oder dp for your width and height it should be no problem. – Robin Ellerkmann Oct 31 '14 at 17:35
I set the size and height. But for labelsView left property is not working. So labels are showing at center – Vinod Oct 31 '14 at 18:26
How can I move labels to left – Vinod Oct 31 '14 at 18:26
Set left: 0 in label1, label2 and label3 – Robin Ellerkmann Oct 31 '14 at 18:29
It worked. I will accept and up vote your answer. If I get any issue with radio button, I will let you know through comments please suggest some suggestion – Vinod Oct 31 '14 at 18:48
If it is just a minor issue this is fine, otherwise I recommend to open a new question to gain more attention. – Robin Ellerkmann Oct 31 '14 at 20:07
How to set the wrap text aliment on the Radio buttons. One of the radio text is more then 50 characters but it not showing the all characters in the app. – Ramesh Somalagari Apr 01 '15 at 07:49

score 1 · Accepted Answer · answered Oct 31 '14 at 21:44

1

I've gone ahead and updated my Module which will give you the result you want... You can fetch it here:

https://github.com/yozef/TiRadioButtonGroup

answered Oct 31 '14 at 21:44

Yozef

829
11
27

You must dispatch an event from the module, example in tiRadioButton.js (add to line 61). `self.fireEvent('updatedResult', {index:i});` and then listen to that event from the parent window let the module listen to the fired event `radioGroup.addEventListener('updatedResult', function(e) { Ti.API.info(e.index) });` – Yozef Nov 03 '14 at 19:39
Hi, After submit button I need to reset the selected answer. How can I do that. After submit button I need set default selected index as 0 (OR) if possible clear the selected answer. Just like refresh after submit . Please give some suggestion, How can implement that? – Vinod Dec 03 '14 at 08:09
1

Just pushed new code. you have the reset() method available now. – Yozef Dec 03 '14 at 23:56
You'r awesome. Thank you for you patience. Thanks a lot. It worked – Vinod Dec 04 '14 at 08:00

score 0 · Answer 3 · answered Nov 10 '14 at 08:27

I have gone through your code and found that your window background color is set to 'white' or '#ffffff' and in tiRadioButton.js module label color is also set to 'white' or '#ffffff'. Hence you are not able to see the lable.

You can change either the window backgroundColor or label color.

For change windowBackground color :

at abc.tss file

".container": {
    backgroundColor:"red", // any color you want
    layout: 'vertical'
}

For change Label color :

at tiRadioButton.js file

   var radioItemLabel = Ti.UI.createLabel({
        width:Ti.UI.SIZE,
        height:Ti.UI.SIZE,
        text: arg.radioItemsValue[i],
        font: {}, // Can add your own font styles
        color:'#FFFFFF', //Label color
        top:isVertical?null:5, // 5 padding between RadioBtn & Label
        left:!isVertical?null:5, // 5 padding between RadioBtn & Label
        id:i,
    });

//**In color field you can change the label color **

Issue with displaying the radio button label in tianium?

3 Answers3

Linked