In my design the Search box and the repeating group are both positioned the same on the left side as shown in the screenshot below, but when I preview the page the search box only aligns itself to the left when at a low screensize – as shown in the video link below. How can I get the left side to stay in a fixed position?
Hi @Kfawcett. Do you have the responsive engine turned on? If so, then maybe this hack that I’ve tried a few times will work for you.
Create a rectangle the exact size of your stories/Locations column and place it in the green bar behind the logo. Either make it transparent or the same color as the header background so you technically do not see it. Then make it fixed width (still talking about the background box). This should then make the search input anchor on that box so it will maintain the same distance as the screen expands.
Crossing my fingers that this works for you.
Hi @saeed.t.richardson, I do have responsive turned on and would like the search box to be responsive, but I would like the left position to be fixed. It’s odd that the repeating group is functioning that way, but not the search box.
Again, can you share a run mode link? Also, looking at it, i think the floating group in the header has a very height min width, you should probably change that.
Emmanuel, I sent a PM to you and Josh with the links to the site.
Did you change the floating group setting? That’s the first step.
1 Like
Sorry for taking so long to get back. “Life stuff”. Might want to note that the responsive engine is still beta a lot is probably happening behind the scenes. All of a sudden my fullscreen header is no longer working full screen and only stays at the designated width. Sorry I couldn’t be of more help.
@emmanuel Neither of the items (repeating group or autocomplete dropdown) are floating groups, but for some reason the autocomplete dropdown tries to center itself above a certain screen width. The repeating group does not behave the same way. I would like the autocomplete dropdown to behave like the repeating group.
The design has the left sides aligned.
The run mode doesn’t look the same.
Can you share a link to the editor? It’s probably that you didn’t make the search box left aligned, but I’d like to check.
Link sent in private message
So one thing that would make things easier is to have the search box and the header be in the same element. Can you do this, that’ll make solving this issue much easier.
Moving the Search box into the header corrects it, just makes it a little more difficult to align everything since the search box isn’t editable from the page. Thanks Emmanuel!
Yes, in this case I would actually recommend having the header as a group in the page, but a reusable element (and use styles to have a similar layout).