Site Search is Wrapping Objects Placed to the Right of it

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
IMPORTANT NOTE!!

DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.


PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
Base12
 
 
Posts: 71
Joined: Tue Sep 17, 2024 10:12 pm

Site Search is Wrapping Objects Placed to the Right of it

Post by Base12 »

01) Open 'sitesearch_wrap_problem.wbs' found here...

https://www.mostholyplace.org/misc/test ... roblem.wbs

02) Note that SiteSearch1 is below Button1 in the Object Manager...

Image

03) In the workspace, Button1 and SiteSearch1 are on the same row (no wrapping) inside Flex Grid1...

Image

This is looking good. 8)

03) Preview project in a browser and see that Button1 and SiteSearch1 stay on the same row.

The workspace and browser preview match. 8)

04) Drag Button1 below Sitesearch1 in the Object Manager.
05) In the workspace, Button1 is now to the right of Sitesearch1 which is what I want. 8)

05) However, preview the project in a browser and see that Button1 has moved down to another row...

Image

Is this the way the software is supposed to work? I am trying to keep everything on the same row.

06) Modify the 'Order' numbers under each object's Flexbox setting...
- Sitesearch1 = 1
- Button1 = 2

07) Preview project in a browser and see that Button1 still moves down to another row.

Is this a bug?

08) Keep Order Numbers the same and now drag Button1 above Sitesearch1 in the Object Manager as it was before...

Image

09) Preview project in a browser.

Everything is on the same row as I would like, with the Button1 on the right of Sitesearch1. :D

Is this a good workaround?

Thanks!
Top
User avatar
Pablo
 
Posts: 23249
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:
Contact Pablo

Re: Site Search is Wrapping Objects Placed to the Right of it

Post by Pablo »

To make flexbox work, please set 'Easy mode' of the flex grid to 'false'. Otherwise the grid will behave as a floating container and it will ignore flexbox properties.
This is intentional behavior and not a bug.
Top
Base12
 
 
Posts: 71
Joined: Tue Sep 17, 2024 10:12 pm

Re: Site Search is Wrapping Objects Placed to the Right of it

Post by Base12 »

Pablo wrote: ↑Tue Sep 24, 2024 8:23 pm To make flexbox work, please set 'Easy mode' of the flex grid to 'false'.
This is already set in the file I provided.
Top
User avatar
Pablo
 
Posts: 23249
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:
Contact Pablo

Re: Site Search is Wrapping Objects Placed to the Right of it

Post by Pablo »

In that case, the flex properties of the button should work.
However, as previously mentioned 'site search' itself does not support flexbox.
Top
Base12
 
 
Posts: 71
Joined: Tue Sep 17, 2024 10:12 pm

Re: Site Search is Wrapping Objects Placed to the Right of it

Post by Base12 »

Pablo wrote: ↑Tue Sep 24, 2024 8:35 pm ...as previously mentioned 'site search' itself does not support flexbox.
I see.

Just an FYI...

I did another test...

https://www.mostholyplace.org/misc/test ... oblem2.wbs

When previewing in a browser, Button1 wraps below the Sitesearch1 input field as we already know.

However, if you make a copy of FlexGrid1 and paste it below, the second FlexGrid works just fine...

Image

Weird... lol.
Top
User avatar
crispy68
 
 
Posts: 3001
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:
Contact crispy68

Re: Site Search is Wrapping Objects Placed to the Right of it

Post by crispy68 »

As it is Pablo states it wont work at the moment.

However, you can add some CSS to an html object or page html between the <head> tags to make it work:

Code: Select all

<style>
#SiteSearch1_form{display:flex;align-items:center;}
</style>
Top
alan_sh
 
 
Posts: 1830
Joined: Tue Jan 01, 2019 5:50 pm

Re: Site Search is Wrapping Objects Placed to the Right of it

Post by alan_sh »

I downloaded your WBS file and previewed it. I didn't see the issue (Firefox). I resized the browser window all the way down to about 300 pixels and it still seemed OK.

Image
Top
alan_sh
 
 
Posts: 1830
Joined: Tue Jan 01, 2019 5:50 pm

Re: Site Search is Wrapping Objects Placed to the Right of it

Post by alan_sh »

This is the source code produced: How does it compare with what you get?

Code: Select all

<!doctype html><html><head><meta charset="utf-8"><title>Untitled Page</title><meta name="generator" content="WYSIWYG Web Builder 19 - https://www.wysiwygwebbuilder.com"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="sitesearch_wrap_problem.css" rel="stylesheet"><link href="index.css" rel="stylesheet"><script src="jquery-3.7.1.min.js"></script><script src="searchindex.js"></script><script src="wb.sitesearch.min.js"></script><script>
var features = 'toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=yes,status=no,left=,top=,width=,height=';
function searchPage(features)
{
   var element = document.getElementById('SiteSearch1');
   window.open('sitesearch1-results.html?q='+encodeURIComponent(element.value), '', features);
   return false;
}
</script><script>
$(document).ready(function()
{
   searchParseURL('SiteSearch1');
});
</script></head><body><div id="FlexGrid1"><div class="item-0"><input type="button" id="Button1" onclick="searchPage();return false;" name="Search" value="Search" style="display:block;width:87px;height:25px;z-index:0;"><form name="SiteSearch1_form" id="SiteSearch1_form" role="search" accept-charset="UTF-8" onsubmit="return searchPage(features)"><input type="text" id="SiteSearch1" style="display:block;width:184px;height:28px;" name="SiteSearch1" value="" spellcheck="false" placeholder="Search this website" role="searchbox" form="SiteSearch1_form"></div></div></body></html>
Top
User avatar
crispy68
 
 
Posts: 3001
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:
Contact crispy68

Re: Site Search is Wrapping Objects Placed to the Right of it

Post by crispy68 »

@Alan, if you download the 2nd file or in the 1st example move the button to be after the search bar you will see what is being referred to.
Top
Base12
 
 
Posts: 71
Joined: Tue Sep 17, 2024 10:12 pm

Re: Site Search is Wrapping Objects Placed to the Right of it

Post by Base12 »

crispy68 wrote: ↑Tue Sep 24, 2024 9:54 pm As it is Pablo states it wont work at the moment.

However, you can add some CSS to an html object or page html between the <head> tags to make it work:

Code: Select all

<style>
#SiteSearch1_form{display:flex;align-items:center;}
</style>
The code worked! 8)

Thanks everyone for helping me out. :D
Top
alan_sh
 
 
Posts: 1830
Joined: Tue Jan 01, 2019 5:50 pm

Re: Site Search is Wrapping Objects Placed to the Right of it

Post by alan_sh »

crispy68 wrote: ↑Tue Sep 24, 2024 10:10 pm @Alan, if you download the 2nd file or in the 1st example move the button to be after the search bar you will see what is being referred to.
ah, I didn't do that. Cheers.

Alan
Top
Base12
 
 
Posts: 71
Joined: Tue Sep 17, 2024 10:12 pm

Re: Site Search is Wrapping Objects Placed to the Right of it

Post by Base12 »

Good news...

I uploaded to the latest version of WYSIWYG Web Builder and the wrapping issue is now resolved!

I no longer have to add the CSS code to my web page.

Good job WYSIWYG Team! 8)
Top
Post Reply

Return to “General Questions”