Text Field Size stuck at default

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

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

    Thread Starter Decision Games

    (@decision-games)

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

    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.

    Thread Starter Decision Games

    (@decision-games)

    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.

    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>

    Thread Starter Decision Games

    (@decision-games)

    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.

    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>

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

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

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

    if i use 1×2 it is still too much wide.

    thank you.

    Thread Starter Decision Games

    (@decision-games)

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Text Field Size stuck at default’ is closed to new replies.