How can I force the form to take up 100% of the width?

The width of the form (the entire form, not the individual fields) is extremely narrow and makes everything very clustered and hard to read. How can I force it to use 100% of the available width and space things out more evenly?

Hi emills01,

It sounds as though your template CSS may be making the form narrower; please use your browser web developer tools to see what is setting the width. The ChronoForms defaults aren't 100% but neither are they very clustered.

Bob

After some digging it appears that this is the issue:

<style type="text/css" media="screen">
#chronoform-insrequest .gcore-label-left{
min-width: 0px !important;
max-width: none !important;
width: auto !important;
}

insrequest is the name of my form.

By disabling width: auto we were able to get around this.

Where is the CSS this is found in?

Hi Emills01,

The CSS is used when you have the Auto Width Labels option set to Yes on the form Styles tab. Please try setting this back to the default No, I think that will fix the problem..

Bob

PS The CSS is set around line 167 of administrator\components\com_chronoforms5\chronoforms\actions\html\html.php

Thanks for the suggestion.

It is set to "bootstrap3" - is "pure bootstrap3" supposed to be an option? I don't have it...

The CSS is used when you have the Auto Width Labels option set to Yes on the form Styles tab. Please try setting this back to the default No, I think that will fix the problem.

It was set to yes, but setting it to no didn't fix it.

Hi emills01,

You've marked this as solved I think. Is that correct? If not please post a link to the form so I can take a quick look.

Bob

Hi emills01,

You've marked this as solved I think. Is that correct? If not please post a link to the form so I can take a quick look.

Bob

I didn't mark as solved, so thank you for checking.

The site is: http://www.nbphealth.com/

The section under "Who needs coverage" is the best example of the issue, but you'll see it throughout the form.

I think the template developer found the solution:

The issue is the extension you are using is using bootstrap 3 - both Gantry 4 and joomla only use bootstrap 2.1 so there are clashes. Joomla are working on making core joomla incorporate bootstrap 3 - but there is a lot of work involved - hopefully a future release of joomla will sort this out. In the mean time Gantry 4 can only utilise the same version of bootstrap as Joomla.

Gantry is a theme framework used by the template developer.

Hi emiils01,

I'm afraid that I'm not seeing the problem, the form looks pretty normal to me. If you want to space out the multi-field elements a bit more then you can tweak the CSS with e.g.

.gcore-subinput-container {
    width: 180px;
}

But these wider rows make the form harder to read on a mobile device.

Bob

PS It might be tidier if you set the Child dob and age boxes with Label Over like the others.
PPS We posted some code here recently to calculate age from dob if that would be useful

I'm afraid that I'm not seeing the problem, the form looks pretty normal to me.

The template developer offered a CSS fix similar to yours so it looks much better now.

Thanks.