I have a project going

I have placed a full screen modal (from the components) which is towards the bottom of the page, (contains a form) the problem is that when it opens it isn't actually full screen, there is a gap at the top, which means that visitors for the form have to scroll to get to the "send "button, which in turn means that the "Close button" scrolls out of view. This isn't a big problem of course when visitors actually complete the form (ecxept it would be nice for the "Full Screen Modal" to actually be full screen so they didn't have to scroll to send ) as sending takes them to a different page.

The funny thing is though, if I open a new blank page put some images & stuff on rows/columns then place a "Full Screen Modal"on a column at the bottom of the page, when that one opens, IT IS ACTUALLY FULL SCREEN" exactly as one would imagine it should be,

My question is WHY? what is the difference,

I have tried looking at everything to see if something is different between the first page and the blank page, the only difference is that I have drop down toggle buttons along the top underneath the responsive menu, which co-incides with the gap that the "Full Screen Modal" has.

My question again is WHY?

I have put the pages up temporarily again so if you need to see what I mean there is an example

balismartproperty.com

scroll down on the first page to "Contacts" click on any of the choices below, to see the Modal.

balismartproperty.com/blank.html

click on "Click me for a full screen modal"to see the difference

There must be some Guru or Magician out there that knows WHY.

Thanks

Wayan

I can't answer your questions. But I think the view of the form plus the closing X is dependent on the screen size. I see the form in full and that X at the same time (and I guess that if I use my laptop, I would not).
I notice that the modal goes from the bottom of the viewport up to where the top column ends. Would it be a workaround to place the form at the top of the modal instead of the bottom? Or make it wider, so that you can put some of the fields beside each other instead of below?

One more thing: The modal with the form makes it impossible to scroll the page, as you can if you don't open the modal. And the form is not responsive.
The 'blank' page can be scrolled even if the modal is open, and the modal itself is more than 100% of the viewport height. If I narrow the viewport, the cat image gets reduced in size along with the viewport, but the modal 'overlay' stays at vh100.
These are just my observations, I don't know if they apply to your problem...

Hello Inger
the form is placed at the top of the modal, I don't know why you say not responsive it is responsive on my machine, but it isnt the real form anyway as I just put it up to show the thing that happens with the modal. Both of the modal pages are straight from the components part of FF and both behave differently, The reason I think is that on the index page the responsive menu that is on the top row is preventing the modal page from going full screen.

The real form and the index page are almost finished, and yes I have made the form wider and changed the design somewhat, at least now the form fit's the window without scrolling down to the "SEND"Button but there is still that annoying gap at the top, which with a modal shouldn't be there

There's 16px of padding on the modal, this comes from the '.reveal' from the foundation framework and might be dynamically added by the JavaScript. You could try to add that class to the modal container and set the padding to 0px.

I was only describing what I saw. Since you said 'towards the bottom' in your first post here, I understood it the way that the form had been placed at the bottom of the modal, and it was in fact sitting smack at the bottom of my screen. And now you are saying it wasn't the real form. Well, I wouldn't know that, would I ?

Bob
I have now realised that in fact the modal window does in fact cover the whole screen, what is happening though is it is the semi-transparent background colour that isn't covering the whole screen

No problems anyway because now I have done the proper form and it fits onto the screen exactly where it should once the padding was got rid of.

Hi Inger, sorry for any confusion, but I just put up the pages to show the problem with the modal window not appearing to cover all the screen on the page with the changed content, as against the example of a modal window straight from the components section on a page without any additional content, which appears to actually cover the whole page.

I have finally completed the form and it fit's nicely no need to scroll etc so everything is hunky dory.

Thanks anyway for your attention

Wayan

Looks good!
I wonder if you should perhaps also put the contact link into the top navigation....

That is on the cards now that I have almost cracket the forms. All I need now is to figure out how to stop bots from filling out the form (captcha) and how to get it onto the form its all in a language from outer space at the moment.

That looks really nice. I'll have to try that sometime.