Column separation in config list using CSS.

On page 2 (of the form listed below) in the configurable list, the last column, #16, has a basic / full button that overlaps itself because it does not have enough width. Is there a way to put just this column on its own new line / give it more width so that both the basic / full buttons show in this configurable list? Thanks!

Form: https://www.jotform.com/build/82721570184153

Please inject the CSS code inside your widget's CSS.

input#radio_input_1_row16 {

    position: absolute;

    top: 50px;

    left: -65px;

}

Let us know if you have any questions or if you need further assistance. 

It doesn't seem to affect all the radio buttons inside the configurable list. Please give me some time to test it and I will get back to you.

Thank you for waiting. Please add the code below to your configurable list widget's CSS https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets.

#list > tbody > tr:nth-child(2) > td.col16 > div > div:nth-child(1) {

    position: absolute;

    top: 327px;

    left: 685px;

}

#list > tbody > tr:nth-child(2) > td.col16 > div > div:nth-child(2) {

    position: absolute;

    top: 376px;

    left: 685px;

}

#list > tbody > tr:nth-child(3) > td.col16 > div > div:nth-child(1){

    position: absolute;

    top: 765px;

    left: 685px;

}

#list > tbody > tr:nth-child(3) > td.col16 > div > div:nth-child(2){

    position: absolute;

    top: 815px;

    left: 685px;

}

#list > tbody > tr:nth-child(4) > td.col16 > div > div:nth-child(1){

    position: absolute;

    top: 1204px;

    left: 685px;

}

#list > tbody > tr:nth-child(4) > td.col16 > div > div:nth-child(2){

    position: absolute;

    top: 1254px;

    left: 685px;

}

#list > tbody > tr:nth-child(5) > td.col16 > div > div:nth-child(1){

    position: absolute;

    top: 1643px;

    left: 685px;

}

#list > tbody > tr:nth-child(5) > td.col16 > div > div:nth-child(2){

    position: absolute;

    top: 1693px;

    left: 685px;

}

#list > tbody > tr:nth-child(6) > td.col16 > div > div:nth-child(1){

    position: absolute;

    top: 2083px;

    left: 685px;

}

#list > tbody > tr:nth-child(6) > td.col16 > div > div:nth-child(2){

    position: absolute;

    top: 2133px;

    left: 685px;

}

#list > tbody > tr:nth-child(7) > td.col16 > div > div:nth-child(1){

    position: absolute;

    top: 2522px;

    left: 685px;

}

#list > tbody > tr:nth-child(7) > td.col16 > div > div:nth-child(2){

    position: absolute;

    top: 2572px;

    left: 685px;

}

#list > tbody > tr:nth-child(8) > td.col16 > div > div:nth-child(1){

    position: absolute;

    top: 2961px;

    left: 685px;

}

#list > tbody > tr:nth-child(8) > td.col16 > div > div:nth-child(2){

    position: absolute;

    top: 3012px;

    left: 685px;

}

#list > tbody > tr:nth-child(9) > td.col16 > div > div:nth-child(1){

    position: absolute;

    top: 3400px;

    left: 685px;

}

#list > tbody > tr:nth-child(9) > td.col16 > div > div:nth-child(2){

    position: absolute;

    top: 3450px;

    left: 685px;

}

#list > tbody > tr:nth-child(10) > td.col16 > div > div:nth-child(1){

    position: absolute;

    top: 3840px;

    left: 685px;

}

#list > tbody > tr:nth-child(10) > td.col16 > div > div:nth-child(2){

    position: absolute;

    top: 3889px;

    left: 685px;

}

The output should look like the image below. 

If that is not what you are trying to achieve, please let us know. Looking forward for your response. 

Hey Jed_C,

 

Thanks so much!! It worked great! There's just one issue.

 

One issue is that when I go to push the "full" button it doesn't animate the push like the "basic" button does. If you try to click both, it should be apparent what I'm talking about. Do you know how I could fix this?

Also, is there a way to slightly increase the space between the text and the top "basic" button....the text almost overlaps the buttons.

Otherwise it looks awesome!

Please give me more time to work on the issue. I'll contact you once I found a solution. Thank you for your patience and for your understanding.

Jan I figured out the text portion of my question. Just not the animation part now.

Please look for the CSS block in your widget's CSS and replace the "col5" with "col16". Check the highlighted in red from the CSS below.

td.col16 input[id*="0_row"]:active:after, td.col5 input[id*="1_row"]:active:after {

    box-shadow: none !important;

    background: #4db7d8 !important;

    color: black;

    left: -15px !important;

    top: -3px !important;

}

Sample screencast:

Here's a working form https://form.jotform.com/83478206572968. Feel free to clone it if you want https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL.

I hope that helps. Let us know if you have any questions or if you need further assistance. 

This works perfectly now!! Thanks so much!!