Toggle buttons instead of radio inputs

2
Dear community, as I use a lot of radion-buttons (mostly with 2-3 choices) – I was wondering if it would be possible to change the “look” of the radiobuttons to something like 2 or 3 buttons next / or below to each other. A bit like this: http://codepen.io/samkeddy/pen/PbROLK/ or even this: https://codepen.io/adamstuartclark/pen/pbYVYR/ I tried to add some of the CSS code from the examples to my project and assigned the corresponding class to the radiobutton object – but it doesn’t work. Has anyone experience with such things? Thank you very much
asked
7 answers
0

Hi Peter,

Yes I’ve done similar things before, but always used buttons (with microflows that set corresponding values) and used styling to make them look how I wanted. An alternative is using (‘helper’ non persistent) objects in combinations with a listview, that you style to make it look like on of your examples. Use on-click microflows to select/deselect/setValue.

 

answered
0

Hi Wieke,

thanks for the quick answer.

The first variant makes sense to me but would be a lot of manual work on my app.
Maybe you could elaborate on your second variant, I don't quite understand how this could.

Thanks a lot.

answered
0

when using your first method - do you can use a enumeration value as button caption? If not I would have to change the value twice when wanting to change a enumeration value. Once in the enumeration and again on every button that triggers the microflow to set the attribute to that enumeration-value.

answered
0

Sure, take your ‘select difficulty’ example image:

You can, on entering a page for instance, generate all difficultyHelper objects based on a masterdata table of difficulty options, or hardcoded in a microflow based on available (enum) values. Use a listview (which you can style to display objects horizontally instead of vertically) and apply the styling to the li (listitem) objects. Set the on click action to toggle the ‘isSelected’ attribute, and to set the difficulty attribute on your main object. A bit of work, but easier this way to add elements/text/etcetera to your ‘button’.

Hope this helps! 

answered
0

Thanks Wieke.

I'm not quite sure I understand what you mean, but I will try this second solution out in the next few days.

To your first solution (to simply trigger microflows using the buttons that set the attribute) - how do you get the button you clicked to appear as selected? So, for example, it stays colored - even if you click on another object on the page.
I tried it with some Java code, which adds a CSS class to the button clicked, but if I have multiple of those custom queries with buttons on one page, it only adds the selected class to one button at a time. So no 2 buttons of 2 different queries can be selected on one page.

Thank you

answered
0

I’ve seen this work really well with the following setup

$default-transition:                    all .2s ease-in-out;
$input-select-bg-color:                 #d9edf7;
$input-select-inner-box-shadow:         inset 0 2px 2px 0 #82d1e8;
$default-border-radius:                 4px;
 
.enum-group {
    line-height: 45px;
    height: 45px;
    > div {
        display: inline-block;
        line-height: 45px;
        height: 45px;
        &.radio {
            padding: 0;
            width: 20%;
        }
        > label {
            background: linear-gradient(#fff, #eaeaea);
            background-color: $bg-color;
            border: 1px solid $default-border-color;
            border-left: 0;
            line-height: 45px;
            height: 45px;
            width: 100%;
            text-align: center;
            &:active:focus {
                outline: 0;
            }
            &:hover {
                transition: $default-transition;
            }
            &.checked {
                background: none;
                background-color: $input-select-bg-color;
                box-shadow: $input-select-inner-box-shadow;
                > label {
                    color: $font-base-color;
                }
            }
            > label {
                margin: 0 !important;
                line-height: 45px;
                height: 45px;
                font-size: 1em;
            }
        }
        &:first-child > label {
            border-top-left-radius: $default-border-radius;
            border-bottom-left-radius: $default-border-radius;
            border-left: 1px solid $default-border-color;
        }
        &:last-child > label {
            border-top-right-radius: $default-border-radius;
            border-bottom-right-radius: $default-border-radius;
        }
    }
    .iradio_flat-aero {
        background: none;
        width: 1px;
    }
}

 

answered
0

Thanks Stephan,

if I use the widget and your styling I get totally misaligned radio buttons. But even if I style them correct and click one – this one does not get “selected”. I then asigned a “selected” CSS class to the button clicked via JavaScript but it only works for one of the radio button widgets on the page. 

But I need to use more than one of the radio button widgets on one page. Problem is if I click on e.g. button-choise1 of the first radiobutton widget and afterwards on button-choise1 of the second radiobutton widget the first one gets “deselected” again.

Any idea on how to fix this?

answered