PDA

View Full Version : How to change place of radio button



livinglegends
23 Jul 2010, 3:56 AM
Hi,

In my application I have radio button. It looks in application as shown in 1.png file.
But I want to change its look as shown in 2.png file.

Plz provide workaround or any hint to do it.

Thanks

livinglegends
23 Jul 2010, 3:57 AM
In above post, First Image is 1.png and second image is 2.png.

Condor
23 Jul 2010, 6:26 AM
Just fiddle with the css a bit.

livinglegends
23 Jul 2010, 6:29 AM
I have thinked over it before posting here but didn't get any idea or hint for it.

Plz. provide some hint or sample css.

livinglegends
26 Jul 2010, 12:16 AM
Just fiddle with the css a bit.

Can you provide some css hint as I am not that much aware with CSS.

Condor
26 Jul 2010, 1:40 AM
Is this a radio button in a form layout or another layout (requires different styling)?

livinglegends
26 Jul 2010, 2:16 AM
Is this a radio button in a form layout or another layout (requires different styling)?

Actually, I have total 4 radio buttons so using RadioGroup and set columns property 1. That means layout will be ColumnLayout.

Condor
26 Jul 2010, 3:01 AM
Can you post the code for you radiogroup? I'll try to come up with some styling for it.

livinglegends
26 Jul 2010, 3:54 AM
Find the below code snippet of Radiogroup I have used.


xtype:'radiogroup',

style:{margin:'20px'},
columns:1,
hideLabel:true,
defaults:{
name:'Default Name'
},
items:[
{
boxLabel:'Sender domains<br>&nbsp;&nbsp;&nbsp;&nbsp;OR<br>&nbsp;&nbsp;&nbsp;&nbsp;Receipient domains',
checked:true
},
{
boxLabel:'Sender domains<br>&nbsp;&nbsp;&nbsp;&nbsp;AND<br>&nbsp;&nbsp;&nbsp;&nbsp;Receipient domains',
style:{marginTop:'10px'}
},
{
boxLabel:'Sender domains<br>&nbsp;&nbsp;&nbsp;&nbsp;AND NOT<br>&nbsp;&nbsp;&nbsp;&nbsp;Receipient domains',
style:{marginTop:'10px'}
},
{
boxLabel:'Receipient domains<br>&nbsp;&nbsp;&nbsp;&nbsp;AND NOT<br>&nbsp;&nbsp;&nbsp;&nbsp;Sender domains',
style:{marginTop:'10px'}
}

]
}

Condor
26 Jul 2010, 4:28 AM
Try:

<style type="text/css">
.my-radiogroup {
margin: 20px;
margin-top: 0;
}
.my-radiogroup .x-form-check-wrap .x-form-radio {
position: absolute;
top: 21px;
}
.my-radiogroup .x-form-check-wrap .x-form-cb-label {
position: static;
display: block;
margin-left: 0;
padding-left: 17px;
margin-top: 20px;
}
</style>
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Viewport({
layout: 'form',
items: [{
anchor: '0',
autoHeight: true,
xtype: 'radiogroup',
cls: 'my-radiogroup',
columns: 1,
hideLabel: true,
defaults: {
name: 'Default Name'
},
items: [{
boxLabel: 'Sender domains<br>OR<br>Receipient domains',
checked: true
},{
boxLabel: 'Sender domains<br>AND<br>Receipient domains'
},{
boxLabel: 'Sender domains<br>AND NOT<br>Receipient domains'
},{
boxLabel: 'Receipient domains<br>AND NOT<br>Sender domains'
}]
}]
});
});
</script>

livinglegends
26 Jul 2010, 6:13 AM
Really gr8 work. Looking excellent.

Thanks a ton buddy.