rtl move search box to be in right side of the search button

Home Forums Product Support Forums Ajax Search Pro for WordPress Support rtl move search box to be in right side of the search button

This topic contains 3 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 4 years, 6 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #15956
    davsev
    davsev
    Participant

    Hey,
    I have the search box in the image.
    I have a few issues:
    1. How do I move the button to the left and move the input to the right?
    Tried a few css ways but without success.
    2. How do I change the font family in the placeholder?

    Thank you
    David

    Attachments:
    You must be logged in to view attached files.
    #15965
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi!

    1. With this option here: https://i.imgur.com/Qav1yfS.png
    If that does not work, then this custom CSS will do the trick:

    .probox .promagnifier {
        order: 1 !important;
        -webkit-order: 1 !important;
    }

    2. Here: https://i.imgur.com/QBCISe8.png
    If you want a very specific font, then with this CSS you can force it:

    .proinput input {
        font-family: inherit !important;
        font-size: 18px !important;
    }

    I hope this helps!

    Best,
    Ernest Marcinko

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


    #15981
    davsev
    davsev
    Participant

    Thank you for your fast answer.
    1. I meant to move the entire button to the left.
    This is what I did:

    
    .probox{
    display: flex !important;
    flex-direction: row-reverse !important;
    }
    

    2. Your result changes the input font but not the placeholder font.
    How do I change the placeholder font?

    #15995
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi!

    2. For placeholder, I believe separated rules may be required:

    .probox input::-webkit-input-placeholder {
      // same rules here
    }
    
    .probox input.orig::-moz-placeholderr {
      // same rules here
    }
    
    .probox input:-ms-input-placeholder {
      // same rules here
    }

    It has to be 3 separate rules, otherwise browsers may not recongize them.

    Best,
    Ernest Marcinko

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


Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.