WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
Text Field Size stuck at default (10 posts)

  1. Decision Games
    Member
    Posted 1 year ago #

    This is an example of what I have in the code: [text A1 5/3]

    From that I expect that the box will be 5 spaces wide and the text allowed 3 spaces for typing. For some reason no matter what I put in there A1 will always be the default 30 wide. The maxlength changes, but the size doesnt. I am not sure why this is.

    http://wordpress.org/extend/plugins/contact-form-7/

  2. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 1 year ago #

    Check your theme's stylesheet. Maybe it applies styles to the input field.

  3. Decision Games
    Member
    Posted 1 year ago #

    There are quite a few styles that deal with "input". Is there one in particular that I need to edit?

  4. waterworks2
    Member
    Posted 1 year ago #

    Maybe try downloading the Firefox plugin called Firebug. Works great for trouble-shooting CSS stuff. You can just tag a field, and it will show you the CSS that pertains to that particular field. Then you'll have a better sense of what CSS to edit.

  5. Decision Games
    Member
    Posted 1 year ago #

    I found its "class" and cant find it anywhere in the css.

    <p><span class="wpcf7-form-control-wrap A1">
    <input type="text" name="A1" value="" class="wpcf7-form-control wpcf7-text" size="5" maxlength="3" /></span><b>A1.</b> Cactus Air Force</p>

    It says size is 5, but is shows as 40.

  6. waterworks2
    Member
    Posted 1 year ago #

    try this:

    <input type="text" name="A1" value="" class="wpcf7-form-control wpcf7-text" size="5" maxlength="3" style="width: 300px;" />

    You'll notice the added css: style="width: 300px;"

    You can style things in-page rather than editing the css sheet. Sometimes this is helpful for changing the look of things only on one page, rather than all of your pages.

    For example:
    <p style="color: #a38bc1; font-size: 20px;">Blah Blah</p>

  7. Decision Games
    Member
    Posted 1 year ago #

    Yeah, that makes sense except that the input style width cant be changed because Contact Form 7 uses shorthand. Unless I am missing something, I cant change that in-page.

  8. waterworks2
    Member
    Posted 1 year ago #

    Sorry about that. Yah you're right. Got my posts mixed up with another forum post for a different plugin.

    CSS won't always be assigned to every class. Sometimes there is no corresponding CSS which means you can just enter your own. For instance, you'll notice all pages within WP are automatically assigned a unique class such as:

    <body class="page page-id-245 page-template">

    in this instance you could add this to your css style sheet to style just this page individually, rather than affecting all pages in your template:

    .page-id-245 {background-color: #333;}

    In your case, you've got:
    <p><span class.....</span></p>

    So you could try just styling the p tag:

    <p style="width: 150px;"><span class=.....></span></p>

  9. needyourhelp
    Member
    Posted 1 year ago #

    Hello, i have textarea and i need it make it less width.

    i follow help on http://contactform7.com/text-fields/ but there is textarea also too wide.

    what should i use to make it smaller (on width)?

    if i use 1x2 it is still too much wide.

    thank you.

  10. Decision Games
    Member
    Posted 1 year ago #

    @waterworks2

    So you could try just styling the p tag:

    <p style="width: 150px;"><span class=.....></span></p>

    Thanks, this did make it smaller. My new problem occurs because I have the input in the same line as some text. I tried to fix it with lists, but it didnt work:

    <ol class="cf7">
        <li><p style="width: 50px;">[text A2 5/3]</p></li>
        <li><p><b>A2.</b> Custer’s Final Campaign</p></li>
    </ol>

    I also tried using CSS to limit the size on individual li. The only thing that made it smaller was the <p> so I am not sure what is left to try.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.