Forums

Hi,

I have a form on a sidebar in a test site (here: http://supply.mindmechanics.net/component/comprofiler/pluginclass.html?plugin=cbgroupjive&action=categories&func=all&Itemid=78)

The text box goes over the margin and when the screen gets smaller, so does the drop-down select. I chose Bootstrap3 as my template, thinking that would make it responsive. I also looked in all the settings if I can manually define the width, but didn't get anywhere with that.

Any ideas how to fix?

Hi Tobias,

Just add "F" to the "Class" field in your element, that will make the field fully responsive, but in this case I suggest that you set the label position to "Top".

Also, if your template has CSS support for form fields then you can set the "Form theme" to "none".

Regards,
Max

hi

i have the same issue.

The code for one field is

Name: <span style="color:#990000;">*</span><br><input class=" validate['required']" name="name" type="text" id="name" size="30" style="border: 1px solid #577086; background: #ffffff; padding:5px; margin-bottom:12px;">

what changes to the code would i need to make to ensure it is repsonsive.

Thanks alot, Paul

Hi Paul,

If this is v5 then just set the for style to "bootstrap3 pure", you should also have the latest update for this.

Regards,
Max

sorry, should have mentioned I;m using V4

Thanks, Paul

HI Paul,

Have you checked the suggestions that Max made in his post?

Bob

Hi Bob

do you mean where he mentions set the for style to "bootstrap3 pure"?

To be honest I wasn't exactly sure what he meant by that but I have quite a few existing forms using V4 and haven't; really taken a proper look at V5 - it's quite different isn't it??

Paul

Hi Paul,

v4 doesn't have responsive support, you can add your own CSS for that or try v5 with "Bootstrap pure" style enabled in your form.

Regards,
Max

thanks Max,

In the end I added the following to custom.css for the template and all now works fine:

#name, #email, #telephone, #address, #postcode, #message { width: 100%; }

.chrono_captcha_input { width: 40%; }