Reply To: Search results are showing category

[Ernest MarcinkoKeymaster]

Hi!

Thank you very much for your kind words!

Right-left layout, solution 1
For your current configuration (flex layout), the following custom CSS will force the items in the settings box to start from the right side, instead of the left:

.wpdreams_asp_sc-6.searchsettings {
  max-width: 10000px !important;
}

.wpdreams_asp_sc-6.searchsettings form {
  justify-content: flex-end;
}

Right-left layout, solution 2
If you however prefer the items displayed in one column, but on the right side, then you will have to change the settings as well, so:
– Change the front-end options as following: https://i.imgur.com/wA5u0lA.png
– Now, the options will be displayed in one single column, but still on the left side. To get around that, use this custom CSS:

.wpdreams_asp_sc-6.searchsettings {
  float: right !important;
}

This will result in this type of layout: https://i.imgur.com/CBJBAac.png

Safari glow-effect select boxes
This is unfortunately a forced layout built into safari browsers, and it’s essentially almost impossible to get by. The only solution that works is the following:

.wpdreams_asp_sc-6.searchsettings form select {
  -webkit-appearance:none;
}

..however, this will also remove the arrow from the left side of the select boxes as well.
You can then also force a white background, border and a dark font color (+ a bit of other styling):

#ajaxsearchprobsettings6_1.wpdreams_asp_sc-6.searchsettings form select,
#ajaxsearchprobsettings6_1.wpdreams_asp_sc-6.searchsettings form select {
  border: 1px solid  #adadad !important;
  background: white !important;
  color: #424242 !important;
  max-width: 190px;
  float: right;
}

This will result in the following layout: https://i.imgur.com/R62CGef.png

I hope this helps you!

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)