I have 4 buttons on a page that are running this code
> def runAction(self, event):
> # Define selected and default styles
> selected_bg = "#757575"
> default_bg = "#151515"
> default_border = "1px solid #444444" # Optional: restore a border to unselected buttons
>
> # Get all sibling components in the same container
> parent = self.parent
> for child in parent.getChildren():
> if 'backgroundColor' in child.props.style:
> child.props.style['backgroundColor'] = default_bg
>
> # Restore border to unselected buttons
> if 'border' in child.props.style:
> child.props.style['border'] = default_border
>
> # Apply selected style to the clicked button
> self.props.style['backgroundColor'] = selected_bg
> self.props.style['border'] = "none" # Removes the border on selected button
I've noticed that despite the line I have in regards to not having a border color when selected, I am still getting this thin blue line around the buttons.
Does anyone know what I might be missing that will get rid of that blue border?
That's the focus outline. It tells the user that pressing spacebar will trigger a button event. If you remove it your user is reduced to using mouse or touch screen (or hitting the keyboard in the hope that the focus is on the right component).
Try adding this to your Styles | stylesheet.css:
button:focus{
outline: none;
}
On a more general note, define the styles in a style class - it's the way of the web - rather than hard-coded. That way you can be consistent across your project and a global change is simple.
Also, if you use the Multi-State Button component you could probably eliminate the script. Add the style setting gap : 40px or whatever to space them out. I should be telling you to do this via the stylesheet but I haven't time to work it out.
Use states.x.selectedStyle and states.x.unselectedStyle to define the appropriate style class for each case and delete the default backgroundColor properties (as these will be defined in your style class).
I have the default styles defined in the style section of the props editor, but I couldn't find a way to have the button change color on selection and only allow one button to be 'selected' at a time without adding the script. Maybe that's because I didn't use the multi-state button? I've only been using ignition for a couple weeks, so it's all been sort of cobbled together as I go.
Adding that line to the stylesheet worked perfectly though! Thank you!
Well you've got a better sense of understated style than many of the contributors!
Try the multi-state. It should be very simple to replicate what you've set up but much cleaner.
1 Like
