Page 1 of 1
Site Search is Wrapping Objects Placed to the Right of it
Posted: Tue Sep 24, 2024 7:57 pm
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...
03) In the workspace, Button1 and SiteSearch1 are on the same row (no wrapping) inside Flex Grid1...
This is looking good.
03) Preview project in a browser and see that Button1 and SiteSearch1 stay on the same row.
The workspace and browser preview match.
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.
05) However, preview the project in a browser and see that Button1 has moved down to another row...
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...
09) Preview project in a browser.
Everything is on the same row as I would like, with the Button1 on the right of Sitesearch1.
Is this a good workaround?
Thanks!
Re: Site Search is Wrapping Objects Placed to the Right of it
Posted: Tue Sep 24, 2024 8:23 pm
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.
Re: Site Search is Wrapping Objects Placed to the Right of it
Posted: Tue Sep 24, 2024 8:28 pm
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.
Re: Site Search is Wrapping Objects Placed to the Right of it
Posted: Tue Sep 24, 2024 8:35 pm
by Pablo
In that case, the flex properties of the button should work.
However, as previously mentioned 'site search' itself does not support flexbox.
Re: Site Search is Wrapping Objects Placed to the Right of it
Posted: Tue Sep 24, 2024 9:44 pm
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...
Weird... lol.
Re: Site Search is Wrapping Objects Placed to the Right of it
Posted: Tue Sep 24, 2024 9:54 pm
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>
Re: Site Search is Wrapping Objects Placed to the Right of it
Posted: Tue Sep 24, 2024 9:58 pm
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.
Re: Site Search is Wrapping Objects Placed to the Right of it
Posted: Tue Sep 24, 2024 10:00 pm
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>
Re: Site Search is Wrapping Objects Placed to the Right of it
Posted: Tue Sep 24, 2024 10:10 pm
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.
Re: Site Search is Wrapping Objects Placed to the Right of it
Posted: Wed Sep 25, 2024 2:57 am
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!
Thanks everyone for helping me out.
Re: Site Search is Wrapping Objects Placed to the Right of it
Posted: Wed Sep 25, 2024 8:29 am
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
Re: Site Search is Wrapping Objects Placed to the Right of it
Posted: Sun Sep 29, 2024 6:43 pm
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!