Quiz line out of alignment

hi @dwplano

could you share a link to your site?

the causes can be many… usually the most common mistake I’ve seen is trying to apply a width to the input when it should be applied to its container (usually a p)

hope it helps!

Hi Erik(@codekraft),

I am sorry that I am unable to share my site with you at this time because the web site is on my local machine. I usually try plugins, updates and everything on the local site on my machine and move to the official site after everything worked out.
Currently on the web page, every input field has the same width. The field labels, like Your Name, Subject, are on top of each field. But for the quiz, the input field and the question are on the same line. As a result, that line become much longer than the width of all the other fields. The form is the default contact form plus the quiz line. I did not modify anything on the default contact form, except adding the quiz line.

<label> Your name (required)
[text* your-name] </label>

<label> Your email (required)
[email* your-email] </label>

<label> Subject (required)
[text* your-subject] </label>

<label> Your message (required)
[textarea your-message] </label>

[quiz Math-quiz size:50 “99 + 7 = ?|106”]

[submit “Submit”]

Can I put the question in separate line on top of the answer input field, just like every other field? Can you give me an example of applying with to the answer field container (usually a p) or point to the relevant sections of the document so I can study them?

Thank you very much for your help!

• This reply was modified 3 years, 4 months ago by dwplano.

Hi Erik(@codekraft),

Correction typo on the last paragraph (with – should be width):

Can I put the question in separate line on top of the answer input field, just like every other field? Can you give me an example of applying width to the answer field container (usually a p) or point to the relevant sections of the document so I can study them?

hi @dwplano

I’ve prepared two examples of how to align span + input with inline block (vertical align given by line-height) or flex (preferred). You are doing right by working on localhost, but I have to ask you if you still need, to copy and paste the generated form code and your css code and provide a playground where the issue is reproduced (fiddle or codepen or whatever you want).

span.Math-quiz label > * {
  height: inherit;
  line-height: 50px;
  display: inline-block;
  vertical-align: top;
  width: auto;
  border: 3px solid red;
  box-sizing: border-box;
  padding: 0;
  margin: 0;  
}

OR

span.Math-quiz-2 label {
  display: flex;
  align-items: center;
  border: 3px solid red;
  input {
    height: 50px;
    width: auto;
  }
}

https://codepen.io/erikyo/pen/VwbXWLP

and display block to span and input to diplay elements on different rows:

span.Math-quiz-3 label > * {
  height: inherit;
  line-height: 50px;
  display: block;
  max-width:100%;
  border: 3px solid red;
  box-sizing: border-box;
  padding: 0;
  margin: 0;  
}

ps: sorry I noticed your reply later!

Hi Erik(@codekraft)

I followed your first example and changed the width from “auto” to a special number of pixies and width of the answer input box begins to change. When I used 300px, the input box moved to the next line and the web page looks very nice and my problem is solved.

Thank you and I appreciate your help very much!