Affichage incomplet des produits selon les navigateurs

Bonjour,

 

Sur mon formulaire : http://form.jotformpro.com/form/51033868202954, je vends des places pour 3 soirs de spectacle. Chaque soir, il y a des catégories.

Catégorie 1

Catégorie orchestre

Catégorie 2

Catégorie 3

Catégorie 4

 

Et en plus des tarifs réduits pour chaque catégorie...

 

Sur mac, toutes les catéories apparaissent avec Safari et Chrome

Sur mac, avec Firefox, les categories 3 tarif reduit et Catégories 4 n'apparaissent pas...

 

Sur PC, avec Chrome, les categories 3 & 4 n'apparaissent pas.

Sur PC, avec Firefox, la Catégorie 4 n'apparait pas...

Sur PC, avec Edge, toutes les catéories apparaissent.

 

Bref. Que dois-je faire pour que ce soit universel ?

 

Merci pour votre aide.

 

Clément

 

 

----------------------

 

Hello,

 

On my form: http://form.jotformpro.com/form/51033868202954 I sell tickets for 3 nights show. Every night there are categories.

Category 1

Category orchestra

Category 2

Category 3

Category 4

 

And more discounted rates for each category ...

 

Mac, all catéories appear with Safari and Chrome

Mac, with Firefox, the reduced fare categories 3 and 4 categories do not appear ...

 

On PC, with Chrome, the categories 3 and 4 do not appear.

On PC with Firefox, Category 4 does not appear ...

On PC, with Edge, all catéories appear.

 

Short. What should I do to make it universal?

 

Thanks for your help.

 

Clement

I checked your form on my pc with different browsers (chrome, edge, firefox). It seems like everything appears properly on chrome, while only the Category 4 is missing in Firefox and Edge.

Chrome: 

Firefox:

Edge: 

I suggest you try saving your payment integration again.

I cloned your form and re-saved the payment option and I was able to see the Category 4 in Edge, Chrome, and Firefox.

Do let us know if the issue persists.

Hello,

 

Thank you very much for your always fast and effective support, often, but this time it did not change anything. Under Chrome and Firefox on PCs, missing categories still ...

another solution ? :-)

 

Thank you for everything.

Bonjour,
Ça n’a pas tout réglé chez moi… Mais j’y ai cru un instant.
Clément
...

Hi Clément,

On my first try, I replicated the same issue with you and tried to reregister the payment tool as my colleague has already suggested, then I didn't monitor some categories again; but when I tried to save sub products again, the unseen categories on some browsers were started to appear.

Please, follow the method from the below to save your sub-products:

 

 

Please, do let us know the results.

Thanks.

C'est une catastrophe. Je suis obligé de mettre plueisuers fois les catégories, sinon, sur pC ça ne fonctionne pas.

HELP ! 

merci.

Hi there,

According to my last checks, we need to increase the "span" height to show every category properly on every browser. By injecting some CSS to your form, you can easily overcome from this situation.

Below, you will find the necessary code:

 

.form-product-item{

    height:550px !important;

}

 

Please, see the results from the below:

 

If you want to decrease the height to avoid space at the bottom of the categories, you can adjust the blue marked area. Please, try this and let us know the results.

 

Thanks.

Merci !!! C'est beaucoup mieux,

Mais maintenant, les produits restent "ouverts". avant ils se fermaient comme des accordéons et s'ouvraient quand on cochait la case du jour (produit) pour laisser apparaitre les sous catégories. Comme faire pour laisser cette fonctionnalité ?

I did not understood your question. Can you please explain in more details which option remain "open"? Is it dropdown option of sub-products? I when I selected number of sub-product dropdown menu closed. 

If possible please provide us a screenshot of your issue. 

Looking forward to your reply.

Hello, I am working with Clement on this topic.

 

See, when I open the webpage with Google Chrome on my laptop, I can always see all products called "Catégorie".

I mean that, whenever I clean on "Vendredi ... " etc, nothing happens, we can always see the categories.

 

What we want to get is :

When we open the webpage, we only see Vendredi..., Samedi..., DImanche...

When we click on "Vendredi" or "Samedi" or "Dimanche", then we can see the categories to select.

 

Thank you,

 

See the screenshot :

*Whenever I click*

