search

elclanrs / jq-idealforms-old

The ultimate framework for building and validating responsive HTML5 forms.
665 stars 95 forks source link

Enhancement Request: A question instructions field? #61

Closed obxpete closed 11 years ago

obxpete commented 12 years ago

The requirement is to add a display-only bit of text after the label which, in our case, would serve to provide additional instructions to the user regarding how best to answer the question. In particular, this would need to be supported by the addFields function.

Thanks in advance,

elclanrs commented 12 years ago

I was just trying this and it seems pretty easy to achieve with a few lines of css. Put this in your own css, after including Ideal Forms. It should work for both full and responsive mode:

<div>
  <label>username:<span>Description here</span></label>
  <input name="username" type="text"/>
</div>
.ideal-label span {
  display: block;
  width: 150px; /* Careful not to go too high and trigger responsive layout */
  font-size: 85%; /* Just to be consistent */
}

But this won't work with addFields though...

obxpete commented 11 years ago

Ok. I did something similar and used the following right after my addFields call, but (ready for this?)... it gets in the DOM (according to browser developer tools) but it doesn't show up on the screen! Nothing on google seems to indicate this as a problem for others. Any thoughts? Thanks in advance, - Pete

$("Input SELECTOR").closest('span').before("<span class='questionInstructions'>"+$("#questionInstructions").val()+"</span>");
obxpete commented 11 years ago

NM! I had two instances of the form open and the wrong instance was getting the inserted text.