length of input fields

[aliossi]

Hi,

What is responsible for the length of input fields? Would like to shorten them. It seems that theme-style is responsible for length of input field is general, isnt it? I am using the contact form 7 plugin and a german shop plugin and input fields are always “full width”. please explain how to change the length of the input fields

[Ben – SUPPORT]

Please send me the link to your website as a private message, I’ll be able to help you from there.

To send a private reply click on the checkbox below

Cheers
-Ben

[aliossi]

sent you all details in the following post http://support.swiftideas.net/forums/topic/footer-divider-issue-2/#post-6354

please be so kind and try to solve the issue

Thx

A

[Ben – SUPPORT]

Ah I’ve found what the issue is!

There is currently only styling for type=”text” but the text field is type=”email” so for now if you add

.wpcf7 input[type="email"]{
width: 95%;
margin-top: 6px;
margin-bottom: 20px;
}

Hopefully I can get ed to add it to the next update.

Thanks!
– Ben

[aliossi]

where i have to add exactly?

thx

[aliossi]

found it! thx!

There is a much bigger problem i’ve got with an online shop plugin. The input fields behave incorrectly as well and the shop-support told me, that theme-style is responsible for. What would you say?

please see attachements in order to evaluate.

[aliossi]

in firefox the letters that are put in appear only half and in safari browser the letters are over the edge. in all 3 browser the red error-message is on the very right and almost dissapeared from the page.

If theme styling is responsible, where to change the settings??

Thx in advance

A.

[Swift Ideas – Ed]

Hi there,

Can you provide a link so that I can cross browser check this and get a fix for you?

Thanks,

– Ed

[aliossi]

This reply has been marked as private.

[aliossi]

Hi,

Could you find any errors that are responsible for the issues?

Thx

[aliossi]

At least i could determine the length of input fields by setting the site options to “page with right hand sidebar”. Are there any possibilities for a customized solution without setting a sidebar?.

However, bigger problems are letters that appear to small or beyond the edge respectively, as i described above.

Thx aliossi

[Swift Ideas – Ed]

Hi there,

This plugin isn’t supported by default.

You could try adding the following to the custom css box within theme options:

.wpsg_checkoutblock input .wpsg_checkout .wpsg_checkoutblock select, .wpsg_checkout .wpsg_checkoutblock input[type=text], .wpsg_checkout .wpsg_checkoutblock input[type=password] {
height: 30px;
}

– Ed

[aliossi]

Thank you! Actually that works.

just realized you tried a different approach before.


.wpsg_checkout .wpsg_checkoutblock label {
float: left;
line-height: 28px;
margin-right: 10px;
}
.wpsg_checkoutblock input .wpsg_checkout .wpsg_checkoutblock select, .wpsg_checkout .wpsg_checkoutblock input[type=text], .wpsg_checkout .wpsg_checkoutblock input[type=password] {
width: auto!important;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}


i have adjusted slightly:


.wpsg_checkout .wpsg_checkoutblock label {
float: left;
display: inline-block;
width: 35%;
line-height: 28px;
margin-right: 10px;
}
.wpsg_checkoutblock input .wpsg_checkout .wpsg_checkoutblock select, .wpsg_checkout .wpsg_checkoutblock input[type=text], .wpsg_checkout .wpsg_checkoutblock input[type=password] {
width: auto! important;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}


that looks almost fine for me, but the only thing i cant adjust is the width of input-fields.They are to short! Do you have an idea how to do it? Never mind which value(in percent or px) i have chosen, the input fields turned to be displayed 100%.

Thx a lot

A.

[Swift Ideas – Ed]

Try:

body .wpsg_checkoutblock input .wpsg_checkout .wpsg_checkoutblock select, body .wpsg_checkout .wpsg_checkoutblock input[type=text], body .wpsg_checkout .wpsg_checkoutblock input[type=password] {
width: 50%! important;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}

– Ed

[aliossi]

thanks a lot!

aliossi