Community Forums › Forums › Archived Forums › Design Tips and Tricks › Metro Comment Form Label Positioning
Tagged: Metro
- This topic has 16 replies, 5 voices, and was last updated 9 years, 11 months ago by jrsansom.
-
AuthorPosts
-
March 8, 2014 at 3:38 am #93929jrsansomMember
Hi All,
I'm hoping someone can assist me with an issue whereby the labels for the comment form are NOT appearing above the input fields, as per the Demo site for the Metro theme.
How can I modify the comment form to ensure the labels appear above the input fields, as per the demo?
Thanks,
http://www.johnsansom.com/top-sql-server-forums-2014/
JohnApril 17, 2014 at 2:17 pm #101033SusanModeratorAs you posted this a while ago, I hope your issue has been resolved. If not, report back here, and I will attempt to assist (or escalate as appropriate.
If your issue was resolved, please mark it "resolved", so that it can be closed.
Thanks!
April 18, 2014 at 4:39 am #101108jrsansomMemberHi Susan,
Thanks for following up.
The issue is still open. Any help you can offer would be very much appreciated.
Thanks,
JohnApril 18, 2014 at 6:24 am #101121AnitaKeymasterHi @jrsansom, can you turn minify off so I can take a look at your code. Thanks.
Love coffee, chocolate and my Bella!
April 18, 2014 at 9:20 am #101168April 18, 2014 at 9:27 am #101174AnitaKeymasterAdd this to your style sheet. But you might have an issue with the astericks (*) but let's see once you put this in there.
.comment-respond label { display: block; margin-right: 12px; }
Love coffee, chocolate and my Bella!
April 18, 2014 at 9:33 am #101175jrsansomMemberChange applied. Not sure if the result is as expected 🙂
April 18, 2014 at 9:38 am #101177AnitaKeymasterI don't see it in there. If you have a caching plugin installed, delete the cache and also disable it - then take a look.
Love coffee, chocolate and my Bella!
April 18, 2014 at 9:47 am #101178jrsansomMemberIt's there, right at the bottom of style.css
I've set CloudFlare to Developer Mode to enable pass through of all requests whilst we debug. Thanks for taking the time to help with this. I appreciate it.
April 18, 2014 at 10:12 am #101181AnitaKeymasterI see you are using the non-HTML5 version. The issue with the astericks (*) seems to be fixed in the HTML5 version. I cannot locate that code in the non-HTML5 version. Unfortunately I am unable to resolve that. I will sent out a tweet about this. Hang on.
Love coffee, chocolate and my Bella!
April 18, 2014 at 10:27 am #101182jrsansomMemberTo clarify, what are you referring to with regard to version, the metro theme?
I'm sure I can easily upgrade where necessary.
April 18, 2014 at 10:34 am #101183Tony @ AlphaBlossomMemberHello,
It's strange that the markup is not right...I've never noticed before so hard to say if that's how it was pre html5, or if something happened to mess up your code.
If you want a quick and easy fix, you can use some css with absolute positioning:
.comment-respond .comment-form p { padding-top: 25px; position: relative; } .comment-respond label { left: 0; margin: 0; position: absolute; top: 0; } .comment-respond span.required { left: 47px; position: absolute; top: 0; }
Also noticed the "Comment" label is missing. Might be able to add it using :before, but sorry I don't have more time to work on it right now...I'll look for a better solution when I have more time, but this may be good enough for you.
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
April 18, 2014 at 10:35 am #101184SusanModeratorThe other option is that since this is theme setup, and you are wanting it to look like the demo, you can submit a support ticket 🙂
April 18, 2014 at 10:39 am #101186Sridhar KatakamParticipantAdd
.comment-respond label {
display: inline;
margin-right: 0;
}in style.css to get
April 18, 2014 at 10:51 am #101189jrsansomMemberHi Sridhar, thanks for your input.
The comment form looks the same as the screencap you shared without making any adjustment to CSS.
The desired outcome is for the labels to positioned to the left of the input fields as per the metro theme demo.
April 18, 2014 at 11:20 am #101194Sridhar KatakamParticipantWhen I looked at your site earlier, the comment form field label and asteriks were below the fields and the theme was Metro.
Now I see that you have switched to Metro Pro. Now I see warning messages about metro-pro/post-adsense.php being not present.
Can you fix and let us know?
April 18, 2014 at 11:42 am #101198jrsansomMemberPatience 🙂 There's a fair amount of function, CSS code I need to port.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.