Search modal design problem

[tashitendrel]

Hello, on the website https://dharmaebooks.org
left top corner we have Search option I would like to center the input part. After updating Pro I don’t see changes I make in Search options. For example I try to change the order of input option and they don’t show. Anyways, we just want to have the input centered and I don’t know how to do it. Could you help?

[ruenel]

Hey @tashitendrel,

Thanks for writing in!

You can set up the order of your Search element like this:

And make sure to remove the bottom margin of the Input field by setting the margins to 0:

Kindly let us know how it goes.

[tashitendrel]

Hi, thank you. This is what I have. But input still sticks to the left. I have checked all the other settings. Even text is centered. There is nothing in the CSS. And after the update clicking on toggle doesnt show any preview of the modal itself. I can see changes made to toggle, but modal is impossible to design right now…

[tashitendrel]

I just want to add that I have changed that order: input as 1st and Search as 2nd, but it doesn’t show up on front end at all (on the back end I can’t see the preview).

[tristup]

Hi @tashitendrel,

I have checked it in my local environment and found that the order is working fine even after changing it. It might be some problem with the cache, I would suggest you check once by clearing all types of cache including the Style Cache from Cornerstone > Settings > System > Clear Style Cache and check in the incognito/private mode of the browser.

If that does not help, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[tashitendrel]

Hi, I have cleared all caches, but it didn’t help.
While inspecting that element I saw a message: The display: block property prevents order from having an effect. Try setting display to something other than block.
I don’t know where the block property is actually placed. So I changed the order by css:
.x-search-input {
order: 1;
padding: 1em !important;}
This solved my problem for now but Cornerstone settings for this element still doesnt work.

[tristup]

Hi @tashitendrel,

Glad that you are able to find the cause of the problem.

Thanks