Input Field Displaying Incorrectly

Hi,

The problem is caused by the styles of your theme. Please provide a link to the page where the problem occurs and we will provide you with the code to solve it.

Sincerely,
BestWebSoft Support Team

Hi,

Unfortunately, you haven’t provided the necessary information so we consider your problem resolved.

Sincerely,
BestWebSoft Support Team

My apologies, did not see the original reply you posted.

The problem happens throughout our blog located here:

https://www.suncrest.org/cultivate/

On any given post, the input field may display incorrectly. Here are some I just checked and they were not displaying correctly:

https://www.suncrest.org/2014/05/01/beyond-sunday-foundations-day-one/
https://www.suncrest.org/2014/04/30/apply-or-die/
https://www.suncrest.org/2014/04/28/forever/

Hi, I have the same problem.
My text field is always at the beginning of the math operation, so if it is asking me the second number, or the result, it is not correct.
Here an example. https://www.becycling.net/who-we-are/

Is there a solution?

Hi joshsevers,

As we have already told you, the problem is in the styles written in your theme. In order to fix it please add the following strings to the style.css file:
.cptch_block input[type=”text”] {
left: 0 !important;
position: relative !important;
}

Sincerely,
BestWebSoft Support Team

Hi sneike,

You seem to have deactivated the plugin. Unfortunately, we cannot see the problem if the plugin is deactivated and find a solution.

Sincerely,
BestWebSoft Support Team

Yes, I am aware of what you previously said. I was merely supplying the information you requested.

After inserting those lines into the stlye.css file located in the Captcha\css folder, clearing out my browser cache and cookies, the issue still persists. I copied the text just as it was typed here and inserted it in this position:

.cptch_block {
	direction: ltr;
}
.cptch_block input[type="text"] {
left: 0 !important;
position: relative !important;
}

It seems as though the input field text box itself is in a fixed position and unaffected by the math equation text preceding it.

On this post: https://www.suncrest.org/2014/05/12/manifesto/ the issue can be seen as it asks “x 4 = thirty two _______” where the ______ is the input field text box. Since the length of the text is longer than usual, it gets cut off so only “thirty tw” can be seen. If the math equation is different when you visit the page, here is a screenshot of the issue: https://i.imgur.com/63YRDTN.png

Josh, I just caught one on your site. Try this:

#respond #cptch_input {
	position: static;
}

Before & after.

Hi Josh,

The problem is caused by the styles written in your theme for text fields.
To make the solution provided by Chris Dillon more general, we suggest to add the following strings to the style.css file:

.cptch_block input[type=”text”] {
position: static !important;
}

Sincerely,
BestWebSoft Support Team

Okay, so I add

.cptch_block input[type="text"] {
   position: static !important;
}

in addition to the

#respond #cptch_input {
	position: static;
}

?

I just added both of them to the stylesheet, uploaded the file, cleared out my browser’s cache, and reloaded the page, but I’m still experiencing the issue.

Hi joshsevers,

Judging by the source code of page https://www.suncrest.org/2014/05/12/manifesto/ the necessary changes haven’t been made in the style.css file.

Sincerely,
BestWebSoft Support Team

Well I just FTP’d the CSS file to my computer and both the

.cptch_block input[type="text"] {
   position: static !important;
}

and the

#respond #cptch_input {
	position: static;
}

were in there, so I don’t know what that was about. Also, you still didn’t answer my question, as to whether I should have both of them in there or not. Should I include the

.cptch_block input[type="text"] {
left: 0 !important;
position: relative !important;
}

in there as well?

I’ve tried each individual block listed and none of them worked alone, and at last I tried putting all three in there. With all three in the stylesheet, I accessed the site on my Nexus 5 and — what do you know — the input field displayed correctly.

I cleared out my entire browsing history, cookies, cache — the whole shabang — on my computer since the beginning of time in Chrome ver. 35.0.1916.153, opened up the site in a new window, and it is displaying incorrectly.

I dragged the side of my browser to lower the width of the window and therefore kicking the responsive theme into the mobile version and — what do you know — the input field displayed correctly.

I don’t know what this means, but I’m hoping that you can tell me what I need to do in order to fix it, because I’m about to give up on this plugin and go get something better.

Also — just a reminder — please let me know which of the three blocks of CSS code listed above I should include in the stylesheet. All three? Just one? Two? Which two? I don’t know if I should just keep adding on or if each subsequent answer should replace the last one. Please let me know. See ya in two weeks.

Hi again,

Only this fragment:

.cptch_block input[type="text"] {
    position: static !important;
}

if the changes are not displayed, it means that you add them in the wrong file! – wp-content/themes/resurrect/style.css – is the path to the correct file.

Sincerely,
BestWebSoft Support Team

Awesome, that worked.
Probably because I put the code into the correct stylesheet this time. I did indicate which file I inserted the code into (the CSS stylesheet in the Captcha folder), because I figured that was the one. Sorry if I didn’t make it clear before, but I wasn’t sure where to insert it and you guys’ instruction did not clearly state where I needed to go. Thanks for the help, though; it’s working great now!