Using a form in a flex grid.

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
lilandy
 
 
Posts: 32
Joined: Wed Apr 29, 2020 9:29 am

Using a form in a flex grid.

Post by lilandy » Fri May 01, 2020 2:20 pm

I am on the home straights of finishing my first page with WYSIWYG!

But I have one last obstacle to over come...

I am trying to put a form inside my Flex grid,
I have set the grid to "form" so I can put the form objects inside no problem, But I am having real issues with the layout.

The only way I can get the form to stay in order seems to be to set "full width=true"
Obv I don't want a full width form though!

But if I take this option off and try setting it to some manual values, I have put 400,30px for text boxes it seems to blow them up larger!
I think this is all to do with the flex grow/shrink but is there some way I can disable that so the form stays the size I make it?

Thanks.

User avatar
Pablo
 
Posts: 21437
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Using a form in a flex grid.

Post by Pablo » Fri May 01, 2020 2:28 pm

It is difficult to help you without seeing what you have done.
But, when using flexgrid, you should have some knowledge of flexbox because that is how you control the size of elements.

Recommended reading:
http://wysiwygwebbuilder.com/flexbox.html

lilandy
 
 
Posts: 32
Joined: Wed Apr 29, 2020 9:29 am

Re: Using a form in a flex grid.

Post by lilandy » Fri May 01, 2020 2:43 pm

Pablo wrote:
Fri May 01, 2020 2:28 pm
It is difficult to help you without seeing what you have done.
But, when using flexgrid, you should have some knowledge of flexbox because that is how you control the size of elements.

Recommended reading:
http://wysiwygwebbuilder.com/flexbox.html
Cheers Pablo, I read through that but still cant work it out.

Heres a link to my WBS file, The problem is with the form on the contact us page.
https://drive.google.com/file/d/1ReBJav ... sp=sharing

User avatar
Pablo
 
Posts: 21437
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Using a form in a flex grid.

Post by Pablo » Fri May 01, 2020 3:50 pm

In the flexbox properties of the input fields, set flex grow and flex shrink to '0'
Then you can set a manual value in the 'flex basis' property.
For example, 50% or 30px

Note however, that if the elements are not full width then the will be place after each other.
You can prevent this (for example ) by placing a transparent (full width) line between the elements.

Also, by giving elements a fixed size, they will lose their flexible behavior.

lilandy
 
 
Posts: 32
Joined: Wed Apr 29, 2020 9:29 am

Re: Using a form in a flex grid.

Post by lilandy » Fri May 01, 2020 5:24 pm

Pablo wrote:
Fri May 01, 2020 3:50 pm
In the flexbox properties of the input fields, set flex grow and flex shrink to '0'
Then you can set a manual value in the 'flex basis' property.
For example, 50% or 30px

Note however, that if the elements are not full width then the will be place after each other.
You can prevent this (for example ) by placing a transparent (full width) line between the elements.

Also, by giving elements a fixed size, they will lose their flexible behavior.
Thanks once again :)
I shall give it a shot tomorrow.

As a side question to save starting another thread I seem to have somthing strange going on when viewing with a I phone.

Its chopping off the bottom of my page at the bottom of the phone!

The break points work and it matters not if I am in portrait or landscape theres just nothing there, No scroll nothing.

User avatar
Pablo
 
Posts: 21437
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Using a form in a flex grid.

Post by Pablo » Fri May 01, 2020 5:32 pm

What exactly do I have to do to see this behavior?

lilandy
 
 
Posts: 32
Joined: Wed Apr 29, 2020 9:29 am

Re: Using a form in a flex grid.

Post by lilandy » Fri May 01, 2020 6:32 pm

Pablo wrote:
Fri May 01, 2020 5:32 pm
What exactly do I have to do to see this behavior?
Well that's the thing, When I preview it in a browser window and resize it then its all fine. Its literally just when I open it on my iPhone after publishing it to the web!

I have taken it down temporarily to try and sort the form issue but I will get back to you once its back up....

lilandy
 
 
Posts: 32
Joined: Wed Apr 29, 2020 9:29 am

Re: Using a form in a flex grid.

Post by lilandy » Fri May 01, 2020 7:09 pm

Pablo wrote:
Fri May 01, 2020 5:32 pm
What exactly do I have to do to see this behavior?
Well I re-jigged the form and it worked great! Thanks Pablo!

In regards to the other thing it seems to of fixed itself?
Not sure how or why but there we go lol.

Post Reply