cforms II User Forum

Registration is currently disabled.
Guest

FAQs

Login form protected by Login LockDown.


Lost password?
Advanced Search

— Forum Scope —

  

— Match —

   

— Forum Options —

    

Wildcard usage:
*  matches any number of characters    %  matches exactly one character

Minimum search word length is 4 characters - maximum search word length is 84 characters

Topic RSS
Add text to right of input boxed
December 9, 2007
1:30 am
Jeff
Guest

Please replace the ??? with your data!

  • Your URL: independant of my implementation
  • The browser used: FF
  • cforms version: 6.4.1
  • Your Wordpress version: 2.3.1

 
On the input forms, on the right side of the form are some instructions put there by the script, like (required) or (valid email required) etc.

 

I would like to add some of my own text there on specific forms, like more information on how to use the field, like "To select multiple items, hold the Ctrl button on your keyboard while you select items with your mouse." or something like that.

How can I add text over there?

Thanks!

Jeff 

December 9, 2007
9:10 am
Oliver
Munich, Germany
Admin
Forum Posts: 6400
Member Since:
March 6, 2005
Offline

It is not possible to do that structurally, via HTML. To show custom text, you can only add a 'text-only' fields and then work with CSS (floats, clears etc.) to maneuver a given block (need to use LABEL and LI – IDs) into the right place, e.g.:

The field order: 

text-only element      (LI ID = e.g li-6-3)
input field          (LI ID = e.g li-6-4
next field          (LI ID = e.g li-6-5)

CSS:

#li-6-3 { float:right; margin: 0 10px 0 0 !important; }

#li-6-5 { clear:both; }

This should do the trick.

December 9, 2007
7:12 pm
Jeff
Guest

Oliver, 

Sorry, I am not completely following this.

So I put the text I want on the right of the next input field in a text only input.  I get that.  But how do I associate that text with the css specifically?

How do the various input fields following get assiciated?

What exactly do I put in those text boxes?

For example … 

If the text I want to appear to the right of the next input field reads "right text"

And the field I want the text to appear to the right of is a multiline input field and in that box defining the multiline field I have <b>Pies</b>#apple#cherry#rhubarb 

And finally the field after the field where the text will on the right I have another multiline input box defined as <b>Cakes</b>Chocolate#Butter Pecan 

What specifically will be in each of those 3 boxes defining the fields?

I am sorry, I have tried some things but i think you mean to describe some things in your explanation and I do not get what is actually supposed to be in the box or not.

Also, I understand my cusotm.css file will contain the following 2 lines of code to match:

#li-6-3 { float:right; margin: 0 10px 0 0 !important; }
#li-6-5 { clear:both; }

I notice that though in your example above you seem to have the need to have a #li-6-4 line in the custom.css file but your css example does not have one?

Again, very sorry about the detailed question, I hope this is not asking too much.

Jeff 

 

 

December 9, 2007
7:53 pm
Oliver
Munich, Germany
Admin
Forum Posts: 6400
Member Since:
March 6, 2005
Offline

no worries.

  1. You need to first go to the Styling admin page and activate both Label IDs and List Element IDs.
  2. Create the text-only elements in your existing form. Just above each input field that will be on the left!
  3. Adjust the CSS to ensure the text-only elements are moved to the right (float) and that the following element (whatever it is) clears the float.


To 1
: that should be easy.

To 2: Just add as many text-only fields as you require, and move each just above the input field it will end next to on the right hands side.

To 3: This is the tricky part. Each list item which includes your right hand side text needs to be floated to the right, with:

#XYZ { float:right; margin: 0 10px 0 0 !important; }

XYZ you need to find out by looking at the HTML source code. Simply tell your browser to show the source and do a search for your "right hand side text", you'll end up finding the parenting list item ID, e.g.:

id="li-6-2"….

The above is just an example, you id(s) will be different.

To make sure the float doesn't cause any troubles later, you need to clear each with the next list item, Simply pick the next id you'll find. Taking the above example, it'll be each li-6-3 , e.g.:

#li-6-3 { clear:both; }

Forum Timezone: Europe/Berlin

Most Users Ever Online: 959

Currently Online:
32 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

tracedef: 43

mores: 21

Gyrus: 20

frozenwaste: 18

asuffredini: 15

photoworks: 14

Member Stats:

Guest Posters: 3744

Members: 1463

Moderators: 3

Admins: 2

Forum Stats:

Groups: 1

Forums: 4

Topics: 5345

Posts: 18714

Newest Members: juredujmovic, dreamkeeper, rajattyagi, wrokaa, lukass

Moderators: Paul (421), cnymike (8), sonika (95)

Administrators: Oliver (6400), Nicky (3)