Not all fields in the Configurable List Widget are displayed when viewed on mobile

Also kindly asking about my configurable list viewing from Mobile phone, as not all the list fields will showing, how can I fix it.

The Configurable List widget is not mobile responsive by default, and that's the reason why you're not seeing the rest of the fields when viewed on mobile.

This can be fixed by using CSS. You have a lot of Configurable List Widgets on your form though so you need to do this for each and every Configurable List Widget.

Here are the codes that you need:

td,td:before{display:block}.radio,td{float:left}.checkbox,.radio{margin:3px 0;min-width:300px}div#listContainer{background:transparent}th{display:none}td{margin:16px 0 0!important;min-height:40px;max-width:620px;width:99%!important}input[type=text],select,textarea{box-shadow:none;border-radius:0;padding:4px}td[class*=col]:before{width:100%;float:left;font-weight:700}td [name=input],td>select,textarea{width:100%!important;box-sizing:border-box}img.calendarIcon{display:none}.radio{width:50%}.buttonsColumn{min-height:30px;text-align:right}textarea{min-height:120px}table{border-collapse:collapse}#list tbody>tr+tr+tr{margin-top:22px;border-top:1px solid #ccc;box-shadow:1px 0 0 #ccc}#list tbody tr td:first-child{padding-top:20px!important}.checkbox label{margin-left:-17px!important;position:relative;left:18px}

td.col1:before { content: "Field Label 1"; }

td.col2:before { content: "Field Label 2"; }

td.col3:before { content: "Field Label 3"; }

td.col4:before { content: "Field Label 4"; }

td.col5:before { content: "Field Label 5"; }

Take note of the last 5 lines above. You have to change the content (highlighted in green) based on the number of fields you have on the widget, and their corresponding labels. Everything else highlighted in yellow will remain the same.

Example: 

For your first widget on the RESEARCHER DETAILS section, you have a total of 3 fields - Researcher Name - اسم الباحث / Academic Rank - الدرجة الأكاديمية / Department - القسم

With this kind of setup, you would need to change the last 5 lines above with the following:

td.col1:before { content: "Researcher Name - اسم الباحث"; }

td.col2:before { content: "Academic Rank - الدرجة الأكاديمية"; }

td.col3:before { content: "Department - القسم"; }

(labels 4 and 5 would be deleted since there are only 3 fields)

You would then add all the CSS Codes to the CUSTOM CSS section of each respective widget.

Once again, you have to do this on each and every Configurable List Widget that you wish to appear properly on mobile. And you also need to modify the codes each time depending on the number of fields and their corresponding labels.

Thank you so much,
Now it's working fine but for the Date field in the last configurable list it will be not show if I put the same code to it.
Maybe you didn't include the code related to the date field.
Thank you,
________________________________
...

I'm glad we're making progress. You should still use the same CSS Codes, only this time, append the following line at the end (before the field labels):

.dateDrowdowns {float: left;}

The end result would be:

td,td:before{display:block}.radio,td{float:left}.checkbox,.radio{margin:3px 0;min-width:300px}div#listContainer{background:transparent}th{display:none}td{margin:16px 0 0!important;min-height:40px;max-width:620px;width:99%!important}input[type=text],select,textarea{box-shadow:none;border-radius:0;padding:4px}td[class*=col]:before{width:100%;float:left;font-weight:700}td [name=input],td>select,textarea{width:100%!important;box-sizing:border-box}img.calendarIcon{display:none}.radio{width:50%}.buttonsColumn{min-height:30px;text-align:right}textarea{min-height:120px}table{border-collapse:collapse}#list tbody>tr+tr+tr{margin-top:22px;border-top:1px solid #ccc;box-shadow:1px 0 0 #ccc}#list tbody tr td:first-child{padding-top:20px!important}.checkbox label{margin-left:-17px!important;position:relative;left:18px}.dateDrowdowns {float: left;}