- This topic has 18 replies, 2 voices, and was last updated 5 years, 6 months ago by
.
Hi. I am trying to import over Gravity Forms to use on a site that has Jevelin but all of the styling is messed up (not default GF styling). It appears that the theme styling is over riding the Gravity Forms styling and shrinking field write in boxes. How do I disable this?
I saw that there was one other Jevelin user that had a styling issue and the solution was to input custom code into the CSS but I tried that code without success.
Any help would be appreciated as I like your theme but have dozens of Gravity Forms that I need to use so I need a theme that works with it.
Thanks
Hi @Corydondean,
Sorry to hear of the problem you are having.
Could you please share me the page URL from your site where it is not displaying correctly so that I can troubleshoot it?
Best regards,
Shufflehound teamSure, thanks for the quick response.
heliyo.com/heliyo-intakeYou can resolve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.gform_wrapper input.large, .gform_wrapper .ginput_complex input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=image]):not([type=file]) { width: 100% !important; } body .ui-datepicker tbody td { padding: 0 !important; } body .ui-datepicker th { padding: 5px 0 !important; } body .ui-datepicker-title select { line-height: 20px!important; margin: 0 !important; }Hi. That did resolve the issue with the address fields but not others. For example the phone and email fields are still smaller and do not change when the small/medium/large field sizes are selected manually while editing the GF.
Big picture question, is this a bigger conflict between styling for GF and Jevelin? Will I need custom code for each specific instance?
Thanks
Please change the above shared CSS code as following.
#page-container .gform_wrapper input.large, .gform_wrapper .ginput_complex input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=image]):not([type=file]) { width: 100% !important; } body .ui-datepicker tbody td { padding: 0 !important; } body .ui-datepicker th { padding: 5px 0 !important; } body .ui-datepicker-title select { line-height: 20px!important; margin: 0 !important; }Yes it seems bigger issue therefore I have notified the theme developer about this so that it will be fixed.
The issue will be fixed ASAP.
Thank you for getting back to me. I see in your CSS code that the fix is to make the width 100% which makes the fields excessively large and all the same size.
Please keep me updated on a universal solution so that custom CSS code isn’t needed to adjust every field. I appreciate the help.
Sure we will update you here.
In the meanwhile you can change that width to whatever you want to.
The issue is resolved in the below latest version of theme so please update the theme as described here https://support.shufflehound.com/updating-theme/
Thank you for the quick reply. The update did fix the majority of field issues but there is still an issue with the “List” fields. I included a screen shot of how the text box within the “list” fields is shortened. I also looked through other field types and the rest of them look great.
Do you have a quick CSS trick to fix the list fields?
Thank you!
Could you please share me the page URL from your site where it is not displaying correctly so that I can troubleshoot it?
I am so sorry, I never saw your reply come through. An example page where this is taking place is heliyo.com/heliyo-intake.
Thank you for your help.
Not an issue at all.
I visited your shared site but saw the list field is displaying fine for me as shown in the attached screenshot.
If you want to increase its width to 100% then you can do so by using below custom CSS code.
.gform_wrapper select { width: 100% !important; }Hi. Thanks for the quick replay. The issue is on the second page of the form with “List” fields. The rest of the fields appear to be working fine.
Sorry, forgot to mention that I attempted the custom css that you recommended and it didn’t change the issue with the list fields. To see a list field that is having the issue go to the second page of the form and select “Yes” for the first question and “Injury” for the check boxes.
Thank you for your help.
Ok I got it now on the second screen.
You can make it full width using below CSS code.
.gfield_list_cell input[type="text"] { width: 100% !important; }Hi. I inputted the CSS code you recommended but it did not affect the issue. In the screenshot included you can see that the write-in field for the lists is 50% of the available space. I made sure to clear caches and tried on several different computers to make sure. Any other ideas on how to fix this?
Thanks!
Sorry, forgot to include the screenshot.
It is not working on your site because of CSS specificity issue so please try using below custom CSS code instead of above.
#page-container .gfield_list_cell input[type="text"] { width: 100% !important; }
