Form Fields aren't completely responsive

I'm using the Bootstrap layout for my form. You're applying the following style to form elements:

.gbs3 .A {
width: auto !important;
}

As a result, when forms are viewed on small screens (~240 px), the elements extend off the right side of the screen. This is not proper responsive behavior.

I realize that you're doing this so things reflow nicely as the browser changes widths, but it's creating the aforementioned error.

Hi lachmanski,

Which elements extend off the right side of the screen ? all inputs types of just textareas ?

Regards,
Max

Here's a screenshot. I'm using the default Protostar template on Chrome. All textboxes and text areas extend right, while the website body and all other elemens resize with the viewport as expected.

I don't think there are displays as tight as this one, but you can force the fields to adapt to any size by using this code inside a CSS action:

.gbs3 .chronoform .gcore-input{width:100% !important;}
.gbs3 .chronoform .form-control{width:100% !important;}

You can also apply this CSS to specific resolutions only, check the example below:

@media all and (max-width: 699px) and (min-width: 500px), (min-width: 1000px) {
  body {
    background: #fff;
  }
}

That would work - but it's a hack and it's site/viewport specific. Pure Bootstrap forms are actually 100% responsive out of the box. I guess I was just confused by choosing Bootstrap as a ChronoForms display option, and having a result that it isn't responsive.

What goal are you trying to achieve with your custom styling? Bootstrap may already have a solution to your problem without needing extra css. If you're trying to stack all of the labels / inputs onto their own lines simultaneously, you can wrap the label with a div class="col-sm-6" and the inputs with a div class="col-sm-6". Then mobile viewpoints will stack the lines simultaneously at the same break point.

Well, Bootstrap is not used to build the forms, its mainly used for styling, and this is why we have different themes, so Bootstrap was actually added later.

I will try to improve the BS theme implementation to make the forms "more responsive", I have faced problems with this earlier because Chronoforms has too many fields options, and multi field rows.

But for now, the CSS I posted should be fine, and you can try the new updates later!

Regards,
Max