Hello,
I have on my site a page where I display search views.
I added to these forms (in the filters section), a modal window (for example in the accordion "Drone" the button "Add your drone").
In this window, I display a creative CRED form for a cpt that has multiple parents.
There are therefore drop-down menus to select them.
Unfortunately, 4 of them are very numerous and instead of having a list boring, we must do a search (it can be seen on the page wikidronfr.com in the same tab "Drone" is the form used ).
It seems that this search function in the drop-down list when there are too many elements is not compatible with modal windows.
I hope I have been calming enough so that you can help me and guide me.
Thank you
I'm sorry, I do not understand how to find the modal you are describing. I clicked the blue button that says "Ajouter son drone (vous devez être connecté)" but nothing happened. There are several JavaScript errors shown in the console. Please provide step-by-step instructions to activate the modal and show the CRED form.
Hello,
I'm sorry, I was not precise enough.
the button is green and has no parentheses. he is present on the page "parcourir le materiel" ...
the homepage has the form used in the modal window
I still do not understand, sorry! I clicked the button and a modal appeared, but the modal has no content. I do not see any CRED form in the modal body. Please see the attached screenshots. How do I see the CRED form???
ok, sorry for not having specified: you need an account to see the form !!!!
All of my apologies !!!
I change access for the moment, so you can see it now
Okay I can see the form now.
It seems that this search function in the drop-down list when there are too many elements is not compatible with modal windows.
I don't understand what you mean. Can you take a screenshot of this "search function"? Then take another screenshot showing where the "search function" should appear in the modal window?
Ecxcuse me for time to answer...
In CPT1.jpg to view CRED in a page and dropdown menu with search
In CPT2.JPG to view the same CRED and another dropdown menu
In CPT3.JPG to view the same CRED in a bootstrap modal window and no item in the dropdown menu....
I think I understand now, thanks. The difference between these select fields is the number of options available. If more than 15 options are available, the text input search area appears. If 15 or fewer options are available, no text input search area will appear.
Hello,
I agree with conclusions, I had the same.
That being said, this feature does not seem to work in a modal window.
This is a problem, because in fact, the menu appears empty as illustrated in the image cpt3.jpg
How can we solve this problem ????
That being said, this feature does not seem to work in a modal window.
Can you share the code in your CRED form editor, as well as any JavaScript you have added that affects this form?
CRED Form :
<div class="formfontsize">
[credform class='cred-form cred-keep-original']
[cred_field field='form_messages' value='' class='alert alert-warning']
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label>Nom complet<br /n>(utilisée pour les recherches, donc nom complet svp)</label>
[cred_field field='post_title' post='cpt_drone' value='' urlparam='' class='form-control' output='bootstrap']
</div>
<div class="form-group">
<label>Etat de la config</label>
[cred_field field='s_etat' display='select' single_select=true output='bootstrap']
</div>
<div class="form-group">
<label>KV moteurs</label>
[cred_field field='cf_kv-moteurs' post='cpt_drone' value='' urlparam='' class='form-control' output='bootstrap']
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label>En quelques mots</label>
[cred_field field='post_excerpt' post='cpt_drone' value='' urlparam='' class='form-control' output='bootstrap']
</div>
<div class="form-group">
<label>Dimension du châssis</label>
[cred_field field='s_dimension-du-chassis' display='select' single_select=true output='bootstrap']
</div>
<div class="form-group">
<label>Nombre d'éléments sur la batterie</label>
[cred_field field='s_nombre-d-elements' display='select' single_select=false output='bootstrap']
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label>Visuel</label>
[cred_field field='cf_visuel-drone' post='cpt_drone' value='' urlparam='' output='bootstrap']
</div>
<div class="form-group">
<label>Vidéo du drone</label>
[cred_field field='cf_video-du-drone' post='cpt_drone' value='' urlparam='' class='form-control' output='bootstrap']
</div>
<div class="form-group">
<label>Taille des hélices</label>
[cred_field field='s_taille-des-helices' display='select' single_select=true output='bootstrap']
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label>Nom de votre drone</label>
[cred_field field='cf_nom-du-built' post='cpt_drone' value='' urlparam='' class='form-control' output='bootstrap']
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>Poids hors batterie</label>
[cred_field field='cf_poids-du-built' post='cpt_drone' value='' urlparam='' class='form-control' output='bootstrap']
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Types d'utilisation</label>
[cred_field field='s_type-d-utilisation' display='checkbox' single_select=true output='bootstrap']
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>Ampérage ESC</label>
[cred_field field='cf_amperage-des-esc' post='cpt_drone' value='' urlparam='' class='form-control' output='bootstrap']
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label>Châssis</label>
[cred_field field='_wpcf_belongs_cpt_frames_id' value='' order='title' ordering='asc' select_text='--- non séléctionné ---' class='form-control' output='bootstrap']
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label>FC</label>
[cred_field field='_wpcf_belongs_cpt_fc_id' value='' order='title' ordering='asc' select_text='--- non séléctionné ---' class='form-control' output='bootstrap']
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label>ESC</label>
[cred_field field='_wpcf_belongs_cpt_esc_id' value='' order='title' ordering='asc' select_text='--- non séléctionné ---' class='form-control' output='bootstrap']
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label>Moteurs</label>
[cred_field field='_wpcf_belongs_cpt_moteur_id' value='' order='title' ordering='asc' select_text='--- non séléctionné ---' class='form-control' output='bootstrap']
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label>Hélices</label>
[cred_field field='_wpcf_belongs_cpt_prop_id' value='' order='title' ordering='asc' select_text='--- non séléctionné ---' class='form-control' output='bootstrap']
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label>Batterie</label>
[cred_field field='_wpcf_belongs_cpt_batterie_id' value='' order='title' ordering='asc' select_text='--- non séléctionné ---' class='form-control' output='bootstrap']
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label>VTx</label>
[cred_field field='_wpcf_belongs_cpt_vtx_id' value='' order='title' ordering='asc' select_text='--- non séléctionné ---' class='form-control' output='bootstrap']
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label>Antenne</label>
[cred_field field='_wpcf_belongs_cpt_antenne_id' value='' order='title' ordering='asc' select_text='--- non séléctionné ---' class='form-control' output='bootstrap']
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label>Caméra FPV</label>
[cred_field field='_wpcf_belongs_cpt_cam-fpv_id' value='' order='title' ordering='asc' select_text='--- non séléctionné ---' class='form-control' output='bootstrap']
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label>Caméra HD</label>
[cred_field field='_wpcf_belongs_cpt_cam-hd_id' value='' order='title' ordering='asc' select_text='--- non séléctionné ---' class='form-control' output='bootstrap']
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label>OSD</label>
[cred_field field='_wpcf_belongs_cpt_osd_id' value='' order='title' ordering='asc' select_text='--- non séléctionné ---' class='form-control' output='bootstrap']
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label>PDB</label>
[cred_field field='_wpcf_belongs_cpt_pdb_id' value='' order='title' ordering='asc' select_text='--- non séléctionné ---' class='form-control' output='bootstrap']
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Remarques sur la config</label>
[cred_field field='cf_remarques-sur-le-built' post='cpt_drone' value='' urlparam='' output='bootstrap']
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Avis de l'auteur</label>
[cred_field field='cf_avis-du-posteur-sur-le-built' post='cpt_drone' value='' urlparam='' output='bootstrap']
</div>
</div>
</div>
</div>
</div>
<div class="form-group">[cred_field field='recaptcha' value='' urlparam='' class='form-control' output='bootstrap']</div>
[cred_field field='form_submit' value='Envoi' urlparam='' class='btn btn-primary btn-lg' output='bootstrap']
[/credform]
</div>
CSS
div.formfontsize
{
font-size: 12px;
background-color: #e6e6e6;
border: 1px solid black;
padding: 1px 1px 1px 1px;
}
Code for modal window (extract from a view)
<div class="formfontsize">
[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label>[wpml-string context="wpv-views"]Type d'utilisation[/wpml-string]</label>
[wpv-control-post-taxonomy taxonomy="s_type-d-utilisation" type="select" url_param="wpv-s_type-d-utilisation"]
</div>
<div class="form-group">
<label>[wpml-string context="wpv-views"]Idée ou volant[/wpml-string]</label>
[wpv-control-post-taxonomy taxonomy="s_etat" type="select" url_param="wpv-s_etat"]
</div>
<div class="form-group">
<label>[wpml-string context="wpv-views"]Tailles des hélices[/wpml-string]</label>
[wpv-control-post-taxonomy taxonomy="s_taille-des-helices" type="select" url_param="wpv-s_taille-des-helices" auto_fill_sort="asc"]
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>[wpml-string context="wpv-views"]Dimensions du châssis[/wpml-string]</label>
[wpv-control-post-taxonomy taxonomy="s_dimension-du-chassis" type="select" url_param="wpv-s_dimension-du-chassis"]
</div>
<div class="form-group">
<label>[wpml-string context="wpv-views"]Types de moteurs[/wpml-string]</label>
[wpv-control-post-taxonomy taxonomy="s_type-de-moteur" type="select" url_param="wpv-s_type-de-moteur"]
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>[wpml-string context="wpv-views"]Nombres de pâles[/wpml-string]</label>
[wpv-control-post-taxonomy taxonomy="s_nombre-de-pales" type="select" url_param="wpv-s_nombre-de-pales"]
</div>
<div class="form-group">
<label>[wpml-string context="wpv-views"]Batterie[/wpml-string]</label>
[wpv-control-post-taxonomy taxonomy="s_nombre-d-elements" type="select" url_param="wpv-s_nombre-d-elements" auto_fill_sort="asc"]
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>[wpml-string context="wpv-views"]Tailles des moteurs[/wpml-string]</label>
[wpv-control-post-taxonomy taxonomy="s_taille-des-moteurs" type="select" url_param="wpv-s_taille-des-moteurs" auto_fill_sort="asc"]
</div>
<div class="form-group">
<label>[wpml-string context="wpv-views"]KV(s) des moteurs[/wpml-string]</label>
[wpv-control-post-taxonomy taxonomy="s_kv-des-moteurs" type="select" url_param="wpv-s_kv-des-moteurs" auto_fill_sort="asc"]
</div>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#MADrone">Ajouter un drone</button>
<!-- Modal -->
<div id="MADrone" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Ajouter un drone</h4>
</div>
<div class="modal-body">
<p>[cred_form form="formulaire-drones"]</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer la fenêtre</button>
</div>
</div>
</div>
</div>
</div>
</div>
[/wpv-filter-controls]
[wpv-filter-end]
</div>
Hope it will help !
Filter controls and CRED forms are both form tags, therefore you cannot nest CRED forms inside the Filter Controls area. Nested forms are invalid HTML, and will cause unexpected problems. Please move the modal and CRED form outside the Filter Controls of your View. Somewhere in the Loop Output editor, outside the wpv-loop tags, is probably okay. Then test again and let me know if the problem is not resolved.
Ok thx.
No CRED Modal Window anywhere in VIEW ...
I did some test and it didn't work on VIEW...
I must change organisation...
