I need css help

HI I have just made a form but need help with one section - I used a configurable matrix widget but am having trouble with the spacing and I need to make the '+' button to say 'add more cats'

 

Please can you help asap?

 

Many thanks

Hello tabukpaws,

You can change the '+' button in the Configurable List Wizard. Please try the following steps below:

1. Select the Configurable List widget field and then click the 'Wand' icon.

2. The wizard will open, please scroll down and you'll see the 'Label for Add' option. Here you can replace the '+' to 'Add more cats'.

 3. Click the 'Update widget' button when you're done.

 

May I know what is the problem with the spacing? I checked your form and I can see that the Configurable List are not arranged by columns, instead it is arranged by rows.  I am not sure if this is intentional or not but you can apply custom CSS on that widget.

I also noticed that you are using a 'Textarea' in the Cat Name. You can try the 'Text' field type so that it'll look more professional.

You can put space between the Cat Name label and the text box by adding custom CSS on the widget. Here's a guide:

1. Select the Configurable List widget field and then click the 'Wand' icon.
2. In the wizard, go to the 'Custom CSS' tab and paste this CSS code:

td.col1:before {

    margin-right: 20px !important;

}

Here's a reference guide: https://www.jotform.com/help/282-How-to-Set-Up-the-Configurable-List-Widget.

I hope that helps. Cheers!
-Fellow JotForm User

Awesome! Thanks so much testbens! The spacing is between the bold titles, eg after 'cat name' I'd like a space underneath before I have 'cat sex', after 'cat sex' and before 'cat age'

 

Also I changed the textarea to text, thanks. How do I now get a space between 'cat name' and the box?

 

Many thanks!

 

Kind regards

In order to adjust the space between the fields vertically, you need to increase the bottom margin of each field. Please go to the Configurable List wizard again and click the 'Custom CSS' tab.

Please insert this CSS code: 

td.col1, td.col2, td.col3, td.col4, td.col5, td.col6, td.col7, td.col8 {

margin-bottom: 10px !important;

}

If you want to increase the space between the label Cat Name and the text box, please add this CSS code:

td.col1:before {

margin-right: 20px !important;

}

 

I hope that works. 

 

Hi testbens

 

I added the margin-bottom: 10px !important 

 

but where shall I add the other line?

 

Here's what I have, I butchered it from the original code I copy and pasted. It's no doubt very ugly! :)

 

.checkbox, .radio {

 

margin: 6px 0;

 

min-width: 70px;

 

}

 

.d {

 

display:none;

}

 

.col1 [type="text"] {

 

 

 

}

 

 

 

 

tr {

 

display: block;

 

}

 

td.col1 {

 

    display: block;

 

    position: relative;

 

   

 

}

td.col2 {

 

    display: block;

 

    position: left;

 

   

}

 

td.col3 {

 

    display: block;

 

    position: left;

 

 

 

}

td.col4 {

 

    display: block;

 

    position: left;

 

   

 

}

 

 

 

td.col5 {

 

    display: block;

 

    position: left;

 

    

 

}

 

 

 

td.col6 {

 

    display: block;

 

    position: left;

 

 

 

}

 

 

 

td.col7 {

 

    display: block;

 

    position: left;

 

 

 

}

 

 

 

th {

 

    display: none;

 

}

 

.col1:before, .col2:before, .col3:before, .col4:before, .col5:before, .col5:before, .col6:before, .col7:before .col8:before .col9:before{

 margin-bottom: 10px !important;

    font-weight: bold;

 

}

 

td.col1:before {

 

    content:"Cat Name";

    font-weight: bold;

}

 

td.col2:before {

 

    content:"Cat Sex";

    font-weight: bold;

}

 

td.col3:before {

 

    content:"Cat Age";

    font-weight: bold;

}

 

td.col4:before {

 

    content:"How long have you had the cat?";

    font-weight: bold;

display: block;

 

}

 

td.col5:before {

 

    content:"Where did you get the cat from?";

    font-weight: bold;

display: block;

 

}

 

td.col6:before {

 

    content:"Do you need vaccinations?";

    font-weight: bold;

display: block;

 

}

 

td.col7:before {

 

    content:"Do you need a microchip?";

    font-weight: bold;

display: block;

 

}

 

td.col8:before {

 

    content:"Is the cat friendly?";

    font-weight: bold;

display: block;

 

}

 

td.col9:before {

 

    content:"Does the cat need to be trapped?";

    font-weight: bold;

display: block;

 

}

 

Thanks once again!

Please paste this whole CSS code (highlighted in blue) in the widget. You can just put it at the top of your codes. 

td.col1, td.col2, td.col3, td.col4, td.col5, td.col6, td.col7, td.col8 {

margin-bottom: 10px !important;

}

td.col1:before {

margin-right: 20px !important;

}

Here's a screenshot:

I hope this helps. Cheers!