What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Assign Background Colors for Orderable List Widget

    Asked by zugfrig78 on December 15, 2013 at 11:42 PM

    gday, 

     

    playing with the orderable list widget and was wondering if i could change the background colour of the little boxes... id like to make the first 18 green, the next 6 (19-24) red, and leave the rest the default color, so that when a user rearranges the order they can easily identify the top 18 and next 6.

     

    i dont want to highlight the first 18 and 6 names just thier postions so no matter which name is put into that first 18 or 6 they change to the color of green ro red as above

     

     

    alos upon submitting could it be possible to receive the results in a single colum layout (vertical) rather than a long sentance

     

     

    example:

     

    John

    Fred

    Alex

    Paul

    Michael

     

    instead of 1: John, 2: Fred, 3: Alex, 4: Paul, 5: Michael

    Page URL:
    http://tpctestsite.weebly.com/9000.html

    name next colour background colour
  • Profile Image

    Answered by zugfrig78 on December 15, 2013 at 11:48 PM

    also can it be made to work on ios/andriod?

  • Profile Image
    JotForm Support

    Answered by Welvin on December 16, 2013 at 04:35 AM

    Hi,

    Unfortunately, that's not possible at the moment. Let me add this thread to our feature request list. However, we cannot give you any timeframe as to when this will become available or if there's a chance that our developers would consider this in the future. All we can assure you is the notice for any progress made into this.

    Thank you.

  • Profile Image

    Answered by zugfrig78 on December 16, 2013 at 07:42 PM

    ive been told pasting this in will work... can you tell me where to paste is?

     

    #sortableList li:nth-child(-n+18) {
        background-color: green;
        color: #fff;
    }

  • Profile Image
    JotForm Support

    Answered by abajan on December 16, 2013 at 08:49 PM

    Such code would normally be injected but it probably won't work in this instance because currently widgets are included in our forms via iFrames. Just to be certain, I cloned the form in question and injected the rule and it had no effect. I even added the !important keyword:

    #sortableList li:nth-child(-n+18) {
    background-color: green !important;
    color: #FFF !important;
    }

    Anyway, my colleague Welvin has submitted a ticket requesting that form creators be allowed to alter the appearance of the Orderable List widget.

    Incidentally, in case you're wondering what that selector in the above rule targets, according to the Select Oracle it Selects any li element that is not one of the first eighteen children that is a descendant of any element with an id attribute that equals sortableList.

    "And what exactly does that mean?" you may ask. Time for a quick CSS tutorial! Please see the following:

    MaxDesign CSS Tutorials


    Cheers

  • Profile Image
    JotForm Support

    Answered by abajan on December 16, 2013 at 08:51 PM

    I forgot to include the link about how to inject CSS into your forms.

  • Profile Image

    Answered by zugfrig78 on December 17, 2013 at 06:04 AM
    Hi Abajan.I get the ccs insert now, but the video gave me a headache... I'll need to watch it again...Meanwhile could this solve my iPhone/android issue? http://eightmedia.github.io/hammer.js/
  • Profile Image
    JotForm Support

    Answered by KadeJM on December 17, 2013 at 10:14 AM

    As my colleague Abajan has pointed out in the above Video for Quick CSS based on Ordered Lists which is a control factor for the elements involving. It can sometimes be a headache if it is either not working right, misunderstood, or misconfigured requiring futher resolution. To my knowledge it should also work for iPhone/Android but you may likely need to reInject it with further detailed CSS that is tweaked more specifically to targeted Mobile Platforms.

  • Profile Image

    Answered by zugfrig78 on September 01, 2015 at 08:21 AM

    Hi

     

    ive been away from this idea for nearly 2 years lol.

     

    was there ever an enhancement to allow colouring of the boxes?

  • Profile Image
    JotForm Support

    Answered by KadeJM on September 01, 2015 at 09:54 AM

    Yeah, I know it's been awhile since the last time we spoke with you about this. 

    I believe this should be possible as of now since a lot of our widgets now support Custom CSS via an internal css box for widgets in the widget wizard if available for that particular widget.

  • Profile Image
    JotForm Support

    Answered by KadeJM on September 01, 2015 at 10:05 AM

    I've decided to test this further for you and I can confirm 100% that it is possible now.

    Example: 

    http://form.jotform.us/form/52433823397157? 

     

    Css:

    #sortableList li:nth-child(odd) {

    background-color: green !important;

    color: #FFF !important;

    }

     

    Result:

  • Profile Image

    Answered by zugfrig78 on September 01, 2015 at 10:18 PM

    LEGEND, LEGEND LEGEND!!!!

     

    so happy

     

    ive used

     

     #sortableList li:nth-child(-n+18) {

        background-color: green;
        color: #fff;
    }

     

    to get the first 18 green....

     

    is there a way I can make

     

     

    *  the first 18 green

    *  the next 4 yellow

    *  the reminder red?

  • Profile Image

    Answered by zugfrig78 on September 01, 2015 at 11:12 PM

    ahhh ha.... never mind.. i worked it out

     

    http://form.jotform.co/form/33488475113862

     

    using

     

    #sortableList li:nth-child(-n+18) {

        background-color: green;

        color: #fff;

    }

     

     

    #sortableList li:nth-child(19) {

        background-color: yellow;

        color: #000;

    }

     

    #sortableList li:nth-child(20) {

        background-color: yellow;

        color: #000;

    }

     

    #sortableList li:nth-child(21) {

        background-color: yellow;

        color: #000;

    }

     

    #sortableList li:nth-child(22) {

        background-color: yellow;

        color: #000;

    }

     

    #sortableList li:nth-child(n+23) {

        background-color: red;

        color: #000;

    }

  • Profile Image

    Answered by zugfrig78 on September 01, 2015 at 11:39 PM

    OK - NOW that i have worked that out and am happy.. a new thought has crossed my mind...

    everything works but is there a way to restructure the layout like the picture below...

     

    still let the names be moved wherever the user likes but showing the first 18 (green) in rows of three (left to right) and then 19-24 (yellow) in rows of three left to to right and finally 25-42 (red) in rows of three left to right (preferable with a gap between 24 and 25)

     

  • Profile Image
    JotForm Support

    (Private)

    Answered by abajan on September 02, 2015 at 07:06 AM

    Howdy zugfrig78,

    We're glad you're happy with the new functionality of the widget. Since your latest question relates to positioning and not color, I've moved it to a new thread (https://www.jotform.com/answers/653304) where my answer may be found.

    Thanks