WordPress.org

1. mulligankm
   Member
   Posted 1 year ago #

   Dear WordPress Community,

   Please help.
   I am trying to layout some form elements on a page.

   I want a field label on one line, the input field on the following line. I then want a blank line.

   Everything looks exactly as I want if I use the following code:

   <p><label for="first_name">First Name</label> <br />
   <input id="first_name" maxlength="40" name="first_name" size="20" type="text" /></p>

   However, once I click on the UPDATE button, the above code is changed to the following:

   <p><label for="first_name">First Name</label> </p>
   <input id="first_name" maxlength="40" name="first_name" size="20" type="text" />

   Am I doing something wrong? Should I be using a different method/different tags to layout these elements? Any help would be greatly appreciated.

2. esmi
   Theme Diva & Forum Moderator
   Posted 1 year ago #

   Which tab are you using - HTML or Visual?

3. mulligankm
   Member
   Posted 1 year ago #

   Thanks for the quick response, @esmi.
   I am using the HTML tab.

4. esmi
   Theme Diva & Forum Moderator
   Posted 1 year ago #

   Two possible options spring to mind:

   <p><label for="first_name">First Name</label>
   <input id="first_name" maxlength="40" name="first_name" size="20" type="text" /></p>

   or

   <p><label for="first_name">First Name</label><br /><input id="first_name" maxlength="40" name="first_name" size="20" type="text" /></p>

5. mulligankm
   Member
   Posted 1 year ago #

   Thanks esmi.

   Unfortunately, no luck. With the first option, WordPress changed the code to

   <p><label for="first_name">First Name</label></p>
   <input id="first_name" maxlength="40" name="first_name" size="20" type="text" />

   WordPress changes the second option to

   <p><label for="first_name">First Name</label><br />
   <input id="first_name" maxlength="40" name="first_name" size="20" type="text" /></p>

   If I remove the <br / > tag after the </label> tag, WordPress automatically reinserts it.

   Any other ideas?

6. webjunk
   Member
   Posted 1 year ago #

   Are you possibly putting in the code in html mode and then switching to Visual afterwards for some reason?
   If you insert code for that page/post you must not switch to Visual for that one at all. EVER.

7. mulligankm
   Member
   Posted 1 year ago #

   Thanks webjunk. No. I am not switching to the Visual tab. I am simply clicking on the UPDATE button. Once I do this, the page is refreshed. When I scroll down to see my code, I see the mysterious changes.

8. webjunk
   Member
   Posted 1 year ago #

   Have four things to try:

   1) Remove close tag
   

   2)
   Use <br clear="none" />

   3) The old Dreamweaver bug:
   </p><p>
   which can be just "<p>" as there should be an explicit close anyway.

   4) Or better yet use CSS:
   In style.css:
   p#newbr { margin-bottom:10px; }
   In your html:
   <p id="newbr">Your Label and text</p>

   Please let me know if any worked for you. Thanks...

9. mulligankm
   Member
   Posted 1 year ago #

   webjunk

   1. What do you mean by "Remove close tag."

   2. The <br clear = "none"> didn't work. WordPress changed the text to:
   <p><label for="first_name">First Name</label><br clear="none" /><br />

   3. Removing </p> didn't work either. WordPress just adds it back.

   4. I added the recommended code to style.css. In html, I put the following:
   

   <p id="newbr"><label for="first_name">First Name</label></p>
   <input id="first_name" maxlength="40" name="first_name" size="20" type="text" />

   WordPress turned this into

   <p id="newbr"><label for="first_name">First Name</label></p>
   <input id="first_name" maxlength="40" name="first_name" size="20" type="text" />

   Why do I feel like I am reinventing the wheel here? Surely, there must be a way to lay these elements out nicely. Calling all WordPress experts. Please help!

10. webjunk
    Member
    Posted 1 year ago #

    Can understand the first three. The object in 4) was not to change the html but simply to have the display basically the same as using the
    tag. You did not say whether the display in the browser was different. Don't care about the html. By using the id-newbr you should be able to adjust the spacing below it for the effect you want.

11. mulligankm
    Member
    Posted 1 year ago #

    I'm sorry for being less than clear regarding item #4, webjunk. I will blame it on sleep deprivation.

    From a visual standpoint, the CSS styling does not achieve the objective. I still have an unsightly blank line between the label and the input field. e.g.

    First Name:

    [___________]

    instead of:

    First Name:
    [___________]
    

12. webjunk
    Member
    Posted 1 year ago #

    Then just adust the "margin-bottom:10px;" to whatever works.
    Try:
    margin-bottom:1px;

13. mulligankm
    Member
    Posted 1 year ago #

    webjunk! You did it! I adjusted the margin as suggested and this did the trick. I clearly need to hit the CSS books. Thank you so much for all of your help. It is greatly, greatly appreciated!

Topic Closed

This topic has been closed to new replies.