Support Forums

Support Forums › Forums › Search & Filter Pro › How to Align Range Text Upper Limit to Right

This topic is: resolved
Viewing 8 posts - 1 through 8 (of 8 total)
  • Jin Hoe Lian
    (Private)  June 30, 2020 at 10:25 am #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 Moderator
    (Private)  June 30, 2020 at 1:58 pm #250653

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

    Jin Hoe Lian
    (Private)  June 30, 2020 at 2:07 pm #250658

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

    Trevor Moderator
    (Private)  June 30, 2020 at 2:14 pm #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;
}
    Jin Hoe Lian
    (Private)  June 30, 2020 at 3:41 pm #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 Moderator
    (Private)  June 30, 2020 at 3:46 pm #250687

    Try having no prefix, and use this CSS:

    .sf-text-number:before {
  content: "$";
}
    Jin Hoe Lian
    (Private)  June 30, 2020 at 4:17 pm #250698

    Thank you so much! Problem solved!

    Trevor Moderator
    (Private)  June 30, 2020 at 4:24 pm #250704

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

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘How to Align Range Text Upper Limit to Right’ is closed to new replies.