Layout Grid as a Form

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
lummis
 
 
Posts: 100
Joined: Sun Apr 24, 2011 9:18 am
Location: UK

Layout Grid as a Form

Post by lummis » Wed Feb 21, 2018 1:55 pm

I am using a Layout Grid as a Form and have added a Combobox Object and a Text Area Object as part of the form. To stop those Objects stretching too far I have added a right hand margin using Arrange - Box Margin which acts as expected on the page. However when published the margin appears to be ignored. To test that I had added the margin correctly, I then added a Text Object with the same margin and, when published, that margin works.

I have published a test page at [url]http://www.*********.org.uk/test/index.php[/url]

The test file can be downloaded from http://www.mediafire.com/file/**********/Test.wbs

Have I overlooked something?

Brian
Last edited by lummis on Wed Feb 21, 2018 2:31 pm, edited 1 time in total.

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

Re: Layout Grid as a Form

Post by Pablo » Wed Feb 21, 2018 2:03 pm

The margin works correct. However, in HTML the margin will be added to the total size of the element and because the size of the element is 100%, the size of the element will be 100% + margin.

lummis
 
 
Posts: 100
Joined: Sun Apr 24, 2011 9:18 am
Location: UK

Re: Layout Grid as a Form

Post by lummis » Wed Feb 21, 2018 2:10 pm

Can you clarify for me why the text area margin reduces the overall length whilst the form objects do not change? I would have thought that both are elements and would have reacted the same! As you will see from the test project all line up on the right hand side but the published page doesn't.

Brian

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

Re: Layout Grid as a Form

Post by Pablo » Wed Feb 21, 2018 2:24 pm

Because text is block element, so the container is full width without the need for 'width:100%'

If you want a spacing around the form elements, then you should apply padding (gutter) to the container (the grid).

- add a 480 breakpoint
- set the gutter for the grid in that breakpoint.

lummis
 
 
Posts: 100
Joined: Sun Apr 24, 2011 9:18 am
Location: UK

Re: Layout Grid as a Form

Post by lummis » Wed Feb 21, 2018 2:28 pm

Thanks Pablo for pointing me in the right direction. I was getting worried as what I was seeing in the project was not reflected on the published page. It seems that there is always another way :)

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest