/    Sign up×
Community /Pin to ProfileBookmark

How to put the form labels on the right?

Copy linkTweet thisAlerts:
Dec 02.2010

Hi,

Please look at the following comment form:
[URL=”http://docs.jquery.com/Plugins/Validation”]http://docs.jquery.com/Plugins/Validation[/URL]

There’s a similar one on this page:
[URL=”http://jquery.bassistance.de/validate/demo/”]http://jquery.bassistance.de/validate/demo/[/URL]

I’d like to put the labels on the right of text input fields and display the error messages under input fields.
Tried almost anything, but to no avail.

Any help is greatly appreciated!
Rain Lover

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@tom_myDec 02.2010 — Hi,

why just set float:right for labels?
Copy linkTweet thisAlerts:
@OctoberWindDec 02.2010 — The second example you provided is already pretty close.

Instead of putting the form's label [i]before[/i] the input tag, just put it after.

You can ignore the [B]form.cmxform label { display:inline-block; }[/B] as this is just giving you the ability to evenly line up all the input fields.

For the same reason, you can ignore the [B]#commentForm label.error { margin-left: 250px}[/B] if you want the error message to appear under the input field rather than under the label.
Copy linkTweet thisAlerts:
@Rain_LoverauthorDec 02.2010 — The second example you provided is already pretty close.

Instead of putting the form's label [i]before[/i] the input tag, just put it after.

You can ignore the [B]form.cmxform label { display:inline-block; }[/B] as this is just giving you the ability to evenly line up all the input fields.

For the same reason, you can ignore the [B]#commentForm label.error { margin-left: 250px}[/B] if you want the error message to appear under the input field rather than under the label.[/QUOTE]

Thanks! I tried it but it doesn't work.
Copy linkTweet thisAlerts:
@OctoberWindDec 02.2010 — Looks like the error message is being added by the validate jQuery. Would have to dig through there to figure out how to change the css for that.
Copy linkTweet thisAlerts:
@earln7Apr 25.2011 — Hi,

Please look at the following comment form:

http://docs.jquery.com/Plugins/Validation

There's a similar one on this page:

http://jquery.bassistance.de/validate/demo/

I'd like to put the labels on the right of text input fields and display the error messages under input fields.

Tried almost anything, but to no avail. ?

Any help is greatly appreciated!

Earl
==============================


PLR Article
Copy linkTweet thisAlerts:
@earln7Apr 25.2011 — Firstly, its not too much related to JavaScript.

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled</title>

</head>

<body>

<label for="labe"><input type="text" id="Labe"/>whatever</lable>

</body>

</html>
Copy linkTweet thisAlerts:
@Rain_LoverauthorApr 25.2011 — Firstly, its not too much related to JavaScript.[/QUOTE]

Would you mind trying your solution on the references in my question?
×

Success!

Help @Rain_Lover spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.10,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...