If I understood you correctly you want that only options Vendredi 29 avril 2016 - 20h, Samedi 30 avril 2016 - 20h, Dimanche 1er mai 2016 - 16h and Choisir le mode d'envoi des billets are shown when you open your form. And that sub-products of those products are shown only when check box options of those product are selected. 

I have inspected your form and it seems that some of CCS code that is added inside of Form Designer is causing this issue. Please try to remove all CSS code form your form designer and then add this CSS code:

.form-product-name {

    font-size : 18px;

    color : blue;

}

.form-product-child-price.form-product-child-label {

    color : black;

}

.form-label-top {

    font-size : 18px;

}

.form-sub-label {

    height : 20px;

}

This code was already added to your form. I have only removed some additional code. 

Here is my cloned form: https://form.jotform.com/60615624168961 

Feel free to clone it. 

Hope this will help. Let us know if you need further assistance.

Thank you so much for your reply. You have understood everything.

The only issue is that I am not of what to remove from CCS. Can you give me the exact code to write in CCS? 

THANK YOU !

Here is the code right now :

@import "https://fonts.googleapis.com/css?family=Muli:light,lightitalic,normal,italic,bold,bolditalic";

.form-all {

font-family: "Muli", sans-serif;

}

.form-all {

width: 850px;

}

.form-label-left,

.form-label-right {

width: 150px;

}

.form-label {

white-space: normal;

}

.form-label.form-label-auto {

display: inline-block;

float: left;

text-align: left;

width: 150px;

}

.form-label-left {

display: inline-block;

white-space: normal;

float: left;

text-align: left;

}

.form-label-right {

display: inline-block;

white-space: normal;

float: left;

text-align: right;

}

.form-label-top {

white-space: normal;

display: block;

float: none;

text-align: left;

}

.form-all {

font-size: 14px;

}

.form-label {

font-weight: bold;

}

.form-checkbox-item label,

.form-radio-item label {

font-weight: normal;

}

.supernova {

background-color: rgba(204, 204, 204, 0.76);

background-color: #ffffff;

}

.supernova body {

background-color: transparent;

}

/*

@width30: (unit(@formWidth, px) + 60px);

@width60: (unit(@formWidth, px)+ 120px);

@width90: (unit(@formWidth, px)+ 180px);

*/

/* | */

@media screen and (min-width: 480px) {

.supernova .form-all {

border: 1px solid #e6e6e6;

-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);

-moz-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);

box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);

}

}

/* | */

/* | */

@media screen and (max-width: 480px) {

.jotform-form {

padding: 10px 0;

}

}

/* | */

/* | */

@media screen and (min-width: 480px) and (max-width: 768px) {

.jotform-form {

padding: 30px 0;

}

}

/* | */

/* | */

@media screen and (min-width: 768px) and (max-width: 1024px) {

.jotform-form {

padding: 60px 0;

}

}

/* | */

/* | */

@media screen and (min-width: 1024px) {

.jotform-form {

padding: 90px 0;

}

}

/* | */

.supernova .form-all,

.form-all {

background-color: rgba(204, 204, 204, 0.76);

border: 1px solid transparent;

}

.form-header-group {

border-color: rgba(179, 179, 179, 0.76);

}

.form-matrix-table tr {

border-color: rgba(179, 179, 179, 0.76);

}

.form-matrix-table tr:nth-child(2n) {

background-color: rgba(191, 191, 191, 0.76);

}

.form-all {

color: #1b1b1a;

}

.form-header-group .form-header {

color: #1b1b1a;

}

.form-header-group .form-subHeader {

color: #353533;

}

.form-sub-label {

color: #353533;

}

.form-label-top,

.form-label-left,

.form-label-right,

.form-html {

color: #1b1b1a;

}

.form-checkbox-item label,

.form-radio-item label {

color: #353533;

}

.form-line.form-line-active {

-webkit-transition-property: all;

-moz-transition-property: all;

-ms-transition-property: all;

-o-transition-property: all;

transition-property: all;

-webkit-transition-duration: 0.3s;

-moz-transition-duration: 0.3s;

-ms-transition-duration: 0.3s;

-o-transition-duration: 0.3s;

transition-duration: 0.3s;

-webkit-transition-timing-function: ease;

-moz-transition-timing-function: ease;

-ms-transition-timing-function: ease;

-o-transition-timing-function: ease;

transition-timing-function: ease;

background-color: rgba(255, 251, 233, 0.37);

}

