Autocompleter field width

Hello all,

Do you know how to change the width of autocompleter field? In which file of css can we made this change?
Thanks for your help

Bertrand

Hi Bertrand,

Please post a link to the form so I can take a quick look.

Bob

Hi Bob,

You will find here attached screen copy. The first row is with autocompleter. The second row is not finished yet.
What I would like is to reduce the width of the fields to get this record (row) on 1 line like the second row.

Thanks
Bertrand

HI bcouvin,

I'm sorry but while the screen shot shows the problem it doesn't help solve it.

You can use CSS in a Load CSS action to change the styling of any of the form elements.

Bob

Hello Bob,

I tried to add this css code below in a load css action, with this

div.select2-container.form-control.A {
min-width: 100px;
}

But nothing changed. Here is the code I got when examining the first element Editor in a browser. The id of Editor is Editor0. What do I need to change in my previous code?

<div class="gcore-subinput-container" id="fitem-Editor0">
<div class="gcore-input pull-left gcore-sub-input gcore-display-table" id="fin-Editor0">
<div class="select2-container form-control A" id="s2id_Editor0" title="" style="font-size: 95%; min-width: 200px; width: 171px;"><a href="javascript:void(0)" class="select2-choice select2-default" tabindex="-1">
<span class="select2-chosen" id="select2-chosen-1">Editor</span>
<abbr class="select2-search-choice-close"></abbr>
<span class="select2-arrow" role="presentation"><b role="presentation"></b></span>
</a>
<label for="s2id_autogen1" class="select2-offscreen"></label>
<input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-1" id="s2id_autogen1">
<div class="select2-drop select2-display-none select2-with-searchbox">
<div class="select2-search">
<label for="s2id_autogen1_search" class="select2-offscreen"></label>
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" role="combobox" aria-expanded="true" aria-autocomplete="list" aria-owns="select2-results-1" id="s2id_autogen1_search" placeholder="">
</div>
<ul class="select2-results" role="listbox" id="select2-results-1">
</ul>
</div>
</div>
<input name="Editor0" id="Editor0" value="" placeholder="Editor" class="form-control A select2-offscreen" title="" style="font-size:95%;" data-inputmask="" data-load-state="" data-tooltip="" type="text" tabindex="-1">
</div>
</div>

Thank for your help
Bertrand

Hi Bertrand,

I thought that you wanted the inputs less wide - for that you need to set max-width.

Bob

Bob,

Please have a look what the results look like after changing to max-width.
I think that this class is not the right one (div.select2-container.form-control.A), so what is the correct class for Chronoforms?

Thanks
Bertrand

Hi Bertrand,

Please post a link to the form so I can take a quick look.

The CSS will depend on your form layout and exactly what you need to do. Your web browser developer tools will let you see exactly what is being applied and to test different settings.

Bob

Bob,

The problem is that I am on a local machine.
Is it possible for you to skype or another solution?

NB: I use Themlerfor the template builder, and the content padding is 0px. The form is in this content.

Bertrand

Hi Bertrand,

Please take a Form Backup using the icon in the Forms Manager and post it here.

Bob

Hi Bob,
Please find here attached the Backup form.
Bertrand

Hello Bob,

That works fine. I really appreciate what you did.
A coffee please...

Bertrand