Site Search problem in breakpoints

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
User avatar
Bluesman
 
 
Posts: 1192
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Site Search problem in breakpoints

Post by Bluesman »

I have inserted the "Site search" tool in a layout grid in top right corner of a header. In default it looks good with the search field to the left and the Search button to the right. But when schrinking the browser to next breakpoint the "search button" jumps down under the search field?!
Can do this with a Page header layout, but in this case I shall use a layout grid. Have setted the layout grid in Flex box mode.
Any kind soul got some time?

Project testfile:
https://www.chevere.ec/web_storage/sear ... roblem.zip
"Make My Day"

See my Website
User avatar
BaconFries
 
 
Posts: 5884
Joined: Thu Aug 16, 2007 7:32 pm

Re: Site Search problem in breakpoints

Post by BaconFries »

To stop the search button moving or dropping down below the search input in a grid you should set the editbox full width property to "false" this will stop it using the full width of that container. Alternatively you could use a nested grid so to be able to align both the editbox and button with each other

.
User avatar
Bluesman
 
 
Posts: 1192
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Re: Site Search problem in breakpoints

Post by Bluesman »

BaconFries wrote: Thu Feb 16, 2023 4:23 am To stop the search button moving or dropping down below the search input in a grid you should set the editbox full width property to "false" this will stop it using the full width of that container. Alternatively you could use a nested grid so to be able to align both the editbox and button with each other.
Hi "BaconFries", good morning from Ecuador and tnx for replying. Unfortunately the "Site Search" object field does not have any full width property? Was looking for that :shock:
What comes to the "Nested grid" option... I have not used this tool and can not find it. How it is now... the both objects "Site Search" field and the "Search" button are in the same Layout grid. Shall I set this layout grid in some way to "nested" or shall the two objects be in a separate layour grid each? The tool "Site Search" comes with both objects as they should be together in the same container...
"Make My Day"

See my Website
User avatar
Pablo
 
Posts: 23258
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Site Search problem in breakpoints

Post by Pablo »

The 'full width' property can be found in the property inspector.
A 'nested grid' is just a grid inside another grid.

To make sure the search field and button stay on the same row, you will have to resize the search field in each breakpoint, so the button does not wrap to the next row.
User avatar
Bluesman
 
 
Posts: 1192
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Re: Site Search problem in breakpoints

Post by Bluesman »

Pablo wrote: Thu Feb 16, 2023 12:22 pm The 'full width' property can be found in the property inspector.
A 'nested grid' is just a grid inside another grid.

To make sure the search field and button stay on the same row, you will have to resize the search field in each breakpoint, so the button does not wrap to the next row.
Muchas Gracias Pablo, I was looking in the "Object properties" .... then all is well again...tnx Bacon to :D
"Make My Day"

See my Website
User avatar
BaconFries
 
 
Posts: 5884
Joined: Thu Aug 16, 2007 7:32 pm

Re: Site Search problem in breakpoints

Post by BaconFries »

Welcome.
Post Reply