Compact box layout with both icon and search text

[tappeltParticipant]

(1) In compact box layout, the permanent object (when closed) is a very small square, enough for the search icon. Can that be widened, to show both the icon and the search box text, for greater visibility?
(2) The default placement of the icon seems to be in the left of any container in which it is placed, with the input box opening to the right. Can that be reversed, with the icon siting at the right hand side of the container in which it is placed?
Thanks!

[Ernest MarcinkoKeymaster]

Hi!

1. This might actually be possible with a custom CSS rule. Basically, giving a min-width property for the closed box will force to display more of it, so presumably the test as well. I would suggest something like this:

.asp_main_container.asp_compact {
    min-width: 96px;
}

Make sure that the search text button is also enabled.

2. Yes, of course. Depending on the box position:
– If it’s set to ‘static’ (default), then you can set the alignment to float to right: https://i.imgur.com/dROeXUO.png
– ..otherwise, under the Position Values option make sure to change the ‘right’ positition to ‘0px’ and the left to ‘auto’, like so: https://i.imgur.com/6BmNr4e.png

I hope this helps!

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

[tappeltParticipant]

Thanks so much for your response!
With respect to placement, I see how this works, and am a little embarrassed that I didn’t see the parameters.

With respect to the first point, I’ve tried placing the css code in the “Custom CSS” box under Theme Options. When I “save”, the code disappears. Is that expected? And the appearance of the icon has not changed (the width remains narrow, and the search button text does not appear.

Note that the Display Search Text Button has been set to ON, and the search button text does appear beside the icon when the icon is clicked.

Am I misinterpreting your instructions?
Tim

[Ernest MarcinkoKeymaster]

Hi Tim,

It is not expected to disappear. It might be caused by a browser extension I’m guessing (?), or the custom CSS is not printed (or cached),but I’m not sure.

I would recommend the following steps to perhaps get around it (it may sound strange, but usually works):
– Copy/Paste the custom CSS rule from the first point to the Custom CSS box again
– Do not save the options just yet
– Make a change to the pasted text in the input box, like adding a space after the last ‘}’ character – or simply delete one character and re-type it.
– Now save the options.
If this was related to any input validation issue, this might just do the trick.

Let me know!

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

[tappeltParticipant]

So I finally got the CSS code to “stick” using Firefox rather than Chrome, so (while I have custom CSS in other parts of my site, there was some problem interacting with your plugin).

However, the effect of the code is to move the search icon box away from the right hand side of the container in which it’s placed, and that distance changes depending on the pixel count. However, the outlined icon box does not change in size. Interesting side note, with Chrome the search icon only shows, and with Firefox the search icon does not show, just the first three letters of “Search”. But in both cases the box is still square and has not lengthened.

[tappeltParticipant]

So just a follow up from your help, I’ve been blundering around, and this seems to work for all browsers I’ve tried except Firefox

#ajaxsearchpro7_1 .probox, #ajaxsearchpro7_2 .probox, div.ajaxsearchpro[id*=”ajaxsearchpro7_”] .probox {
width: 116px;
}
Now both the text “search” and the magnifier icon show in the compact box, which then expands as hoped for when clicked.

With Firefox, only the text shows, until the box has been clicked once. then when it is expanded and then contracted, both the text and the icon show. I can live with this, and you may have a better way for me to managing this.

Thanks again — and apologies for my ignorance.
Tim

[Ernest MarcinkoKeymaster]

Hi Tim,

I will need to see the exact situation in order to be able to suggest further solutions. I’m guessing based on my test server layout, but each site is different, with different stylesheet rules and HTML structure.
If you can link me to an URL where the plugin is visible, I might be able to come up with something.

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

[tappeltParticipant]

Thanks! As I said, it’s pretty functional now — just a bit of a browser problem.
If you’d like to check it out, go to http://winediscovery.ca/

[Ernest MarcinkoKeymaster]

Hi!

The problem is, that the width is too narrow by just 1 pixel 🙂 So the magnifier gets pushed down to a new line, and seems invisible.

Changing your original rule to 117px should fix it:

#ajaxsearchpro7_1 .probox, #ajaxsearchpro7_2 .probox, div.ajaxsearchpro[id*="ajaxsearchpro7_"] .probox {
    width: 117px;
}

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

[tappeltParticipant]

Thanks very much!

[Author]

Posts