How to Align Range Text Upper Limit to Right

Anonymous

#250609

Hi,

I would like to know how to style the range text upper limit to right.

Example from this:
https://prntscr.com/t90it1

To this:
https://prntscr.com/t90itc

Thanks.

Trevor

#250653

Are you able to send me a live link/URL to your search page so I can take a look?

Anonymous

#250658

Unfortunately, I’m running this locally now. Is there anything else I can provide? Paste the code?

Trevor

#250660

OK, you need to do two things.

Set the field to have a max-width, something like this:

.sf-field-post-meta-edd_price {
  max-width: 235px;
}

You will need the actual class name for the li element in the form, mine is just an example.

Then this CSS to move the value over:

.sf-range-max {
  float: right;
}

Anonymous

#250681

Wow, almost there. The dollar sign prefix is still stuck in front.
https://prntscr.com/t97g8b

I tried adding sf-range-prefix but both $ prefix flew to the right.
https://prntscr.com/t97jk2

Any solution?

Trevor

#250687

Try having no prefix, and use this CSS:

.sf-text-number:before {
  content: "$";
}

Anonymous

#250698

Thank you so much! Problem solved!

Trevor

#250704

Thanks for letting me know. I will close this thread for now.

[Author]

Posts