/* ömer */

.form-radio-item,

.form-checkbox-item {

padding-bottom: 0px !important;

}

.form-radio-item:last-child,

.form-checkbox-item:last-child {

padding-bottom: 0;

}

/* ömer */

.form-single-column .form-checkbox-item,

.form-single-column .form-radio-item {

width: 100%;

}

.supernova {

height: 100%;

background-repeat: no-repeat;

background-attachment: scroll;

background-position: center top;

background-repeat: repeat;

background-attachment: fixed;

background-size: auto;

background-size: cover;

}

.supernova {

background-image: none;

background-image: url("http://www.jotform.com/uploads/cljclj/form_files/Visuel%20laFluteEnchantee%20pour%20le%20formulaire.png");

}

#stage {

background-image: none;

background-image: url("http://www.jotform.com/uploads/cljclj/form_files/Visuel%20laFluteEnchantee%20pour%20le%20formulaire.png");

}

/* | */

.form-all {

background-repeat: no-repeat;

background-attachment: scroll;

background-position: center top;

background-repeat: repeat;

}

.form-header-group {

background-repeat: no-repeat;

background-attachment: scroll;

background-position: center top;

}

.form-line {

margin-top: 0px;

margin-bottom: 0px;

}

.form-line {

padding: 8px 36px;

}

.form-all .form-textbox,

.form-all .form-radio-other-input,

.form-all .form-checkbox-other-input,

.form-all .form-captcha input,

.form-all .form-spinner input,

.form-all .form-pagebreak-back,

.form-all .form-pagebreak-next,

.form-all .qq-upload-button,

.form-all .form-error-message {

-webkit-border-radius: 6px;

-moz-border-radius: 6px;

border-radius: 6px;

}

.form-all .form-sub-label {

margin-left: 3px;

}

.form-all .form-textarea {

-webkit-border-radius: 6px;

-moz-border-radius: 6px;

border-radius: 6px;

}

.form-all .form-submit-button,

.form-all .form-submit-reset,

.form-all .form-submit-print {

-webkit-border-radius: 6px;

-moz-border-radius: 6px;

border-radius: 6px;

}

.form-all .form-sub-label {

margin-left: 3px;

}

.form-dropdown {

-webkit-border-radius: 6px;

-moz-border-radius: 6px;

border-radius: 6px;

-webkit-appearance: none;

-moz-appearance: button;

appearance: none;

margin: 0;

}

.form-all {

-webkit-border-radius: 6px;

-moz-border-radius: 6px;

border-radius: 6px;

}

.form-section:first-child {

-webkit-border-radius: 6px 6px 0 0;

-moz-border-radius: 6px 6px 0 0;

border-radius: 6px 6px 0 0;

}

.form-section:last-child {

-webkit-border-radius: 0 0 6px 6px;

-moz-border-radius: 0 0 6px 6px;

border-radius: 0 0 6px 6px;

}

.form-all .qq-upload-button,

.form-all .form-submit-button,

.form-all .form-submit-reset,

.form-all .form-submit-print {

font-size: 1em;

padding: 9px 15px;

font-family: "Muli", sans-serif;

font-size: 16px;

font-weight: normal;

}

.form-all .qq-upload-button,

.form-all .form-submit-button,

.form-all .form-submit-reset,

.form-all .form-submit-print {

color: #ffffff !important;

}

.form-all .form-pagebreak-back,

.form-all .form-pagebreak-next {

font-size: 1.15em;

padding: 12px 18px;

display: block;

width: 100%;

margin: 0;

font-family: "Verdana", sans-serif;

font-size: 14px;

font-weight: normal;

}

.form-all .form-buttons-wrapper {

margin-left: 0 !important;

}

.form-all .form-pagebreak-back-container,

.form-all .form-pagebreak-next-container {

width: 48% !important;

padding: 24px 0;

}

.form-all .form-pagebreak-next-container {

margin-left: 4%;

}

.form-all .form-submit-print {

margin-left: 0 !important;

margin-right: 0 !important;

}

/*

& when ( @buttonFontType = google ) {

@import (css) "@{buttonFontLink}";

}

*/

h2.form-header {

line-height: 1.618em;

font-size: 1.714em;

}

