单选按钮组标签过大及禁止换行问题求助（附ExtJS代码）

Hey there! Let's fix those two RadioGroup issues you're dealing with in ExtJS. Here's what you can do:

1. Fixing oversized radio button labels #

The label size issue can be addressed either by applying inline styles to individual radio buttons or using a custom CSS class for the entire RadioGroup (better for consistency):

• Option 1: Inline style per radio
  Add a style config to each radio item to adjust the font size directly:

  {
      boxLabel: 'Standard Communication',
      name: 'typeOfCommunication',
      inputValue: '1',
      style: { fontSize: '14px' } // Adjust to your desired size
  }
  

• Option 2: Custom CSS class (recommended)
  Add a cls to your RadioGroup, then define styles in your CSS file:

  xtype: 'radiogroup',
  cls: 'compact-radiogroup', // Add this class
  // ... rest of your config
  

  Then in your CSS:

  .compact-radiogroup .x-form-cb-label {
      font-size: 14px;
      margin-right: 15px; /* Optional: Adjust spacing if needed */
  }
  

2. Preventing label line breaks #

To stop the box labels from wrapping, you just need to set white-space: nowrap on the label elements. Again, you can do this inline or via CSS:

• Inline approach
  Add this to each radio item's style config:

  style: { whiteSpace: 'nowrap' }
  

• CSS class approach
  Extend the custom class we created earlier:

  .compact-radiogroup .x-form-cb-label {
      font-size: 14px;
      white-space: nowrap; /* This prevents wrapping */
  }
  

Full modified code example #

Here's how your updated config would look with both fixes applied using the CSS class method:

items: [{
    xtype: 'radiogroup',
    margin: "0 0 0 150",
    labelAlign: 'left',
    columns: 2,
    vertical: true,
    cls: 'compact-radiogroup',
    items: [
        {
            boxLabel: 'Standard Communication',
            name: 'typeOfCommunication',
            inputValue: '1'
        },
        {
            boxLabel: 'Bulk Communication',
            name: 'typeOfCommunication',
            inputValue: '2'
        }
    ]
}]

And the corresponding CSS:

.compact-radiogroup .x-form-cb-label {
    font-size: 14px; /* Adjust to your preferred size */
    white-space: nowrap; /* Disable line wrapping */
    margin-right: 20px; /* Optional tweak for spacing */
}

This should resolve both issues for you. Let me know if you need further adjustments!

内容的提问来源于stack exchange，提问作者nicolasbilous