Having some issues with radiogroup vertical alignment

[mathias]

I am trying out the RadioGroup for the first time. Please see screenshot below of a RadioGroupItem The buttons are not centered aligned vertically for some reason, and i haven't managed to make it work, i suck at CSS.

I am using 13.1-p20250323 with an altered Tahoe skin.

I went in to your showcase to see if i could get any tips. (For some reason when you go into the showcase, it says 14.1 now?)

I did notice some differences. for example, in my load_skin i have:

if (isc.RadioGroupItem) {
        isc.RadioGroupItem.addProperties({
            height: 22,
            textBoxStyle: "staticTextItemLite"
        });
    }

    if (isc.RadioItem) {
        isc.RadioItem.addProperties({
            textBoxStyle: "staticTextItemLite",
            labelStyle: "labelAnchor",
            // use labelAnchor, which has no v-padding - the containing RadioGroupItem
            // uses the usual formCell class, which has the padding
            cellStyle: "labelAnchor"
        });

    }

whereas in your version you use

{isc.RadioGroupItem.addProperties({height:22,textBoxStyle:"radioAnchor",useNativeRadioItems:false,showOver:true,showOverIcons:true})

and

isc.RadioItem.addProperties({textBoxStyle:"staticTextItemLite",cellStyle:"labelAnchor"})}

So, my question is - was this something you also identified and have fixed in newer versions?

I sure would like to align the items if i'm to use it so pointers would be much appreciated.

Cheers

[Isomorphic]

hi mathias,

The Tahoe code in recent 13.1 actually doesn't quite look like you show - the latest code looks just like yours, except that there was a change that removed the labelStyle setting to fix stateful text-colors in radios.

If you remove the labelStyle setting and add useNativeRadioItems: false to the isc.RadioGroupItem block in your load_skin.js, that should address the immediate issue.

If not, please let us know.

We're going to switch Tahoe back to using custom radio-items, to correct this issue there, and we'll look at whether anything can be done with the native radios.

[mathias]

Heyhey thanks for quick response, that fixed it great.

However, i'm also trying to get images in rather than text, and that doesn't work as well. I am just throwing this out there to see if you have any tips.

my code:

public class IntegrationsSelectorItem extends RadioGroupItem {

    public IntegrationsSelectorItem(String id) {
        setName(id);
        setShowTitle(false);
        setValueMap(createValueMap());
    }

    private LinkedHashMap<String, String> createValueMap() {
        LinkedHashMap<String, String> valueMap = new LinkedHashMap<>();
        valueMap.put(""+0, "Orange");
        valueMap.put(""+1, "<img height = 40 style=\"vertical-align:center;\" hspace = \"0\" border = \"0\" src = images/int/fn_green.png />");
        //valueMap.put(""+1, i18n.strings.h_int_service_fortnox());
        valueMap.put(""+2, "Banana");
        return valueMap;
    }
}

result:

[Isomorphic]

What's the issue, that the image is very big and not v-centered? You've specified the size, so you could change that, and the v-centering issue is probably caused by CSS vertical-align not having a value called "center" - you want "middle" instead.

Note that you can also use Canvas.imgHTML() to generate image HTML, rather than hand-coding it.

[mathias]

Hey, fantastic response time thanks. Yeah it was the alignment, and yeah i had missed center/middle. Also thanks for the tip on Canvas.imghtml, i'm using it mostly, just had it explicit to show you.

Have a great day