h2 ~ .form-subHeader {

line-height: 1.5em;

font-size: 1.071em;

}

.form-header-group {

text-align: center;

}

/*.form-dropdown,

.form-radio-item,

.form-checkbox-item,

.form-radio-other-input,

.form-checkbox-other-input,*/

.form-captcha input,

.form-spinner input,

.form-error-message {

padding: 4px 3px 2px 3px;

}

.form-header-group {

font-family: "Muli", sans-serif;

}

.form-section {

padding: 0px 0px 0px 0px;

}

.form-header-group {

margin: 0px 0px 0px 0px;

}

.form-header-group {

padding: 24px 36px 24px 36px;

}

.form-header-group {

background-color: rgba(255, 255, 255, 0.62);

}

.form-textbox,

.form-textarea {

border-color: #575757;

color: #202020;

padding: 4px 3px 2px 3px;

}

.form-textbox,

.form-textarea,

.form-radio-other-input,

.form-checkbox-other-input,

.form-captcha input,

.form-spinner input {

background-color: rgba(255, 255, 255, 0);

}

.form-textarea {

height: 100px;

}

.form-dropdown {

border-color: #575757;

color: #202020;

-webkit-appearance: menulist-button;

background-color: rgba(248, 248, 248, 0);

}

[data-type="control_dropdown"] .form-input,

[data-type="control_dropdown"] .form-input-wide {

width: 150px;

}

.form-buttons-wrapper {

margin-left: 0 !important;

text-align: center !important;

}

.form-label {

margin-right: 0px;

margin-bottom: 0;

}

.form-label {

font-family: "Muli", sans-serif;

}

li[data-type="control_image"] div {

text-align: left;

}

li[data-type="control_image"] img {

border: none;

border-width: 0px !important;

border-style: solid !important;

border-color: false !important;

}

.form-line-column {

width: auto;

}

.form-line-error {

overflow: hidden;

-webkit-transition-property: none;

-moz-transition-property: none;

-ms-transition-property: none;

-o-transition-property: none;

transition-property: none;

-webkit-transition-duration: 0.3s;

-moz-transition-duration: 0.3s;

-ms-transition-duration: 0.3s;

-o-transition-duration: 0.3s;

transition-duration: 0.3s;

-webkit-transition-timing-function: ease;

-moz-transition-timing-function: ease;

-ms-transition-timing-function: ease;

-o-transition-timing-function: ease;

transition-timing-function: ease;

background-color: rgba(255, 244, 244, 0);

}

.form-line-error .form-error-message {

background-color: #ff3200;

clear: both;

float: none;

}

.form-line-error .form-error-message .form-error-arrow {

border-bottom-color: #ff3200;

}

.form-line-error input:not(#coupon-input),

.form-line-error textarea,

.form-line-error .form-validation-error {

border: 1px solid #ff3200;

-webkit-box-shadow: 0 0 3px #ff3200;

-moz-box-shadow: 0 0 3px #ff3200;

box-shadow: 0 0 3px #ff3200;

}

.ie-8 .form-all {

margin-top: auto;

margin-top: initial;

}

.ie-8 .form-all:before {

display: none;

}

/* | */

@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

.jotform-form {

padding: 0;

}

.form-all {

border: 0;

width: 100%;

max-width: initial;

}

.form-sub-label-container {

width: 100%;

margin: 0;

}

.form-input {

width: 100%;

}

.form-label {

width: 100%!important;

}

.form-line {

padding: 2% 5%;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

input[type=text],

input[type=email],

input[type=tel],

textarea {

width: 100%;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

max-width: initial !important;

}

.form-input,

.form-input-wide,

.form-textarea,

.form-textbox,

.form-dropdown {

max-width: initial !important;

}

div.form-header-group {

padding: 24px 36px !important;

padding-left: 5% !important;

padding-right: 5% !important;

margin: 0 0px 2% !important;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

[data-type="control_button"] {

margin-bottom: 0 !important;

}

.form-buttons-wrapper {

margin: 0!important;

}

.form-buttons-wrapper button {

width: 100%;

}

table {

width: 100%!important;

max-width: initial !important;

}

table td + td {

padding-left: 3%;

}

.form-checkbox-item input,

.form-radio-item input {

width: auto;

}

.form-collapse-table {

margin: 0 5%;

}

}

.form-product-item{height:550px !important;}

/* | *//*__INSPECT_SEPERATOR__*/

.form-pagebreak-back {}#form-pagebreak-back_33 {}.form-pagebreak-next {}#form-pagebreak-next_33 {}.form-pagebreak {}#cid_33 div.form-pagebreak {}.form-product-name {

font-size : 18px;

color : blue;

}.form-product-child-price.form-product-child-label {

color : black;

}.form-label.form-label-top {

font-size : 18px;

}.form-dropdown {}.form-textbox {}.form-sub-label {

height : 20px;

}.form-address-table {}#input_15_custom_1019_0 {}.form-input-wide.jf-required {}.form-line.jf-required {}.form-product-item {}.form-product-child-label {}

Please open your Form Designer.

And instead of this code:

.form-pagebreak-back {}#form-pagebreak-back_33 {}.form-pagebreak-next {}#form-pagebreak-next_33 {}.form-pagebreak {}#cid_33 div.form-pagebreak {}.form-product-name {

font-size : 18px;

color : blue;

}.form-product-child-price.form-product-child-label {

color : black;

}.form-label.form-label-top {

font-size : 18px;

}.form-dropdown {}.form-textbox {}.form-sub-label {

height : 20px;

}.form-address-table {}#input_15_custom_1019_0 {}.form-input-wide.jf-required {}.form-line.jf-required {}.form-product-item {}.form-product-child-label {}

 

