cforms II User Forum
 
Current User: Guest FAQs
Search Forums:


 






Minimum search word length is 4 characters – Maximum search word length is 84 characters
Wildcard Usage:
*  matches any number of characters    %  matches exactly one character

cforms II User Forum CSS Styling and Layout Add text to right of input boxed

Add text to right of input boxed
Page:   1   Reply to Post Add a New Topic
Post
Guest

Jeff

1:30 am December 9, 2007
  Quote and Reply
1

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 
Admin

Oliver

Munich, Germany

posts 6096

9:10 am December 9, 2007
  Quote and Reply
2

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.

** cforms home page   ** donations
Guest

Jeff

7:12 pm December 9, 2007
  Quote and Reply
3

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 

 

 
Admin

Oliver

Munich, Germany

posts 6096

7:53 pm December 9, 2007
  Quote and Reply
4

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; }

** cforms home page   ** donations
No Tags
Page:   1   Reply to Post

Reply to Topic:
Add text to right of input boxed

PLEASE READ THE FAQs FIRST! THANK YOU.

Guest Name (Required):

Guest Email (Required):

NOTE: New Posts are subject to administrator approval before being displayed

Smileys
lol offended sad ??? yell cry frown kiss surprised wink innocent smile oops cool
Post New Reply

Guest URL (required)

Math Required!
What is the sum of:
2 + 5    

Topic RSS

About the delicious:days Forum

Forum Timezone: Europe/Berlin

Currently Online:
41 Guests

Currently Browsing this Topic:
1 Guest