Form CSS is not displaying properly

Hi there,

Could you please advise on how to fix the correct display on the first page of my jotform?

Currently they are displaying items one below the other and I want to be displayed like it was set up before. (See screenshot attached for the the way I wanted to display.

Your assistance is much appreciated.

Thanks

Karibwa

We apologize for inconvenience. Can you please confirm that the form first page layout was using the multiple-column (as seen on your screenshot) before. Did you modify the existing custom CSS codes on the form that resulted to the multiple-column not working anymore? 

You can also use the Revision tool to revert the form to previous version with the multi-column layout.

Guide : How to View Form Revision History

Please try revision first. Let us know if it still did not get fixed.

Hi Yes,

I use multiple column....Don't know how did this happen when I was in the edit form... Seems like when I edit each of my pages the pre-setting in mutiple column switched to one column by default.

How do I switch to multi column setting please?

Hi, thank you for your response.

Please try to insert this custom CSS code:

.form-product-item {

    float: left;

    width: 230px; }

span[pid="1016"] {

    float: none;

    width: 500px; }





Here is a guide on how  to inject custom CSS codes: How-to-Inject-Custom-CSS-Codes

Let us know if this works for you.

Hi there,

It doesn't work from my end. Could you please check this updated form below and hide all the prices under each product?

I only want the subtotal, GST and Total price to appear, not under each product on page 1 please.

Thank you heres the link https://form.jotform.co/53403012861848

And thebooking duration as well does not seem to work. 

Please help

Thank you

Hi,

Please inject the following CSS codes into your form.

.overlay-content ~ div{

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

}

.form-product-item{

  flex:  33%;

}

It should look like something like this. 

And the booking duration as well does not seem to work. 

I just cloned your form and it seems to be working fine. Would you mind giving us more information about the issue you are getting? 

Here's a working form I've cloned from you: http://form.jotform.com/201804842335956

We look forward to your response. 

Haa....

It didn't get back to how I wanted to be... I don't know why some parts of that page isnt working anymore and those prices shouldn't be shown ....Is there a way or work around this?

Here is my other form so you get the idea of what I wanted it to be....

https://form.jotform.co/53393202307852

I have checked your form https://form.jotform.co/53403012861848 and it seems the changes has been made already.

Can you please try viewing your form on another web browser and let us know how it goes?

Yes I have made changes myself for the above form.

However, I am still trying to do the same with my other two forms below:

Could you please have a look below or maybe suggest the correct CSS codes to use so the two columns are displayed properly as well as the drop down arrow?

https://form.jotform.co/60173987055866

https://form.jotform.co/52123661175854

Many thanks

Karl

You may try using these custom CSS on both forms

.form-product-item {
border: 1px solid #EFEFEF;
margin: 5px;
width: 293px;
display: inline-block !important;
vertical-align: top;
}

.form-product-item + br {
display:none;
}

br + br {
float: left;
padding-top: 20px;
}

.form-product-item > img + .form-product-item-detail {
    width: 100%;
}
.form-product-item .form-dropdown {
    height: 30px !important;
}

Please give it a try and let us know how it goes.

Perfect... thanks alot!