Metro Comment Form Label Positioning

Community Forums Forums Design Tips and Tricks Metro Comment Form Label Positioning

This topic is: not resolved

Tagged: 

This topic contains 16 replies, has 5 voices, and was last updated by  jrsansom 8 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #93929

    jrsansom
    Member
    Post count: 10

    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,
    John

    http://www.johnsansom.com/top-sql-server-forums-2014/
    #101033

    Susan
    Moderator
    Post count: 9598

    As 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!


    Susan @ Graphically Designing I offer theme customizations I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #101108

    jrsansom
    Member
    Post count: 10

    Hi Susan,

    Thanks for following up.

    The issue is still open. Any help you can offer would be very much appreciated.

    Thanks,
    John

    #101121

    AC
    Blocked
    Post count: 7712

    Hi @jrsansom, can you turn minify off so I can take a look at your code. Thanks.

    #101168

    jrsansom
    Member
    Post count: 10

    Hi @anitac, done.

    • This reply was modified 8 months, 1 week ago by  jrsansom.
    • This reply was modified 8 months, 1 week ago by  jrsansom.
    #101174

    AC
    Blocked
    Post count: 7712

    Add 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;
    }
    #101175

    jrsansom
    Member
    Post count: 10

    Change applied. Not sure if the result is as expected :-)

    #101177

    AC
    Blocked
    Post count: 7712

    I don’t see it in there. If you have a caching plugin installed, delete the cache and also disable it – then take a look.

    #101178

    jrsansom
    Member
    Post count: 10

    It’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.

    #101181

    AC
    Blocked
    Post count: 7712

    I 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.

    #101182

    jrsansom
    Member
    Post count: 10

    To clarify, what are you referring to with regard to version, the metro theme?

    I’m sure I can easily upgrade where necessary.

    #101183

    Tony @ AlphaBlossom
    Participant
    Post count: 544

    Hello,

    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.


    #101184

    Susan
    Moderator
    Post count: 9598

    The 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 :)


    Susan @ Graphically Designing I offer theme customizations I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #101186

    Sridhar Katakam
    Participant
    Post count: 1071

    Add

    .comment-respond label {
    display: inline;
    margin-right: 0;
    }

    in style.css to get

    screenshot


    #101189

    jrsansom
    Member
    Post count: 10

    Hi 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.

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.