CMS Development

FIidabashi
Member

Form gets cut off - CSS Issue?

SOLVE

Hi, totally a layman here when it comes to development.

We are trying to embed a stock form on an existing page - and the form gets cut off.

Can anyone take a look and tell us if this is an easy fix?  https://cotoclub.com/home/test - this is the test url.

We have a live contact form 7 url that has preexisting style.  https://www.cotoclub.com - not sure if theres an interaction there with form styling?

Ive tried to add a class to the form but that breaks it. 

Really appreciate any help that you could offer.

Screen Shot 2021-08-04 at 3.21.11 PM.png

0 Upvotes
3 Accepted solutions
Chris-M
Solution
Top Contributor

Form gets cut off - CSS Issue?

SOLVE

Hey @FIidabashi,

 

you are right, the form gets cut off, this is because you are loading the form inside an iframe.
Inside your theme.css the max-height of the iframe get defined to a maximum of 450px, so everything below gets cuted of.

If the iframe is not necessary i would remove that and embed the form normally or else you could remove or increase the max-height for your Iframe css.

 

Resetting the max height:

 

 

.inquiry iframe {
  max-height: none;
}

 

 

Here is an image of that css which cuts off the form

 

HubspotCom1.PNG

 

- Chris

View solution in original post

Chris-M
Solution
Top Contributor

Form gets cut off - CSS Issue?

SOLVE

Hey @FIidabashi,

 

i just opened your page, it looks fine from my side. The form is rendered until the submit Button. The CSS code is also applied to this element by you.

HubspotCom2.PNG

Try an incognito mode / or another browser, just to check if this might be a caching issue from your browser.

 

Full Page Image:

screencapture-cotoclub-home-test-2021-08-04-09_38_58.png

 

Checked with Chrome and Firefox

 

- Chris

View solution in original post

miljkovicmisa
Solution
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

Form gets cut off - CSS Issue?

SOLVE

Hello @FIidabashi , thank you for writing in the forum,
it seems that you have forced some heights on the iframe of the form, not sure how exacly did this happen but you should need the two steps I will point:
1. If you have access to the `<iframe>` tag you should remove the inline `height` css rule.
2. Remove `height` and `max-height` rules from the theme.css file (if you can access it).
You can see the two steps below in the screenshot:

Untitled.jpg

If neither works or if you can't remove one or neither of the above steps then the code snipped below will do the job.

.hs-form-iframe {
    height: 900px!important;
    max-height: unset!important;
}


If you have any further questions, don't hesitate to write.

 

If my answer was helpful please mark it as a solution.

View solution in original post

5 Replies 5
FIidabashi
Member

Form gets cut off - CSS Issue?

SOLVE

Thanks so much for everyones help!  Fixed!

miljkovicmisa
Solution
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

Form gets cut off - CSS Issue?

SOLVE

Hello @FIidabashi , thank you for writing in the forum,
it seems that you have forced some heights on the iframe of the form, not sure how exacly did this happen but you should need the two steps I will point:
1. If you have access to the `<iframe>` tag you should remove the inline `height` css rule.
2. Remove `height` and `max-height` rules from the theme.css file (if you can access it).
You can see the two steps below in the screenshot:

Untitled.jpg

If neither works or if you can't remove one or neither of the above steps then the code snipped below will do the job.

.hs-form-iframe {
    height: 900px!important;
    max-height: unset!important;
}


If you have any further questions, don't hesitate to write.

 

If my answer was helpful please mark it as a solution.

Chris-M
Solution
Top Contributor

Form gets cut off - CSS Issue?

SOLVE

Hey @FIidabashi,

 

you are right, the form gets cut off, this is because you are loading the form inside an iframe.
Inside your theme.css the max-height of the iframe get defined to a maximum of 450px, so everything below gets cuted of.

If the iframe is not necessary i would remove that and embed the form normally or else you could remove or increase the max-height for your Iframe css.

 

Resetting the max height:

 

 

.inquiry iframe {
  max-height: none;
}

 

 

Here is an image of that css which cuts off the form

 

HubspotCom1.PNG

 

- Chris

FIidabashi
Member

Form gets cut off - CSS Issue?

SOLVE

Thanks so much for your help with this Chris!  I have tried to add it to the css but it still doesnt work for some reason?

0 Upvotes
Chris-M
Solution
Top Contributor

Form gets cut off - CSS Issue?

SOLVE

Hey @FIidabashi,

 

i just opened your page, it looks fine from my side. The form is rendered until the submit Button. The CSS code is also applied to this element by you.

HubspotCom2.PNG

Try an incognito mode / or another browser, just to check if this might be a caching issue from your browser.

 

Full Page Image:

screencapture-cotoclub-home-test-2021-08-04-09_38_58.png

 

Checked with Chrome and Firefox

 

- Chris