[Solved]Ext.form.RadioButtons / cls-config --> the style does not change

[Charlyva]

Hi. I've created a RadioGroup and added a style-rule by the cls-config. Don't know why, but the style do not adapt on my radiobuttons. Forumsearch brought no further information for me. sad to say.

I guess, thats a simple thing. I would be truly grateful, if you look at my code and give me a hint whats going wrong.

Ext.onReady(function(){...
[code]
//---------WESTBOX - Im Norden steht die Filiale und der Modus, im S

[Condor]

The radiobox class is applied to the <INPUT type="radio">. But, looking at the styling, you rather want it applied to the surrounding <DIV>.

You could do that by adding a class to the panel (e.g. cls:radiobox) and define the style rule as:

.radiobox .x-form-check-wrap {
  margin:8;
  padding:0;
  font-size:10pt;
  vertical-align: middle;
}

[Charlyva]

thx for the quick reply. done like you recommended, but no succes yet.
do you mean i have to add the cls to the panel, holding the radiobuttons? Like that?

[code]
//erstellen einer Radiogroup, in der festgelegt ist, welche Aktion auf die Grid ausge

[Condor]

Correct (try changing the font-size to check if it works).

You can use Firefox with Firebug to look at the rendered HTML dom structure and see which classes are applied. Firebug also allows you to temporarily alter the styles to do a 'what if'.

[Charlyva]

Condor, you saved my javascriptet live for 2 times the last 2 days thank you for that.

Font-Size-changing does effect the radioboxes.
x-form-check-wrap is the css class of the <div> elements, where the radio-<input> tags are inside. so far so good. i'm starting to understand.
but my intension is, to increase the space between the single checkboxes. But setting margins does not take any effect. maybe i'm overlooking a detail?

simplified:

<div id:"aaa" class:"radiobox">
    <div id:"1" class:"x-form-check-wrap">
        <input id:"a" class:"x-form-radio">
    </div>
    <div id:"2" class:"x-form-check-wrap">
        <input id:"b" class:"x-form-radio">
    </div>
    <div id:"3"  class:"x-form-check-wrap">
        <input id:"c" class:"x-form-radio">
    </div>
</div>

.radiobox .x-form-check-wrap{
  margin:8;
  padding:0;
  font-size:10pt;
  vertical-align: middle;
}

[Condor]

Setting margin to 8 isn't valid. You also have to specify the unit (e.g. 8px).

[Charlyva]

oh no! THAT WAS THE PROBLEM! FROM THE BEGINNING!!!!!
quite cool --> starting the new year feeling very silly!!
thank you.
fg