-
freedom_migrationAsked on August 5, 2018 at 6:11 AM
Hi!
I'd like to ask help in setting up my Configurable list to make it look neater. I tried looking around in the forums on how to put some fields in another row and I succeeded (somewhat) but it looks aweful!
My form is here: https://form.jotform.me/82162589102455
My code is:
.checkbox, .radio {
margin: 3px 0;
min-width: 70px;
}
.d {
display:none;
}
.col1 [type="dropdown"] {
width: 225px;
}
tr {
display: block;
}
td.col4 {
display: block;
position: relative;
top: 20px !important;
}
td.col5 {
display: block;
position: relative;
top: -18x !important;
left: 130px !important;
}
td.col6 {
display: block;
position: relative;
top: -56px !important;
left: 307px !important;
}
tr {
display: block;
}
td.col7 {
display: block;
position: relative;
top: -20px !important;
}
th {
display: none;
}
td.col1:before {
content:"Relationship to you";
}
td.col2:before {
content:"Surname, Given Name";
}
td.col3:before {
content:"Birth date";
}
td.col4:before {
content:"Relationship Status";
display: block;
}
td.col5:before {
content:"Year Citizenship granted";
display: block;
}
td.col6:before {
content:"Country of Citizenship";
display: block;
}
td.col7:before {
content:"Australian immigration status";
display: block;
}
Page URL: https://form.jotform.me/82162589102455 -
Welvin Support Team LeadReplied on August 5, 2018 at 10:22 AM
Here's a more cleaner version of that:
#list > tbody > tr:first-child { display: none; }
.mobileColumnName { display: block; }
td { float: left; }
To move columns to a new line, use this:
td.col4, td.col7 { clear: left; } This will move "Relationship Status" 2nd row and "Australian immigration status" to 3rd row.