add this CSS code:

.form-product-name {

    font-size : 18px;

    color : blue;

}

.form-product-child-price.form-product-child-label {

    color : black;

}

.form-label-top {

    font-size : 18px;

}

.form-sub-label {

    height : 20px;

}

Or inside of Preferences > Form Styles > Inject Custom CSS field, change the code after:

/* | *//*__INSPECT_SEPERATOR__*/

Hope this will help. Let us know if you need further assistance. 

Thank you. I did not know where to modify this CSS.

I have done what you said but now, the form has the same problem as before : some categories are cut.

 

I have put back a size for the box : "height : 550 px ;" ... waiting for another solution.

 

Thank you very much for your help.

Mélanie

 

 

Melanie, this is the custom CSS that your form has when you open it up in the Designer at this time:

.form-product-name {
    font-size : 18px;
    color : blue;
}

.form-product-child-price.form-product-child-label {
    color : black;
}

.form-label-top {
    font-size : 18px;
}

.form-sub-label {
    height : 20px;
}

.form-product-item {
    height : 550px !important;
    box-sizing : 560px;
    display : inline;
    position : relative;
}

The problematic CSS which prevents your products from collapsing when the option is not ticked, is this part:

.form-product-item {
    height : 550px !important;
    box-sizing : 560px;
    display : inline;
    position : relative;
}

Please remove that block, and replace it with the following instead:

.form-product-child-table td, .form-product-child-table th {
    padding: 0 !important;
}

By doing that, your products will once again collapse when the main box is not ticked. You can change the CSS by opening your form in the Designer:

Once there, switch to the CSS tab, and replace the last portion of your CSS code:

Upon replacing that block of code, your sub products will be expanding as depicted in the following video:

Please try it out and let us know how it goes.

Thank you, it is much better. It works for Google Chrome.

 

Unfortunately, there is still an issue with Mozilla : categorie 4 is missing. See the screenshot.

 

Chrome on the left, Firefox on the right.

Thanks again for your help.

Mélanie

I have tested your form in Mozilla Firefox and I am not able to replicate mentioned issue. Catégorie 4 is shown on all products. 

Are you still unable to see Catégorie 4 in Mozilla Firefox? Please try to update your Mozilla Firefox to latest version.

Let us know if you need further assistance. 

Weird, my firefox is updated to latest version 44.0.2. 

It may depends on zoom and Screen parameters because I am able to see it when I do a zoom of 90%.

Never mind, we will add a note in the page to ask to use Google Chrome or Safari.

 

Thank you for your help.

On behalf of my colleagues, you are welcome. 

Feel free to contact us if you have any other questions. 

Hello again,

May I ask you how you do record your actions in a video? 

I am quite interested with doing that too. It is very useful to explain which steps to follow. Which software are you using?

 

Thank you,

Mélanie

Hi Mélanie,

Generally, we are using the screen record tool called "LICEcap". It is capturing your screen in GIF format.

 

Regards.