WordPress.org

Ready to get started?Download WordPress

Forums

Job Manager
[resolved] Adjust the display width of text fields on application form (13 posts)

  1. deeveeoh
    Member
    Posted 3 years ago #

    How can I adjust the widths of the input box for text fields on the application form? I'm not trying to restrict the number of characters that can be entered - just trying to adjust the display width. Could this be controlled for each field or does a single setting control all of the text fields.

    I've played around with it in Firebug and looked through the styles.css file for my template and couldn't find anything to do this. I know just enough to be dangerous but oviously not enough to figure this out on my own!

    Thanks - and love the plugin!

    http://wordpress.org/extend/plugins/job-manager/

  2. Captain 777
    Member
    Posted 3 years ago #

    Hi Gary...have the same issue. Anyone know where to modify width..or what's driving the allocation?

  3. Captain 777
    Member
    Posted 3 years ago #

    Did some deep digging in css files. Nothing there in css folder. Seems like TinyMCE is being used to manage the 'text' and 'textarea'.
    I'm not aware of what or how TinyMCE works...so some help would be appreciated.

  4. hagata
    Member
    Posted 3 years ago #

    I also did a lot of digging and have not found a useful way of doing this. If anyone has an answer I'm sure everyone could benefit from it.

    Thanks in advance.

  5. kaptek-ag
    Member
    Posted 3 years ago #

    Hi all - not sure if this is what you're after. I added the following to my theme's CSS file which changes all text input fields (same could be done with textarea):-

    table.job-apply-table input[type=text] {
    	width: 100%;
    }
  6. Captain 777
    Member
    Posted 3 years ago #

    This is PERFECT! My complete addition to the END of my CSS style file is as follows. Fixes text fields and area, as well as provides a margin on top and bottom of each field to space out appropriately (for my particular theme).
    THANKS [kaptek-ag]!!

    /* Job Manager Text Field Formatting */
      	table.job-apply-table input[type=text], textarea, input[type=file] {
    	width: 85%;
    	margin-bottom: 4px;
    	margin-top: 4px;
    }
    /* End Job Manager Text Fields Formatting */
  7. rosieshilo
    Member
    Posted 3 years ago #

    Thank you so much for that code! Brilliant! This was driving me crazy!
    Now I would like to know how to make just the Large Text Input boxes deeper. They are currently 2 rows instead of 1 but I need about 4 rows at least.
    Anyone?

  8. Gary Pendergast
    Member
    Plugin Author

    Posted 3 years ago #

    Same as the above solutions, you can add a height value to your CSS.

    Ie:

    table.job-apply-table textarea {
    	width: 100%;
    	height: 100px;
    }

    CSS doesn't have the ability to set the number of rows in the textarea.

  9. rosieshilo
    Member
    Posted 3 years ago #

    Thanks Gary! I'll give that a go. :)

  10. rosieshilo
    Member
    Posted 3 years ago #

    Looks like it's an all or nothing thing. I don't want the normal text areas to increase, but the "large text area" I obviously do. But it either increases them all, or none. I've tried putting the height rule in just the large text area code but it ignores that and only responds if the height is in the normal text area code.
    It's a shame.

  11. Gary Pendergast
    Member
    Plugin Author

    Posted 2 years ago #

    I'm not following - the normal text area is input[type=text], the large text area is textarea. As long as you're only applying the height value to textarea, then it won't affect the other input fields.

  12. rosieshilo
    Member
    Posted 2 years ago #

    So how do I write the code to differentiate between the two?
    It's driving me bonkers. :(
    This applies to both (below) so if I add a height here it applies to all text boxes.

    /* Job Manager Text Field Formatting */
    table.job-apply-table input[type=text], textarea, input[type=file] {
    width: 85%;
    margin-bottom: 4px;
    margin-top: 4px;

    Thanks for helping.

  13. Gary Pendergast
    Member
    Plugin Author

    Posted 2 years ago #

    Leave the existing one, and add a new def to your CSS:

    table.job-apply-table textarea {
    	height: 100px;
    }

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic