-
marinamoehringAsked on November 28, 2021 at 9:09 AM
Our wish would be for your company to have its own configurable list since the list that is a widget has issues when it comes to appearance especially on mobile phones (responsive) and looking like the rest of the form in terms of the actual input fields and general appearance.
In our case, we have patients putting in their medications. I have been given some help but no help has worked to the point of a good solution thus far.
I did use the custom CSS suggested but, I remain having problems:
#list {
width: 50%;
border-collapse: collapse;
}
#list tbody:first-child > tr > td{
display:block
;
padding: 10px 1px;
}
#list tbody:first-child > tr:first-child {
display: 100%;
}
#list tbody:first-child > tr + tr + tr {
border-top: 10px solid #ccc;
}
#list > tbody:first-child tr td.col1 {
padding-top: 10px;
}
#list {
width: 100%;
border-collapse: collapse;
}
#list tbody:first-child > tr > td{
padding: 10px 1px;
}
#list tbody:first-child > tr:first-child {
}
#list tbody:first-child > tr + tr + tr {
border-top: 15px solid #ccc;
}
#list > tbody:first-child tr td.col1 {
padding-top: 20px;
}
input {
height: 30px !important
;
}
Here is what I would like the input fields to emulate the rest of the form's template fields: Here is what some of the configurable list look like now:
-
marinamoehringReplied on November 28, 2021 at 9:13 AM
The Allergy to Antibiotics is the closest I have been able to get the widget to look a bit like the rest of the form. The headers are not on each field and the inside is not looking right either. Can you help?
-
Nina_JReplied on November 28, 2021 at 9:28 AM
Hello,
Thank you for contacting Jotform Support.
Please allow me some time to check on your query. I will get back to you as soon as I can.
Thanks!
Nina
-
Nina_JReplied on November 28, 2021 at 9:54 AM
Hi @marinamoehring,
Thank you for patiently waiting.
Looking into your screenshots above, you would like to have another field where they can type in freely the information needed such as medications, etc.
e.g
Have you tried using the Multiple text fields widget?
Please let us know if that suits your need, otherwise, I apologize if I misunderstood your concern.
Regards,
Nina
-
marinamoehringReplied on November 28, 2021 at 10:14 AM
Sorry but the patients need to be able to add medications. I did try to use that widget. This is actually more involved. Thanks in advance.
-
Sam_GReplied on November 28, 2021 at 10:55 AM
Hello Marinamoehring,
You may add this CSS directly into the Configurable list widget CSS tab.
.form-textarea {
max-width:45% ;}
#list tbody:first-child > tr:first-child {display: none;
}
#list {
width: 100%; border-collapse: collapse;
} #list tbody:first-child > tr > td{
display:block; padding: 6px 0;
}
#list tbody:first-child > tr + tr + tr {
border-top: 1px solid #ccc;
}
#list > tbody:first-child tr td.col1 {
padding-top: 20px;
}
.mobileColumnName {
display: inline-block; padding-bottom: 4px; width: 40%; box-sizing: border-box;
}
.mobileColumnName + input, .mobileColumnName + textarea, .mobileColumnName + select, .mobileColumnName + .radio-container, .mobileColumnName + .checkbox-container, .mobileColumnName + .dateContainer {
width: 60%; display: inline-block; box-sizing: border-box; vertical-align:top; box-shadow:none;
}
.buttonsColumn {
text-align: right;
}
.add, .remove {
white-space: nowrap;
margin-left: 195px;
width: 295px;
}
I hope this helps.