ButtonGroup CSS on Selected Item

ButtonGroup CSS on Selected Item

  

Team,

I am facing an issue with ButtonGroup, the selected CSS is not getting apply on the item which is selected, meaning both the selected and non selected have same CSS [Color].

Anyone faced similar issue or have solution please help.


Shashank... 

Hi Shashank,

Do you have a plain vanilla theme, or did you (or someone else) make changes to the CSS? Also, did you use your browser's devtools to see why the correct CSS is not applied?

Hi Kilian,

I am using the Silk UI base theme for Mobile, not made any changes to default CSS. Yes I did the inspect element to find out that the SELECTED CSS is not getting applied.


Shashank

But why isn't it applied? Is there some other CSS overriding it? Is the class on the ButtonGroup wrong?

I do vaguely recall having problems with ButtonGroups in the past, but checking our most recent code, there's nothing special to fix anything, so I assume that's not what's currently a problem.

I am too wondering on the behavior, when i check on inspect element i found that the CSS "button.button-group-item" is applied, however it should be "button-group-selected-item".

Shashank

Ok, so the selected item class isn't applied to the HTML element? Do you have any errors in the browser's console?

No, i don't see any errors. 

Shashank

Hi guys,

I once had that problem while putting a radioButton+Label inside the buttons placeholder instead of using radioButton+Text.

I made that mistake because if you hover over the button widget it says to put a label inside the placeholder, but if you hover over the button placeholders it says correctly to use a text instead.

You might be having the same problem, i dont know...


Best regards,

Bruno Guedes

Shashank Diwan wrote:

I am too wondering on the behavior, when i check on inspect element i found that the CSS "button.button-group-item" is applied, however it should be "button-group-selected-item".

Shashank

Hi Sir,

Can you please share the oml file or demo link so we can check where is the problem


Regards,

Pankaj Pant

Kilian and Team,

Here is what i found, I was calling a client function on the ONCLICK event on the ButtonGroupItem, as soon as I remove that, it started working.

Now is there a limitation and how should I perform an action on the Click event?

Shashank 

Hi Shashank,

How can you remove the Client Action from the On Click event? The On Click is mandatory.

So Kilian, I just removed the client action I was calling on the On Click event of the ButtonGroupItem.

Now I have moved my logic to On Change of ButtonGroup and that gives me the ID of selected ButtonGroupItem.

Shashank 

Kilian, it is mandatory on Button but not on the ButtonGroup component.


Shashank

Yes, I saw that, I forget that, apologies. I think button groups are meant for what traditionally would be a radio button list, so to select one item out of a number of items (hence the button group has a Variable associated with it, and the button group item a Value). I think the onclick is already used by the Platform to change the class to button-group-selected-item, and when you override it, that functionality is gone.

So as I see it, you can either use the On Change of the Button Group, or handle this differently (e.g. by using "real" buttons).

Yes, you are right, i kept my logic on On Change of ButtonGroup and it worked.

However that raise a question here, if overriding On Click impact the CSS then it should be restricted, or may be explained that you need to handle the selected CSS logic by yourself.

Shashank

Hi Shashank,

I agree, it's pretty weird behaviour from a functional point of view.