0

I'm wondering how to style the "circles" in a radio button so that they are more visible to me. I want the border of them to be a certain thickness and color. Here is what I have:

{
            xtype: "radiogroup",
            fieldLabel: "Eligibility Verification",
            labelCls: 'labelstyle',
           // fieldCls: 'qrgtextfieldstyle',
            fieldStyle: {
                border: '1px solid black'
            },
            labelWidth: 250,
            width: 450,
            vertical: false,
            fieldCls: 'blahblah',
            defaults: {xtype: "radiofield",name: "eligverif"},
            items: [
                { boxLabel: 'Manual',  bind: {
                    value: '{qrg.eligVerifManual}'
                }},
                { boxLabel: 'Electronic', bind: {
                    value: '{qrg.eligVerifElectronic}'
                }/*, checked: true */}
                ]
    }

I've tried just about everything.
radio field styling issue

radiofield styling issue

Ramprasath Selvam
  • 3,868
  • 3
  • 25
  • 41
jdbrotec
  • 1

1 Answers1

0

I think you will never successfully shoot the element to be selected to your CSS style. There is "labelCls" property to select the parent element of the label, but there is no "fieldCls" property to select the parent element of the field. You must use "cls" to add your custom class name. See https://docs.sencha.com/extjs/7.0.0/modern/Ext.field.RadioGroup.html#cfg-cls

I have my own fiddle-like as editor to show you how to achieve your goal. I think your skill need to be improved. I will give you this example, try think with your own logic. "When you can give your custom classes to your element, you can do everything to style them by using custom CSS".

How to place the custom class

in the picture above, label:'thisIsLabel' will be a parent class of radiogroup.

Here is the children of "thisIsRadio" Class to be selected .x-checkboxfield .x-icon-el classes are the sample classes of the element which is the child of thisIsRadio class. Just style them as you want, for example I change the color of the radio becomes red by using developer tools (element inspector). How to write these styles by selecting the parent and the children in css file? try to learn more about selector in css. https://www.w3schools.com/cssref/css_selectors.asp

starlight93
  • 126
  • 1
  • 6
  • Thanks for the response but this did not help me. The circles in the pic above are gray. How do I get them to be black? – jdbrotec Dec 30 '19 at 12:39
  • I edited my answer with an example for new comer. Try to understand it by your own logic. – starlight93 Jan 01 '20 at 01:07
  • Thanks for your response. I'm still having trouble, though. Here's what I have: – jdbrotec Jan 03 '20 at 17:43
  • { xtype: "radiogroup", fieldLabel: "Eligibility Verification", labelCls: 'labelstyle', labelWidth: 250, width: 450, cls: 'qrgrad', vertical: false, itemCls: 'qrgradio', defaults: {xtype: "radio", name: "eligverif"}, items: [ { boxLabel: 'Manual', bind: { value: '{qrg.eligVerifManual}' }}, { boxLabel: 'Electronic', bind: { value: '{qrg.eligVerifElectronic}' }/*, checked: true */} ] } – jdbrotec Jan 03 '20 at 17:43
  • I have this in my Main.scss file: .x-checkboxfield .x-icon-el { color: red; width: 160px; height: 160px; } .qrgrad { color: red; } – jdbrotec Jan 03 '20 at 17:44
  • I actually created a fiddle if that would be easier: https://jsfiddle.net/jdbfiddle/okwsve42/9/ – jdbrotec Jan 03 '20 at 18:18