Should I separate the configurable lists or recombine it with the other one?

And separately, I need your advice on what to do about the 3rd config list. 

I'm trying to be most effective with the use of screen-space - is it smart to keep it separate like now, or recombine it with the second list and then get you to split it over 2 or more rows like you did in this earlier thread?

If  you feel re-combining them serves a purpose, can we somehow maintain the labels as described above, including the text field to simulate sub-label text?

If not, keeping them separate would be needed, however the third list would still need to be split over two rows - if this is the answer, then can you split the 6 fields into 2 rows of 3, all having the field-width of the 'Description' field

It is advisable to keep the lists separate as it is, since I noticed that there are several different css being applied to your form at the moment. It may become difficult to keep track of all the changes in css and conditions made if you choose to recombine the 4 sets of Configurable Lists. 

By keeping the Configurable Lists separate, we simply need to add the css below to split the fields into 2 rows of 3.

th {

    display: none;

}

select {

    width: 161px;

}

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

    display: block;

    float: left;

    width: 161px;

    padding: 20px 5px 1px 1px;

}

td.col1:before {

    content: "Affects you when?";

    font-size: 11px;

    display: block;

}

td.col2:before {

    content: "How often?";

    font-size: 11px;

    display: block;

}

td.col3:before {

    content: "Is it in?";

    font-size: 11px;

    display: block;

}

td.col4:before {

    content: "Is it in or on? ";

    font-size: 11px;

    display: block;

}

td.col5:before {

    content: "Radiates elsewhere?";

    font-size: 11px;

    display: block;

}

td.col6:before {

    content: "Description";

    font-size: 11px;

    display: block;

}

That's really good, thank you.
Can you help me get this now closer to it's label? There is less space
between the config list entry boxes and the label before this change...
*Regards,*
*Dr. Ben Phillips*
Chiropractor
B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
...

Oh, and can the hint text for all of them go back to being light grey?
It looks like I'd need to make this change across most of the config lists,
as they seem to have become normal black
*Regards,*
*Dr. Ben Phillips*
Chiropractor
B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
...

You can add the css below to the custom css of the list widgets to make the list closer to its label and also turn the text to light grey.

td:before {

    color: #555555;

}

.col1, .col2, .col3 {

    padding-top: 0px!Important;

}

.col4, .col5, .col6 {

    padding-top: 10px!important;

}

Regards.

This did a great job of getting the two rows of the config list together,
but not so great about getting the rows up closer to their label...
...

Try to add this line in your Custom CSS code for List widget:

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

    margin-top: -20px!important;

    display: block;

    float: left;

    width: 161px;

    padding: 20px 5px 1px 1px;

}

 

So, just add the line marked with yellow to the existing block of CSS code, that should bring your list closer to title and look like this:

You can put even bigger number then 20 if you want it closer.

If you need further assistance please let us know.

Thank you!

So, I put this code in and it made a mess of things (at least in builder
view).
I changed your code to -10 and it works great, thanks.
Now, because I have a text field (that I've heavily modified to make it
look like sub-label text for the above this configurable list) there is a
big 'space'
Can I have some code to make similar change to the padding of the config
list we've just modified (top padding into the negative) so that it can
effectively 'overlap' the textbox 'space' just like I'm getting the textbox
above it to 'overlap' the bottom of the config list above it...
Does this make sense? If not, please advise.
*Regards,*
*Dr. Ben Phillips*
Chiropractor
B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
...

If I understand correctly, you must be referring to this field.

What you can do also is to lessen the height of the TEXT field above the configurable list. For that element, this CSS code will do

#cid_386{

heightn: 3px !important;

}

Let us know if this is not it and if this did not work.

That is definitely the space I am referring to, and there are 3 other
similar fields lower in the form (total of 4)
I applied your code and it didn't seem to make a difference...
*Regards,*
*Dr. Ben Phillips*
Chiropractor
B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
...

I know this is still an open questionl...and I don't want it to get lost, but I have another question going back to an earlier fix on this thread by Nik_C...

 

I found another config list (input_199) that has been split into two rows, and has extra space between the rows.

Here is the custom CSS I have been given for it...can you tell me where I would put the equivalent of...    margin-top: -20px!important  to decrease the space between the two rows??

=============================================

td.col1, td.col2, td.col3, td.col4, td.col5, td.col6, td.col7, td.col8 { display:inline-block; float: left; padding: 15px 5px 3px 3px; }

td.col1:before { content: "Type: "; width: 19%; }

td.col2:before { content: "Brand Name:  "; width: 19%; }

td.col3:before { content: "Prescribed? "; width: 19%; }

td.col4:before { content: "Reason for Meds: "; width: 19%; }

td.col5:before { content: "Dosage: "; width: 19%; }

td.col6:before { content: "Frequency: "; width: 19%; }

td.col7:before { content: "Course: "; width: 19%; }

td.col8:before { content: "Monitored? "; width: 19%; }

td.col1 { width: 19%; }

td.col2 { width: 19%; }

td.col3 { width: 19%; }

td.col4 { width: 19%; }

td.col5 { width: 19%; }

td.col6 { width: 19%; }

td.col7 { width: 19%; }

td.col8 { width: 19%; }

th { display: none; }

.col6 select, .col7 select { width: 130px; }

.col4 input[type="text"] { width: 188px; }

 

select:not(:focus) {

 

    color: gray !important;

 

}

 

select:focus {

 

    color: black !important;

 

}

 

Hi,

Regarding the height of the space at the top configurable list, you can change the CSS given by my colleague, jonathan, to

div.form-input-wide {

height: 3px !important;

}

 

Regarding the decreasing of the space between rows of the config list, you can place the margin-top: -20px !important to this part.

td.col1, td.col2, td.col3, td.col4, td.col5, td.col6, td.col7, td.col8 { margin-top: -20px !important; display:inline-block; float: left; padding: 15px 5px 3px 3px; }

 

Do let us know if you need further assistance.

That first piece of code - is that in the general CSS or in the CSS for the
config list itself?
div.form-input-wide {
height: 3px !important;
}
*Regards,*
*Dr. Ben Phillips*
Chiropractor
B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
...

That first part of code should go in General CSS, since it applies to the whole form, and second CSS applies to configurable list.

Let us know if you have further questions.

Thank you!

That was a profoundly useless piece of code! It was form-wide and changed everything!

I promptly deleted it.

The impact I want to achieve was described by your colleague above:

Answered by jonathan on July 15, 2016 at 10:27 PM

He gave some code with the attempt to reduce the height of the text-field - it didn't seem to do anything.

What I need is the gap reduced in 4 places only, not the whole form!

There are 4 text boxes whose padding characteristics have been significantly altered so that their text 'looks' like subtext for the control above them (id 386, 393, 394, 395)

What I'm trying to achieve is the reduction of the 'space' that I have inadvertently created by me altering the textbox characteristics in this way.

I would like the appearance of ( inputs 320, 344, 345, 346) to be further upward - either by reducing the size of the textboxes as initially suggested, or

perhaps altering the top padding of ( inputs 320, 344, 345, 346) in a similar way to have them move 'up' the page...but NOT if this will just mean the same problem underneath them and the next elements on the page!

 

Please try:

li#id_320,  li#id_344, li#id_345, li#id_346{

    margin-top: -30px !important;

}

The result should be like this:

 

If you'd like to adjust the spacing between the label and the input areas, you can add the following custom CSS codes:

div#cid_320, div#cid_344, div#cid_345, div#cid_346 {

    margin-top: -15px;

}

You absolute legends! That is looking amazing! Thank you!
*Regards,*
*Dr. Ben Phillips*
Chiropractor
B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
...