New to the community? Start here

Could you help me with CSS in the search and sort function?

Hi, I am placing search and sort function in the members list page, but especially the sort part went weird like you can see in the following picture.

How can I make the page similarly like the following picture?

Thank you.

Thu, 29 Dec 2016 23:46:33

Nithin

Support Wizard

3,228 pts: Hero points 25,695 pts: Rep. points LEVEL 30

Hi Jeonghun,

Hope you are doing good today. :slight_smile:

Could you please try the following CSS, and check how that goes:

.pdb-searchform input[type=text], .pdb-searchform input[type=submit], .pdb-searchform select {

width: 20%;

}



input[type="submit"] {

background-color: #929f52;

padding: 1%;

width: 15%;

}



.pdb-searchform label.checkbox {

margin: 0 12% 0 1%;

}



.pdb-searchform .radio-group {

width: 50%;

}



#oscitas-restabs-1-members-list-2-88769 li.active > a {

background-color: #929f52;

}

#oscitas-restabs-1-members-list-2-88769 li a:hover, #oscitas-restabs-1-members-list-2-88769 li a:focus {

background-color: #a5b264;

}

You can add the above CSS code, using Custom CSS box(if your theme offers), or either using a Child theme, or a plugin like Simple Custom CSS.

Please let us know if you still need any further assistance. Have a nice day. :slight_smile:

Kind Regards,

Nithin

Jeonghun
- The Incredible Code Injector
- 6 pts: Hero points 297 pts: Rep. points LEVEL 5
Hi, @nithinkr09. Thank you for your help, but the text “Ascending and Descending” is not arranged well with the radio buttons and the Sort button is not adjacent with the after the text “Descending”. I would appreciate it if you could help me with how to fix it. Thank you for your help!!
Nithin
- Support Wizard
- 3,228 pts: Hero points 25,695 pts: Rep. points LEVEL 30
Hi Jeonghun,

Thank you for pointing that out, I could notice that, and it seems like the CSS is being overridden, could you please edit the above given CSS for the following ones:
```
.pdb-searchform .radio-group {

width: 40.5%;

}



.pdb-searchform label.checkbox {

margin: 0 12% 0 1% !important;

}
```
However the use of !important declaration is not something which I would recommend, but in some cases's it's necessary to apply these rules to overwrite the existing styles.

Your page should be as above once you add the given CSS, I hope this is what you're looking for, please check, and see whether it works fine. Have a great day ahead. :slight_smile:

Kind Regards,

Nithin
Jeonghun
- The Incredible Code Injector
- 6 pts: Hero points 297 pts: Rep. points LEVEL 5
Hi, Nithin, it worked great. Thank you very much!!

Have a great day.
Jeonghun
- The Incredible Code Injector
- 6 pts: Hero points 297 pts: Rep. points LEVEL 5
Hi, the search and sort function looks great in the desktop browser, but it does not show properly in my sell phone like in the following picture.

Could you help me make the search and sort function responsive in the cell phones?

Thank you!!

Kasia Swiderska

Support nomad

6,154 pts: Hero points 23,894 pts: Rep. points LEVEL 30

Hello Jeonghun,

Please add this code:

@media screen and (max-width: 480px) {



#participants-list-1 table.wp-list-table td {

padding-left: 41%;

}



.pdb-searchform input[type=text], .pdb-searchform input[type=submit], .pdb-searchform select {

width: 100%;

margin: 0 5px 8px 0 !important;

}



.pdb-searchform label.checkbox {

margin: 0;

display: block;

width: 10%;

}



}

kind regards,

Kasia

Jeonghun
- The Incredible Code Injector
- 6 pts: Hero points 297 pts: Rep. points LEVEL 5
Thank you very much, @bastetmilo. It works great. Happy New Year!!

Jeonghun

Ready to get started?

How do you rate me?

Thank you for rating your experience!