Trying to make a multi picklist field (rendered as checkboxes) show green for checked and red for un

edited June 7, 2018 in Questions
Hi:  I don't know javascript and I have been trying to get this to work for hours.  I have a multi picklist field called "Items Done".  In my Skuid page, I render it as checkboxes.  Using CSS I have tried many options to get the .nxcheckboxwrapper to be green when the checkbox is checked and red when it is not, so that the staff can easily see what items they need to complete and it pops out at them more than just having the checkboxes.  (Making a game of it, to get all items green instead of red).  Listed below are the checkboxes and below that are the various css hacks I have tried, and I have done multiple combinations.  None of them worked. Hellp!

image

image

Comments

  • Bill McCulloughBill McCullough 💎💎
    edited May 21, 2018
    Corinne,

    I am not sure that this can be done without using a custom field renderer.  The issue is that when the checkbox is checked an attribute on the input element changes (aria-selected goes from false to true).  The label that you want to style is a 'parent' element of the checkbox.  I don't think you can select the parent element from the child element without using JavaScript.

    Here is a page that shows some things you can do with CSS.
    <skuidpage personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
        <models>
            <model id="UIOnly" query="true" createrowifnonefound="true" datasource="Ui-Only" processonclient="true">
                <fields>
                    <field id="Multiipicklist" displaytype="MULTIPICKLIST" label="Multiipicklist" ogdisplaytype="TEXT" picklistsource="manual">
                        <picklistentries>
                            <entry value="One" label="One"/>
                            <entry value="Two" label="Two"/>
                            <entry value="Three" label="Three"/>
                        </picklistentries>
                    </field>
                    <field id="Checkbox" displaytype="BOOLEAN" label="Checkbox" ogdisplaytype="TEXT"/>
                </fields>
                <conditions/>
                <actions/>
            </model>
        </models>
        <components>
            <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="UIOnly" uniqueid="sk-1unC-387" mode="edit">
                <columns>
                    <column width="50%">
                        <sections>
                            <section title="Section A" collapsible="no">
                                <fields>
                                    <field uniqueid="sk-1unC-407" id="Multiipicklist"/>
                                </fields>
                            </section>
                        </sections>
                    </column>
                    <column width="50%">
                        <sections>
                            <section title="Section B">
                                <fields>
                                    <field uniqueid="sk-1vDz-259" id="Checkbox"/>
                                </fields>
                            </section>
                        </sections>
                    </column>
                </columns>
            </basicfieldeditor>
        </components>
        <resources>
            <labels/>
            <javascript/>
            <css>
                <cssitem location="inline" name="colorpicklist" cachelocation="false">/*input[aria-selected="true"]{*/
    /*    width:4em;*/
    /*    height:4em;*/
    /*    color: green !important;*/
    /*    border-width:2em;*/
    /*    padding:4em*/
    /*}*/
    label[for^="ui-multi"] {
        background: #ffff00;
    }
    input[type=checkbox]:checked {
        width:4em;
        height:4em;

    </cssitem>
            </css>
            <actionsequences uniqueid="sk-1unC-253"/>
        </resources>
        <styles>
            <styleitem type="background" bgtype="none"/>
        </styles>
    </skuidpage>
    Thanks,

    Bill
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!